Как включить файл JavaScript в другой файл JavaScript?


есть ли что-то в JavaScript, как @import в CSS, что позволяет включить файл JavaScript внутри другого файла JavaScript?

30   4286   2009-06-04 15:59:50

30 ответов:

старые версии JavaScript не имели импорта, включают или требуют, поэтому было разработано множество различных подходов к этой проблеме.

но с 2015 года (ES6) JavaScript имеет модули ES6 стандарт для импорта модулей в узел.js, который также поддерживается большинство современных браузеров.

для совместимости со старыми браузерами, построить и/или transpilation инструменты могут быть используемый.

модули ES6

модули ECMAScript (ES6) были поддержаны в узле.js начиная с v8. 5, с --experimental-modules флаг. Все вовлеченные файлы должны иметь

Если кто-то ищет что-то более продвинутое, попробовать RequireJS. Вы получите дополнительные преимущества, такие как управление зависимостями, лучший параллелизм и предотвращение дублирования (то есть получение сценария более одного раза).

вы можете писать свои файлы JavaScript в "модулях", а затем ссылаться на них как на зависимости в других сценариях. Или вы можете использовать RequireJS как простое решение "go get this script".

пример:

определить зависимости как модули:

некоторых-зависимость.js

define(['lib/dependency1', 'lib/dependency2'], function (d1, d2) {

     //Your actual script goes here.   
     //The dependent scripts will be fetched if necessary.

     return libraryObject;  //For example, jQuery object
});

реализация.js это ваш" основной " файл JavaScript, который зависит от некоторых-зависимость.js

require(['some-dependency'], function(dependency) {

    //Your script goes here
    //some-dependency.js is fetched.   
    //Then your script is executed
});

фрагмент GitHub README:

RequireJS загружает простые файлы JavaScript, а также более определенные модули. Он оптимизирован для использования в браузере, в том числе в Интернете Рабочий, но его можно использовать и в других JavaScript окружающая среда, например Носорог и узел. Он реализует асинхронный модуль API.

RequireJS использует простые теги скрипта для загрузки модулей/ файлов, поэтому он должен позвольте для легкой отладки. Он может быть использован просто для загрузки существующих JavaScript файлы, так что вы можете добавить его в существующий проект без необходимость переписать ваши файлы JavaScript.

...

там на самом деле и способ загрузки файла JavaScript не асинхронно, поэтому вы можете использовать функции, включенные в ваш недавно загруженный файл сразу после его загрузки, и я думаю, что он работает во всех браузерах.

вы должны использовать jQuery.append() на <head> элемент вашей страницы, то есть:

$("head").append('<script type="text/javascript" src="' + script + '"></script>');

однако этот метод также имеет проблему: если ошибка происходит в импортированном файле JavaScript,Firebug (а также Firefox ошибка консоли и Chrome Developer Tools также) сообщит о своем месте неправильно, что является большой проблемой, если вы используете Firebug для отслеживания ошибок JavaScript (я делаю). Firebug просто не знает о недавно загруженном файле по какой-то причине, поэтому, если в этом файле возникает ошибка, он сообщает, что это произошло в вашем main HTML файл, и вы будете иметь проблемы с выяснением реальной причины ошибки.

но если это не проблема для вы, значит, этот метод должен работать.

я на самом деле написал плагин jQuery под названием $.import_js (), который использует этот метод:

(function($)
{
    /*
     * $.import_js() helper (for JavaScript importing within JavaScript code).
     */
    var import_js_imported = [];

    $.extend(true,
    {
        import_js : function(script)
        {
            var found = false;
            for (var i = 0; i < import_js_imported.length; i++)
                if (import_js_imported[i] == script) {
                    found = true;
                    break;
                }

            if (found == false) {
                $("head").append('<script type="text/javascript" src="' + script + '"></script>');
                import_js_imported.push(script);
            }
        }
    });

})(jQuery);

так что все, что вам нужно сделать, чтобы импортировать JavaScript:

$.import_js('/path_to_project/scripts/somefunctions.js');

я сделал простой тест для этого в пример.

он включает в себя main.js файл в основном HTML, а затем скрипт в main.js использует $.import_js() чтобы импортировать дополнительный файл с именем included.js, которым определяет эту функцию:

function hello()
{
    alert("Hello world!");
}

и сразу после включения included.js на hello() функция вызывается, и вы получаете предупреждение.

(этот ответ является ответом на комментарий e-satis).

другой способ, который, на мой взгляд, намного чище, - сделать синхронный запрос Ajax вместо использования <script> - тег. Что тоже как узел.js ручки включает в себя.

вот пример использования jQuery:

function require(script) {
    $.ajax({
        url: script,
        dataType: "script",
        async: false,           // <-- This is the key
        success: function () {
            // all good...
        },
        error: function () {
            throw new Error("Could not load script " + script);
        }
    });
}

затем вы можете использовать его в своем коде, как вы обычно используете include:

require("/scripts/subscript.js");

и иметь возможность вызвать функцию из необходимого скрипта в следующей строке:

subscript.doSomethingCool(); 

есть хорошая новость для вас. Очень скоро вы сможете легко загружать код JavaScript. Это станет стандартным способом импорта модулей кода JavaScript и будет частью самого ядра JavaScript.

вы просто должны написать import cond from 'cond.js'; загрузить макрос с именем cond из файла cond.js.

поэтому вам не нужно полагаться на какую-либо структуру JavaScript, и вам не нужно явно делать Ajax звонки.

см. к:

можно динамически генерировать тег JavaScript и добавлять его в HTML-документ из другого кода JavaScript. Это загрузит целевой файл JavaScript.

function includeJs(jsFilePath) {
    var js = document.createElement("script");

    js.type = "text/javascript";
    js.src = jsFilePath;

    document.body.appendChild(js);
}

includeJs("/path/to/some/file.js");

сообщении import находится в ECMAScript 6.

синтаксис

import name from "module-name";
import { member } from "module-name";
import { member as alias } from "module-name";
import { member1 , member2 } from "module-name";
import { member1 , member2 as alias2 , [...] } from "module-name";
import name , { member [ , [...] ] } from "module-name";
import "module-name" as name;

может быть, вы можете использовать эту функцию, которую я нашел на этой странице Как включить файл JavaScript в файл JavaScript?:

function include(filename)
{
    var head = document.getElementsByTagName('head')[0];

    var script = document.createElement('script');
    script.src = filename;
    script.type = 'text/javascript';

    head.appendChild(script)
}

здесь синхронно версия без jQuery:

function myRequire( url ) {
    var ajax = new XMLHttpRequest();
    ajax.open( 'GET', url, false ); // <-- the 'false' makes it synchronous
    ajax.onreadystatechange = function () {
        var script = ajax.response || ajax.responseText;
        if (ajax.readyState === 4) {
            switch( ajax.status) {
                case 200:
                    eval.apply( window, [script] );
                    console.log("script loaded: ", url);
                    break;
                default:
                    console.log("ERROR: script not loaded: ", url);
            }
        }
    };
    ajax.send(null);
}

обратите внимание, что для получения этого рабочего кросс-домена, сервер должен будет установить allow-origin заголовок в ответе.

Я только что написал этот код JavaScript (используя прототип на DOM манипуляции):

var require = (function() {
    var _required = {};
    return (function(url, callback) {
        if (typeof url == 'object') {
            // We've (hopefully) got an array: time to chain!
            if (url.length > 1) {
                // Load the nth file as soon as everything up to the
                // n-1th one is done.
                require(url.slice(0, url.length - 1), function() {
                    require(url[url.length - 1], callback);
                });
            } else if (url.length == 1) {
                require(url[0], callback);
            }
            return;
        }
        if (typeof _required[url] == 'undefined') {
            // Haven't loaded this URL yet; gogogo!
            _required[url] = [];

            var script = new Element('script', {
                src: url,
                type: 'text/javascript'
            });
            script.observe('load', function() {
                console.log("script " + url + " loaded.");
                _required[url].each(function(cb) {
                    cb.call(); // TODO: does this execute in the right context?
                });
                _required[url] = true;
            });

            $$('head')[0].insert(script);
        } else if (typeof _required[url] == 'boolean') {
            // We already loaded the thing, so go ahead.
            if (callback) {
                callback.call();
            }
            return;
        }

        if (callback) {
            _required[url].push(callback);
        }
    });
})();

использование:

<script src="prototype.js"></script>
<script src="require.js"></script>
<script>
    require(['foo.js','bar.js'], function () {
        /* Use foo.js and bar.js here */
    });
</script>

суть: http://gist.github.com/284442.

вот обобщенная версия того, как Facebook делает это для своей вездесущей кнопки Like:

<script>
  var firstScript = document.getElementsByTagName('script')[0],
      js = document.createElement('script');
  js.src = 'https://cdnjs.cloudflare.com/ajax/libs/Snowstorm/20131208/snowstorm-min.js';
  js.onload = function () {
    // do stuff with your dynamically loaded script
    snowStorm.snowColor = '#99ccff';
  };
  firstScript.parentNode.insertBefore(js, firstScript);
</script>

если он работает для Facebook, он будет работать для вас.

причина, по которой мы ищем первый script элемент вместо head или body это потому, что некоторые браузеры не создают его, если он отсутствует, но мы гарантированно имеем script элемент - это одно. Подробнее на сайте http://www.jspatterns.com/the-ridiculous-case-of-adding-a-script-element/.

если вы хотите в чистом JavaScript, вы можете использовать document.write.

document.write('<script src="myscript.js" type="text/javascript"></script>');

если вы используете библиотеку jQuery, вы можете использовать $.getScript метод.

$.getScript("another_script.js");

большинство решений, показанных здесь, подразумевают динамическую нагрузку. Вместо этого я искал компилятор, который собирает все зависящие файлы в один выходной файл. То же самое, что меньше/Сасс препроцессоры имеют дело с CSS @import at-rule. Поскольку я не нашел ничего достойного такого рода, я написал простой инструмент, решающий проблему.

Итак, вот компилятор,https://github.com/dsheiko/jsic, который заменяет $import("file-path") С запрошенное содержимое файла надежно. Вот соответствующий грунт плагин:https://github.com/dsheiko/grunt-jsic.

в ветви jQuery master они просто объединяют атомарные исходные файлы в один, начиная с intro.js и заканчивая outtro.js. Это меня не устраивает, так как не обеспечивает гибкости в дизайне исходного кода. Проверьте, как это работает входит:

src / main.js

var foo = $import("./Form/Input/Tel");

src / Form / Input / Tel.js

function() {
    return {
          prop: "",
          method: function(){}
    }
}

теперь мы можем запустить компилятор:

node jsic.js src/main.js build/mail.js

и получить объединенный файл

build / main.js

var foo = function() {
    return {
          prop: "",
          method: function(){}
    }
};

вы также можете собрать свой скрипт PHP:

File main.js.php:

<?php
    header('Content-type:text/javascript; charset=utf-8');
    include_once("foo.js.php");
    include_once("bar.js.php");
?>

// Main JavaScript code goes here

если вы хотите, чтобы загрузить файл JavaScript использование функций импорта/включаемый файл, вы также можете определить глобальный объект и установить функции как элементы объекта. Например:

глобальные.js

A = {};

file1.js

A.func1 = function() {
  console.log("func1");
}

file2.js

A.func2 = function() {
  console.log("func2");
}

главная.js

A.func1();
A.func2();

вам просто нужно быть осторожным, когда вы включаете скрипты в HTML-файл. Порядок должен быть как в ниже:

<head>
  <script type="text/javascript" src="global.js"></script>
  <script type="text/javascript" src="file1.js"></script>
  <script type="text/javascript" src="file2.js"></script>
  <script type="text/javascript" src="main.js"></script>
</head>

Это:

xhr = new XMLHttpRequest();
xhr.open("GET", "/soap/ajax/11.0/connection.js", false);
xhr.send();
eval(xhr.responseText);

или вместо включения во время выполнения используйте скрипт для объединения перед загрузкой.

Я использую звездочки (Я не знаю, есть ли другие). Вы создаете свой код JavaScript в отдельных файлах и включаете комментарии, которые обрабатываются механизмом звездочек, как включает. Для разработки вы можете включать файлы последовательно, а затем для производства объединять их...

Читайте также:

В случае, если вы используете Веб-Работников и хотите включить дополнительные скрипты в область рабочего, другие ответы, предоставленные о добавлении скриптов в head бирка, etc. не будет работать для вас.

к счастью, веб-работники имеют свои собственные importScripts функции который является глобальной функцией в области веб-работника, родной для самого браузера, как это является частью спецификации.

в качестве альтернативы, как второй по величине проголосовал ответ на ваш вопрос основные моменты, RequireJS может также обрабатывать в том числе скрипты внутри веб-работника (вероятно, вызов importScripts сам, но с несколькими другими полезными функциями).

у меня была простая проблема, но я был озадачен ответами на этот вопрос.

мне пришлось использовать переменную (myVar1), определенную в одном файле JavaScript (myvariables.js) в другом файле JavaScript (main.js).

для этого я сделал, как показано ниже:

загрузил код JavaScript в HTML-файл, в правильном порядке, myvariables.сначала js, потом main.js:

<html>
    <body onload="bodyReady();" >

        <script src="myvariables.js" > </script>
        <script src="main.js" > </script>

        <!-- Some other code -->
    </body>
</html>

File: myvariables.js

var myVar1 = "I am variable from myvariables.js";

File: main.js

// ...
function bodyReady() {
    // ...
    alert (myVar1);    // This shows "I am variable from myvariables.js", which I needed
    // ...
}
// ...

как вы видели, я использовал переменную в одном файле JavaScript в другом файле JavaScript, но мне не нужно было включать один в другой. Мне просто нужно было убедиться, что первый файл JavaScript загружен до второго файла JavaScript, а переменные первого файла JavaScript доступны во втором файле JavaScript автоматически.

Это спасло мой день. Надеюсь, это поможет.

The @import синтаксис для достижения CSS-подобного импорта JavaScript можно использовать с помощью такого инструмента, как смесь через их специальный .mix тип файла (см. здесь). Я предполагаю, что приложение просто использует один из вышеупомянутых методов внутри, хотя я не знаю.

из документации по смеси на .mix файлы:

Mix файлы просто .js or .css файлы С.смесь. в имени файла. Один файл mix просто расширяет функциональность нормального стиля или скрипт позволяет импортировать и объединять.

вот пример .mix файл, который объединяет несколько .js файл:

// scripts-global.mix.js
// Plugins - Global

@import "global-plugins/headroom.js";
@import "global-plugins/retina-1.1.0.js";
@import "global-plugins/isotope.js";
@import "global-plugins/jquery.fitvids.js";

смесь выводит это как scripts-global.js а также в виде уменьшенной версии (scripts-global.min.js).

примечание: Я никоим образом не связан с Mixture, кроме использования его в качестве инструмента разработки переднего плана. Я наткнулся на этот вопрос, увидев .mix JavaScript файл в действии (в одной из смесительных плит) и немного смущен этим ("вы можете это сделать?"Я подумал про себя). Затем я понял, что это был тип файла для конкретного приложения (несколько разочаровывающий, согласен). Тем не менее, решил, что знание может быть полезно для других.

обновление: смесь теперь бесплатно (offline).

обновление: смеси в настоящее время прекращена. старые релизы смеси еще доступно

Я написал простой модуль, который автоматизирует работу по импорту / включению скриптов модулей в JavaScript. Для подробного объяснения кода, обратитесь к сообщению в блоге JavaScript require / import / include modules.

// ----- USAGE -----

require('ivar.util.string');
require('ivar.net.*');
require('ivar/util/array.js');
require('http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js');

ready(function(){
    //Do something when required scripts are loaded
});

    //--------------------

var _rmod = _rmod || {}; //Require module namespace
_rmod.LOADED = false;
_rmod.on_ready_fn_stack = [];
_rmod.libpath = '';
_rmod.imported = {};
_rmod.loading = {
    scripts: {},
    length: 0
};

_rmod.findScriptPath = function(script_name) {
    var script_elems = document.getElementsByTagName('script');
    for (var i = 0; i < script_elems.length; i++) {
        if (script_elems[i].src.endsWith(script_name)) {
            var href = window.location.href;
            href = href.substring(0, href.lastIndexOf('/'));
            var url = script_elems[i].src.substring(0, script_elems[i].length - script_name.length);
            return url.substring(href.length+1, url.length);
        }
    }
    return '';
};

_rmod.libpath = _rmod.findScriptPath('script.js'); //Path of your main script used to mark
                                                   //the root directory of your library, any library.


_rmod.injectScript = function(script_name, uri, callback, prepare) {

    if(!prepare)
        prepare(script_name, uri);

    var script_elem = document.createElement('script');
    script_elem.type = 'text/javascript';
    script_elem.title = script_name;
    script_elem.src = uri;
    script_elem.async = true;
    script_elem.defer = false;

    if(!callback)
        script_elem.onload = function() {
            callback(script_name, uri);
        };
    document.getElementsByTagName('head')[0].appendChild(script_elem);
};

_rmod.requirePrepare = function(script_name, uri) {
    _rmod.loading.scripts[script_name] = uri;
    _rmod.loading.length++;
};

_rmod.requireCallback = function(script_name, uri) {
    _rmod.loading.length--;
    delete _rmod.loading.scripts[script_name];
    _rmod.imported[script_name] = uri;

    if(_rmod.loading.length == 0)
        _rmod.onReady();
};

_rmod.onReady = function() {
    if (!_rmod.LOADED) {
        for (var i = 0; i < _rmod.on_ready_fn_stack.length; i++){
            _rmod.on_ready_fn_stack[i]();
        });
        _rmod.LOADED = true;
    }
};

_.rmod = namespaceToUri = function(script_name, url) {
    var np = script_name.split('.');
    if (np.getLast() === '*') {
        np.pop();
        np.push('_all');
    }

    if(!url)
        url = '';

    script_name = np.join('.');
    return  url + np.join('/')+'.js';
};

//You can rename based on your liking. I chose require, but it
//can be called include or anything else that is easy for you
//to remember or write, except "import", because it is reserved
//for future use.
var require = function(script_name) {
    var uri = '';
    if (script_name.indexOf('/') > -1) {
        uri = script_name;
        var lastSlash = uri.lastIndexOf('/');
        script_name = uri.substring(lastSlash+1, uri.length);
    } 
    else {
        uri = _rmod.namespaceToUri(script_name, ivar._private.libpath);
    }

    if (!_rmod.loading.scripts.hasOwnProperty(script_name)
     && !_rmod.imported.hasOwnProperty(script_name)) {
        _rmod.injectScript(script_name, uri,
            _rmod.requireCallback,
                _rmod.requirePrepare);
    }
};

var ready = function(fn) {
    _rmod.on_ready_fn_stack.push(fn);
};

мой обычный метод:

var require = function (src, cb) {
    cb = cb || function () {};

    var newScriptTag = document.createElement('script'),
        firstScriptTag = document.getElementsByTagName('script')[0];
    newScriptTag.src = src;
    newScriptTag.async = true;
    newScriptTag.onload = newScriptTag.onreadystatechange = function () {
        (!this.readyState || this.readyState === 'loaded' || this.readyState === 'complete') && (cb());
    };
    firstScriptTag.parentNode.insertBefore(newScriptTag, firstScriptTag);
}

Он отлично работает и не использует никаких перезагрузок страниц для меня. Я пробовал метод AJAX (один из других ответов), но он, похоже, не работает так хорошо для меня.

вот объяснение того, как код работает для тех, кто любопытен: по сути, он создает новый тег сценария (после первого) URL. Он устанавливает его в асинхронный режим, поэтому он не блокирует остальную часть кода, но вызывает обратный вызов, когда readyState (состояние содержимое, которое будет загружено) изменяется на "загружено".

var js = document.createElement("script");

js.type = "text/javascript";
js.src = jsFilePath;

document.body.appendChild(js);

на современном языке это было бы

function loadJs( url ){
  return new Promise( resolve => {
    const script = document.createElement( "script" );
    script.src = url;
    script.onload = resolve;
    document.head.appendChild( script );
  });
}

этот скрипт добавит файл JavaScript в начало любого другого <script> теги:

(function () {
    var li = document.createElement('script'); 
    li.type = 'text/javascript'; 
    li.src= "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"; 
    li.async=true; 
    var s = document.getElementsByTagName('script')[0]; 
    s.parentNode.insertBefore(li, s);
})();

появилась головы.js. Это очень легко иметь дело:

head.load("js/jquery.min.js",
          "js/jquery.someplugin.js",
          "js/jquery.someplugin.css", function() {
  alert("Everything is ok!");
});

Как вы видите, это проще, чем требовать.js и так же удобно, как jQuery $.getScript метод. Он также имеет некоторые дополнительные функции, такие как условная загрузка, обнаружение функций и больше.

Я пришел к этому вопросу, потому что я искал простой способ поддерживать коллекцию полезных плагинов JavaScript. Увидев некоторые из решений здесь, я придумал это:

  1. настройка файла под названием "Плагины.js "( или расширения.js или что у вас есть). Храните файлы плагинов вместе с этим одним главным файлом.

  2. Плагины.js будет иметь массив под названием " pluginNames []", который мы будем перебирать по каждому(), затем добавьте тег к голова для каждого плагина

    / / установить массив, который будет обновляться при добавлении или удалении файлов плагинов var pluginNames = ["надпись", "fittext", "butterjam" и др.]; //один тег скрипта для каждого плагина $.каждый (pluginNames, функция(){ $('head').добавлять''(); });

  3. вручную вызвать только один файл в вашей голове:
    <script src="js/plugins/plugins.js"></script>

Я обнаружил, что даже при том, что все плагины попадали в тег head так, как они должны были, они не всегда запускались браузером при нажатии на страницу или обновлении.

Я нашел, что более надежно просто писать теги скриптов в PHP include. Вы только должны написать его один раз, и это так же много работы, как вызов плагина с помощью JavaScript.

есть много возможных ответов на этот вопрос. Мой ответ, очевидно, основан на ряде из них. Это то, что я получил после прочтения всех ответов.

проблема с $.getScript и действительно любое другое решение, которое требует обратного вызова при завершении загрузки, заключается в том, что если у вас есть несколько файлов, которые его используют и зависят друг от друга, у вас больше нет способа узнать, когда все скрипты были загружены (как только они вложены в несколько архив.)

пример:

file3.js

var f3obj = "file3";

// Define other stuff

file2.js:

var f2obj = "file2";
$.getScript("file3.js", function(){

    alert(f3obj);

    // Use anything defined in file3.
});

file1.js:

$.getScript("file2.js", function(){
    alert(f3obj); //This will probably fail because file3 is only guaranteed to have loaded inside the callback in file2.
    alert(f2obj);

    // Use anything defined in the loaded script...
});

вы правы, когда говорите, что вы можете указать Ajax для синхронного запуска или использовать XMLHttpRequest, но текущая тенденция, по-видимому, заключается в устаревании синхронных запросов, поэтому вы не можете получить полную поддержку браузера сейчас или в будущем.

вы можете попробовать использовать $.when для проверки массива отложенные объекты, но теперь вы делаете это в каждом файле и file2 будет считать запущенным, как только $.when выполняется не тогда, когда выполняется обратный вызов, поэтому file1 все еще продолжает выполнение до загрузки file3. Это действительно все еще имеет ту же проблему.

я решил идти назад, а не вперед. Спасибо document.writeln. Я знаю, что это табу, но пока он используется правильно работает хорошо. Вы получаете код, который можно легко отлаживать, показывает в DOM правильно и может обеспечить правильный порядок загрузки зависимостей.

вы можете, конечно, использовать $ ("тело").append (), но тогда вы больше не можете правильно отлаживать.

Примечание: Вы должны использовать это только при загрузке страницы, в противном случае вы получите пустой экран. Другими словами,всегда устанавливайте это перед / вне документа.готов. Я не тестировал использование этого после загрузки страницы в событие click или что-то в этом роде, но я довольно конечно, это не сработает.

мне понравилась идея расширения jQuery, но, очевидно, вам это не нужно.

перед вызовом document.writeln, он проверяет, чтобы убедиться, что скрипт еще не был загружен, оценивая все элементы скрипта.

я предполагаю, что скрипт не будет полностью выполнен до его document.ready событие было выполнено. (Я знаю, используя document.ready не требуется, но многие люди используют его, и регулировать это защита.)

когда дополнительные файлы загружаются в document.ready обратные вызовы будут выполняться в правильном порядке. Чтобы решить эту проблему, когда сценарий фактически загружен, импортированный сценарий повторно импортируется и выполнение останавливается. Это приводит к тому, что исходный файл теперь имеет свой document.ready обратный вызов выполняется после любого из любых сценариев, которые он импортирует.

вместо этого подхода вы можете попытаться изменить jQuery readyList, но это казалось хуже решение.

устранение:

$.extend(true,
{
    import_js : function(scriptpath, reAddLast)
    {
        if (typeof reAddLast === "undefined" || reAddLast === null)
        {
            reAddLast = true; // Default this value to true. It is not used by the end user, only to facilitate recursion correctly.
        }

        var found = false;
        if (reAddLast == true) // If we are re-adding the originating script we do not care if it has already been added.
        {
            found = $('script').filter(function () {
                return ($(this).attr('src') == scriptpath);
            }).length != 0; // jQuery to check if the script already exists. (replace it with straight JavaScript if you don't like jQuery.
        }

        if (found == false) {

            var callingScriptPath = $('script').last().attr("src"); // Get the script that is currently loading. Again this creates a limitation where this should not be used in a button, and only before document.ready.

            document.writeln("<script type='text/javascript' src='" + scriptpath + "'></script>"); // Add the script to the document using writeln

            if (reAddLast)
            {
                $.import_js(callingScriptPath, false); // Call itself with the originating script to fix the order.
                throw 'Readding script to correct order: ' + scriptpath + ' < ' + callingScriptPath; // This halts execution of the originating script since it is getting reloaded. If you put a try / catch around the call to $.import_js you results will vary.
            }
            return true;
        }
        return false;
    }
});

использование:

файл file3:

var f3obj = "file3";

// Define other stuff
$(function(){
    f3obj = "file3docready";
});

File2:

$.import_js('js/file3.js');
var f2obj = "file2";
$(function(){
    f2obj = "file2docready";
});

File1:

$.import_js('js/file2.js');

// Use objects from file2 or file3
alert(f3obj); // "file3"
alert(f2obj); // "file2"

$(function(){
    // Use objects from file2 or file3 some more.
    alert(f3obj); //"file3docready"
    alert(f2obj); //"file2docready"
});

Я создал функцию, которая позволит вам использовать аналогичные глаголы на C#/Java для включения файла JavaScript. Я проверил его немного даже изнутри другое JavaScript файл, и это, кажется, работает. Это требует jQuery, хотя для немного "магии" в конце.

Я поместил этот код в файл в корне каталога скрипт (я назвал его global.js, но вы можете использовать все, что вы хотите. Если я не ошибаюсь это и jQuery должны быть только необходимые скрипты на заданной странице. Имейте в виду, что это в значительной степени непроверено за пределами некоторого базового использования, поэтому могут быть или не быть какие-либо проблемы с тем, как я это сделал; используйте на свой страх и риск yadda yadda я не несу ответственности, если вы что-то испортите yadda yadda:

/**
* @fileoverview This file stores global functions that are required by other libraries.
*/

if (typeof(jQuery) === 'undefined') {
    throw 'jQuery is required.';
}

/** Defines the base script directory that all .js files are assumed to be organized under. */
var BASE_DIR = 'js/';

/**
* Loads the specified file, outputting it to the <head> HTMLElement.
*
* This method mimics the use of using in C# or import in Java, allowing
* JavaScript files to "load" other JavaScript files that they depend on
* using a familiar syntax.
*
* This method assumes all scripts are under a directory at the root and will
* append the .js file extension automatically.
*
* @param {string} file A file path to load using C#/Java "dot" syntax.
*
* Example Usage:
* imports('core.utils.extensions');
* This will output: <script type="text/javascript" src="/js/core/utils/extensions.js"></script>
*/
function imports(file) {
    var fileName = file.substr(file.lastIndexOf('.') + 1, file.length);

    // Convert PascalCase name to underscore_separated_name
    var regex = new RegExp(/([A-Z])/g);
    if (regex.test(fileName)) {
        var separated = fileName.replace(regex, ",").replace(',', '');
        fileName = separated.replace(/[,]/g, '_');
    }

    // Remove the original JavaScript file name to replace with underscore version
    file = file.substr(0, file.lastIndexOf('.'));

    // Convert the dot syntax to directory syntax to actually load the file
    if (file.indexOf('.') > 0) {
        file = file.replace(/[.]/g, '/');
    }

    var src = BASE_DIR + file + '/' + fileName.toLowerCase() + '.js';
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = src;

    $('head').find('script:last').append(script);
}

лучше использовать jQuery