55 Вопрос: Как включить файл JavaScript в другой файл JavaScript?

вопрос создан в Tue, Oct 17, 2017 12:00 AM

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

    
4678
  1. 2009-06-04 12: 01: 11Z
  2. @ Даниэль, я не хочу использовать вызов AJAX.
    2009-06-04 12: 02: 12Z
  3. Почему бы не объявить импортированный файл раньше, чем тот, который требует этого, просто используя упорядоченные теги script?
    2015-01-06 21: 07: 48Z
  4. @ Claudiu Это не помогло бы импортировать что-либо, но это также должно работать. Если у вас есть JS-файл, который зависит от другого JS-файла, просто сначала объявите теги сценария для файлов зависимостей, чтобы позднее у них уже были загружены зависимости. Если у вас возникла ситуация, когда такой подход невозможен, ответы здесь должны быть полезны.
    2016-02-19 12: 29: 41Z
  5. в чем практическое преимущество этого? в любом случае кодовая база, зависящая от файла JavaScript, не будет загружаться и начинать работать, в любом случае она не загружается!
    2017-01-21 10: 52: 25Z
30 ответов                              30                         

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

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

Для совместимости со старыми браузерами build и /или транспорта .

Модули ES6

Модули ECMAScript (ES6) поддерживаются в Node.js начиная с версии 8.5 с флагом --experimental-modules. Все задействованные файлы должны иметь расширение .mjs.

 
// module.mjs
export function hello() {
  return "Hello";
}
 
// main.mjs
import { hello } from 'module'; // or './module'
let val = hello();  // val is "Hello";

Модули ECMAScript в браузерах

Браузеры поддерживают загрузку модулей ECMAScript напрямую (не требуется никаких инструментов, таких как Webpack) с тех пор Safari 10.1, Chrome 61, Firefox 60 и Edge 16. Проверьте текущую поддержку на caniuse . р>  

<script type="module">
  import { hello } from './hello.mjs';
  hello('world');
</script>
 
// hello.mjs
export function hello(text) {
  const div = document.createElement('div');
  div.textContent = `Hello ${text}`;
  document.body.appendChild(div);
}

Подробнее на https://jakearchibald.com/2017/es-modules- в-браузеров /

Динамический импорт в браузерах

Динамический импорт позволяет скрипту загружать другие скрипты по мере необходимости:

 
<script type="module">
  import('hello.mjs').then(module => {
      module.hello('world');
    });
</script>

Подробнее читайте на https://developers.google.com/web /обновление /2017/11 /динамический импорт

Node.js требуется

Старый стиль импорта модулей, все еще широко используемый в Node.js, это module.exports /require система.

 
// mymodule.js
module.exports = {
   hello: function() {
      return "Hello";
   }
}
 
// server.js
const myModule = require('./mymodule');
let val = myModule.hello(); // val is "Hello"   

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

Загрузка AJAX

Вы можете загрузить дополнительный скрипт с помощью вызова AJAX, а затем использовать eval для его запуска. Это самый простой способ, но он ограничен вашим доменом из-за модели безопасности песочницы JavaScript. Использование eval также открывает путь к ошибкам, взломам и проблемам безопасности.

Загрузка данных

Как и в случае динамического импорта, вы можете загрузить один или несколько сценариев с помощью вызова fetch, используя обещания для управления порядком выполнения зависимостей сценариев, используя Библиотека Fetch Inject :

 
fetchInject([
  'https://cdn.jsdelivr.net/momentjs/2.17.1/moment.min.js'
]).then(() => {
  console.log(`Finish in less than ${moment().endOf('year').fromNow(true)}`)
})

Загрузка jQuery

Библиотека jQuery обеспечивает загрузку в одну строку :

 
$.getScript("my_lovely_script.js", function() {
   alert("Script loaded but not necessarily executed.");
});

Динамическая загрузка скриптов

Вы можете добавить тег HTML с URL-адресом скрипта в HTML. Чтобы избежать накладных расходов jQuery, это идеальное решение.

Скрипт может даже находиться на другом сервере. Кроме того, браузер оценивает код. Тег <script> можно вставить в веб-страницу <head> или вставить непосредственно перед закрывающим тегом </body>.

Вот пример того, как это может работать:

 
function dynamicallyLoadScript(url) {
    var script = document.createElement("script");  // create a script DOM node
    script.src = url;  // set its src to the provided URL

    document.head.appendChild(script);  // add it to the end of the head section of the page (could change 'head' to 'body' to add it to the end of the body section instead)
}

Эта функция добавит новый тег <script> в конец раздела заголовка страницы, где для атрибута src задан URL-адрес, который присвоен функции в качестве первого параметра.

Оба эти решения обсуждаются и иллюстрируются в JavaScript-безумии: динамическая загрузка скриптов . р>

Обнаружение, когда скрипт был выполнен

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

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

Например: my_lovely_script.js содержит MySuperObject:

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

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

document.body.appendChild(js);

var s = new MySuperObject();

Error : MySuperObject is undefined

Затем перезагрузите страницу, нажав F5 . И это работает! Смешение ...

Так что с этим делать?

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

 
function loadScript(url, callback)
{
    // Adding the script tag to the head as suggested before
    var head = document.head;
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;

    // Then bind the event to the callback function.
    // There are several events for cross browser compatibility.
    script.onreadystatechange = callback;
    script.onload = callback;

    // Fire the loading
    head.appendChild(script);
}

Затем вы пишете код, который хотите использовать ПОСЛЕ того, как скрипт загружается в лямбда-функцию

 
var myPrettyCode = function() {
   // Here, do whatever you want
};

Затем вы запустите все это:

 
loadScript("my_lovely_script.js", myPrettyCode);

Обратите внимание, что сценарий может выполняться после загрузки DOM или ранее, в зависимости от браузера и от того, включена ли строка script.async = false;. Существует отличная статья о загрузке Javascript в целом , в которой это обсуждается.

Слияние исходного кода /предварительная обработка

Как упоминалось в верхней части этого ответа, многие разработчики используют в своих проектах инструменты сборки /переноса, такие как Parcel, Webpack или Babel, что позволяет им использовать предстоящий синтаксис JavaScript, обеспечивать обратную совместимость для старых браузеров, объединять файлы , минимизировать, выполнять разбиение кода и т. д.

    

4056
2019-01-13 17: 13: 20Z
  1. Нет, но кто-то, кто использует что-то такое продвинутое, как Rhino, иначе не задаст этот вопрос.
    2010-07-15 03: 53: 21Z
  2. Просто для завершения есть третий способ: в некоторых решениях, когда вы управляете обоими файлами javascript, вы можете просто создать 1 гигантский файл javascript, который объединяет содержимое обоих файлы.
    2012-09-07 08: 36: 00Z
  3. Не должен "document.createElement (" my_lovely_script.js ");" в этом примере будет "document.createElement (" script ")"?
    2012-12-14 23: 28: 54Z
  4. Как eval открывает дверь для хаков, если вы выполняете ваш код?
    2013-01-06 09: 39: 09Z
  5. Ваш ответ требует некоторой модификации для IE (событие onreadystatechange и свойство readyState). Кроме того, динамическая загрузка скриптов не приносит пользыпредустановленные сканеры. Порекомендуйте эту статью HTML5Rocks: html5rocks.com/en/tutorials/speed/script- загрузка
    2015-04-29 08: 32: 21Z

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

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

Пример: р>

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

некоторые-dependency.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
});

creation.js - это ваш "основной" файл JavaScript, который зависит от some-dependency.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.

     

...

    
541
2013-09-28 13: 11: 26Z
  1. Что такое d1 и d2 в some-dependency.js?
    2014-02-05 03: 28: 52Z
  2. @ aaaidan: причина MattDmo, плюс она опирается на внешнюю библиотеку, которая в свою очередь полагается на принятый ответ.
    2014-03-20 21: 28: 06Z
  3. Для преодоления require.js самым последним из них будет angular js, который является более стабильным и простым в использовании наряду с другими связующими и богатыми функциями HTML.
    2014-11-17 20: 00: 40Z
  4. - 1: эти абстракции - "some_dependency" - действительно плохие, с индексами, добавляющими путаницу. Я изо всех сил пытаюсь понять, как выглядит пример рабочего кода. Если автор предоставит рабочий пример, почти любой сможет адаптировать и обобщить его для своих нужд.
    2014-11-17 23: 38: 10Z
  5. плохо работает с MVC и связыванием скриптов с автоматической минимизацией
    2015-12-02 14: 24: 17Z

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

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

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

Однако этот метод также имеет проблему: если в импортированном файле JavaScript возникает ошибка, Firebug (а также консоль ошибок Firefox и инструменты разработчика Chrome ) сообщит о своем месте неправильно, что является большой проблемой, если вы используете Firebug для отслеживания ошибок JavaScript (я делаю). Firebug по какой-то причине просто не знает о недавно загруженном файле, поэтому, если в этом файле возникает ошибка, он сообщает, что она произошла в вашем основном 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-sat).

    
177
2018-03-21 04: 29: 29Z
  1. Я пытаюсь использовать этот метод, но он не работает для меня, элемент просто не отображается в теге head.
    2013-03-12 15: 24: 40Z
  2. @ juanpastas - используйте jQuery.getScript Таким образом, вам не нужно беспокоиться о написании плагина ...
    2013-06-01 17: 44: 30Z
  3. Хм, в соответствии с в этой статье добавление элемента script к head приведет к его асинхронной работе, если только для async не установлено значение false.
    2015-06-18 15: 36: 07Z
  4. Разве в переменной сценария не должны быть закодированы html-объекты? Если ссылка содержит ", код сломается
    2017-08-31 13: 55: 18Z
  5. @ Флимм, дорогой сэр, я и моя команда благодарны за ваш комментарий, и я лично должен выпить вам даже денег, если мы встретимся лично
    2019-01-18 09: 50: 45Z

Другой способ, который, на мой взгляд, намного чище, - это сделать синхронный Ajax-запрос вместо использования тега <script>. Именно это и включает Node.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(); 
    
141
2013-09-28 12: 55: 50Z
  1. Хорошее решение, к сожалению, заголовок include является асинхронным, решение ajax работает.
    2011-11-25 09: 21: 49Z
  2. Как уже упоминалось, requirejs.org делает это, а также имеет прекомпилятор, который объединяет js-файлы, чтобы они быстрее загружались. Вы можете проверить это.
    2012-01-09 06: 57: 37Z
  3. Обнаружено, что я могу отладить его, добавив эту директиву внизу файла для Chrome: //@ sourceURL = view_index.js
    2013-04-11 00: 02: 09Z
  4. к сожалению, async: false теперь не поддерживается в jQuery. Может сломаться в будущем, поэтому я бы избегал.
    2013-10-17 01: 45: 50Z
  5. @ katsh Здесь мы не используем объекты jqXHR. Похоже, ваша цитата не поддерживает ваш предыдущий комментарий о том, что async: false предположительно устарела. Это не! Как говорится в вашей цитате, только материал, связанный с jqXHR.
    2015-04-27 16: 50: 40Z

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

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

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

См .:

91
2014-10-19 18: 05: 37Z
  1. требовать /импортировать в jsfile было слишком долго в будущем. (ИМО).
    2013-04-10 16: 12: 04Z
  2. @ rwheadon да, кажется ужасающим, что это не часть языка! То, как люди делают что-либо, - вне меня! Я новичок в этом, и это кажется худшим (из многих) кусочков безумия
    2014-02-07 12: 04: 37Z
  3. @ jonny-leeds Даже без встроенной загрузки модулей JavaScript в браузере достаточно гибок, чтобы мы могли реализовать такую ​​библиотеку, как RequireJS, для управления нашими модулями.
    2014-05-02 15: 06: 13Z
  4. середина 2015 г. - до сих пор не реализовано ни в одном браузере, developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
    2015-07-02 16: 14: 33Z
  5. да, вы правы. теперь я начинаю чувствовать себя плохо из-за этого :(. Однажды реализованный во всех браузерах, это будет отличная функция, встроенная в javascript.
    2015-07-07 11: 01: 01Z

Можно динамически генерировать тег 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");
    
82
2013-09-28 12: 44: 30Z
  1. Он работает, но имеет серьезные проблемы из-за асинхронной загрузки.
    2009-06-04 12: 11: 12Z
  2. Хм ... что именно?
    2009-06-04 12: 14: 31Z
  3. @ e-sat - На самом деле, это преимущество, сценарий синхронизации будет блокировать. Лошади для курсов, но 9 раз из 10 вам нужен неблокирующий вариант.
    2009-06-04 12: 15: 11Z
  4. @ Svitlana - элементы сценария, созданные таким образом, являются асинхронными. В настоящее время это можно рассматривать как использование лазейки, так что это не может быть доказательством на будущее, я не видел ничего в каком-либо стандарте, который бы это разъяснил.
    2009-06-04 12: 16: 48Z
  5. @ e-suc асинхронный - это хорошо, потому что он не замораживает вашу страницу. Используйте обратный вызов, чтобы получить уведомление, когда это будет сделано js.onload = callback;
    2013-08-23 15: 40: 56Z

Заявление 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;
    
63
2016-12-11 09: 47: 07Z
  1. ... но на сегодняшний день не поддерживается ни одним браузером в соответствии с таблицей совместимости на странице, на которую вы ссылались.
    2015-04-22 20: 34: 42Z
  2. Теперь вы можете написать код ES6 и скомпилировать его с помощью Babel.js ( babeljs .io ) к любой предпочитаемой вами текущей модульной системе (CommonJS /AMD /UMD): babeljs.io/docs/usage/modules
    2015-06-12 20: 35: 13Z
  3. @ Zero3 Видимо, новый IE (Edge) является единственным
    2016-06-25 23: 36: 21Z

Может быть, вы можете использовать эту функцию, которую я нашел на этой странице Как мне включить файл 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)
}
    
53
2014-11-15 17: 01: 22Z
  1. Может быть полезно добавить script.onload = callback;
    2013-08-23 15: 37: 34Z
  2. @ SvitlanaMaksymchuk, поэтому, если я не использую var, переменная будет глобальной?
    2014-03-18 15: 22: 56Z
  3. @ FranciscoCorrales yes.
    2014-05-21 10: 03: 39Z
  4. Это заканчивается в глобальном с или без var:)
    2015-01-16 08: 27: 44Z
  5. 2015-07-08 02: 50: 19Z

Вот синхронная версия без 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 в своем ответе.

    
47
2015-06-18 14: 44: 10Z
  1. Отличная функция! Загружает JavaScript прежде, чем любой дополнительный JS будет написан после тела. Очень важно при загрузке нескольких скриптов.
    2014-02-28 21: 50: 39Z
  2. @ heinob: Что я могу сделать, чтобы он работал для междоменных доменов? (загрузка скрипта из http://web.archive.org/web/20140905044059/http://www.howtocreate.co.uk/operaStuff/userjs/aagmfunctions.js)
    2014-09-14 02: 20: 49Z
  3. @ user2284570: Если вы являетесь владельцем чужого домена: установите заголовок `allow-origin 'в ответе сервера. Если вы не владелец: ничего. Сожалею! Это перекрестная политика происхождения.
    2014-09-14 05: 42: 57Z
  4. @ user2284570: Я так понимаю, что ваш комментарий означает, что вы не являетесь владельцем домена, из которого вы хотите загрузить скрипт. В этом случае вы можете загружать скрипт только через вставленный тег <script> не через XMLHttpRequest.
    2014-09-14 16: 10: 58Z
  5. Для тех, кто планирует использовать это в Firefox (скажем, для сценариев imacros), добавьте эту строку в начало файла: const XMLHttpRequest = Components.Constructor("@mozilla.org/xmlextras/xmlhttprequest;1");
    2016-03-16 00: 16: 29Z

Я только что написал этот код 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>

Gist: http://gist.github.com/284442 .

    
43
2017-06-25 21: 04: 40Z
  1. jrburke написал это как RequireJS. Github: requirejs.org/docs/requirements.html
    2011-09-14 17: 14: 26Z
  2. Разве это не помещает загруженный скрипт за пределы области, где вызывается require ()? Похоже, что eval () - единственный способ сделать это в рамках видимости. Или есть другой способ?
    2014-03-31 03: 35: 26Z

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

р>

 
<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- случай-из-добавления-а-скрипт-элемент /. р>     

37
2015-07-08 02: 48: 05Z
  1. Чертовски приятно! Некоторые из методов здесь также работают, но при динамической настройке это работает лучше всего.
    2016-07-13 15: 51: 34Z

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

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

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

 
$.getScript("another_script.js");
    
32
2018-03-30 21: 20: 07Z
  1. не будет document.write удалить все остальное?
    2014-01-14 00: 53: 51Z

Вы также можете собрать свои сценарии, используя PHP :

Файл 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
    
25
2013-09-28 12: 50: 11Z
  1. Похоже, смысл в том, чтобы сохранить все это в javascript во внешнем интерфейсе
    2011-09-08 18: 23: 28Z
  2. Спасибо за напоминание об этом. Вы также можете написать PHP < script > теги в вашем HTML-заголовке, чтобы загружать нужные вам js-файлы (и только те).
    2013-12-18 12: 38: 45Z

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

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

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

ЦСИ /main.js

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

ЦСИ /Форма /вход /Tel.js

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

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

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

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

построить /main.js

 
var foo = function() {
    return {
          prop: "",
          method: function(){}
    }
};
    
24
2014-10-19 18: 13: 46Z
  1. С этого поста я нашел гораздо лучшее решение - компилятор модуля CommonJS - github.com/dsheiko/cjsc Таким образом, вы можете просто писать модули CommonJs или NodeJs и получать доступ друг к другу, сохраняя их в изолированных областях. Преимущества: нет необходимости в нескольких HTTP-запросах, которые влияют на производительность. Вам не нужно вручную оборачивать свой код модуля - это ответственность компилятора (таким образом, улучшается читаемость исходного кода). Вам не нужны внешние библиотеки. Он совместим с UMD- и модули NodeJs (например, вы можете обращаться к jQuery, Backbone как к модулям, не касаясь их кода)
    2014-03-07 16: 07: 24Z

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

global.js

 
A = {};

file1.js

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

file2.js

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

main.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>
    
20
2016-12-11 09: 42: 00Z

Это должно сделать:

 
xhr = new XMLHttpRequest();
xhr.open("GET", "/soap/ajax/11.0/connection.js", false);
xhr.send();
eval(xhr.responseText);
    
18
2014-11-02 13: 50: 20Z
  1. eval, что с ним не так. Из Крокфорда : «eval - зло. Функция eval - самая часто используемая функция JavaScript. Избегайте т. eval имеет псевдонимы. Не используйте конструктор Function. Не передавайте строки в setTimeout или setInterval. " Если вы еще не читали его «JavaScript: Хорошие части», то выходите и делайте это прямо сейчас. Вы не будете об этом сожалеть.
    2013-06-01 17: 56: 21Z
  2. @ MattDMo "Кто-то сказал, что это плохо", не правдаЛули аргумент.
    2014-09-03 19: 05: 36Z
  3. @ emodendroket Я так понимаю, вы не знаете, кто Дуглас Крокфорд есть.
    2014-09-03 19: 24: 54Z
  4. @ MattDMo Я полностью знаю, кто он, но он человек, а не бог.
    2014-09-03 19: 52: 38Z
  5. @ tggagne: Что я могу сделать, чтобы он работал для междоменных доменов? (загрузка скрипта из http://web.archive.org/web/20140905044059/http://www.howtocreate.co.uk/operaStuff/userjs/aagmfunctions.js)
    2014-09-14 02: 18: 24Z

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

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

Смотрите также:

17
2014-10-19 18: 02: 51Z
  1. Browserify гораздо популярнее чем звездочки.
    2015-07-08 02: 52: 06Z

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

Мне пришлось использовать переменную (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>

Файл: myvariables.js

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

Файл: main.js

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

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

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

    
14
2016-12-11 09: 45: 11Z
  1. Проблема с этим ответом состоит в том, что это не что-то вроде import. Вам нужен файл HTML, чтобы получить материал из одного файла js в другой.
    2017-02-02 23: 34: 27Z

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

Из документации Mixture на .mix файлов:

  

Файлы микширования - это просто файлы .js или .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";

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

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

ОБНОВЛЕНИЕ : смесь теперь бесплатна (в автономном режиме).

ОБНОВЛЕНИЕ : микширование теперь прекращено. Старые выпуски смесей по-прежнему доступны

    
12
2017-12-17 11: 53: 48Z
  1. Это было бы замечательно, если бы это был модуль узла.
    2015-04-19 19: 07: 32Z
  2. @ b01 Звучит как вызов;) Если бы только у меня было время ... может быть, кто-то еще?
    2016-04-06 10: 05: 59Z
 
var js = document.createElement("script");

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

document.body.appendChild(js);
    
11
2012-08-22 06: 44: 32Z
  1. Это самый простой код, но он будет не удается в некоторых крайних случаях, когда body еще не существует или не может быть изменен. Кроме того, это помогает объяснить ответы.
    2015-07-08 02: 54: 31Z

Я написал простой модуль, который автоматизирует работу по импорту /включению скриптов модуля в JavaScript. Подробное описание кода см. В сообщении в блоге JavaScript требуют /импортируют /включают модули .

 
// ----- 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);
};
    
11
2014-10-19 18: 26: 26Z

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

 
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 (один из других ответов), но, похоже, он мне не подходит.

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

    
11
2017-08-26 17: 02: 15Z

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

 
function loadJs( url ){
  return new Promise( resolve => {
    const script = document.createElement( "script" );
    script.src = url;
    script.onload = resolve;
    document.head.appendChild( script );
  });
}
    
10
2017-07-20 15: 15: 02Z
  1. Отлично. Хорошее решение.
    2017-07-20 18: 25: 32Z
  2. Краткий и требует только ES5 и элегантно избегает формального обратного вызова. Спасибо, Дмитрий!
    2017-10-02 07: 08: 11Z
  3. Ух, работает в браузере без сервера. pi.js = просто var pi = 3.14. вызвать функцию loadJS () через loadJs("pi.js").then(function(){ console.log(pi); });
    2017-11-07 02: 43: 48Z

Этот скрипт добавит файл 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);
})();
    
9
2014-10-19 18: 14: 07Z

Существует также Head.js . Это очень легко иметь дело с

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

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

9
2014-10-19 18: 18: 01Z

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

  1. Настройте файл с именем «plugins.js» (или extensions.js или что у вас есть). Храните файлы плагинов вместе с этим одним основным файлом.

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

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

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

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

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

    
9
2018-03-30 21: 21: 29Z
  1. @ будет, ваше решение выглядит намного чище, чем мое, и я беспокоюсь, что у меня могут возникнуть некоторые ошибки, если я использую мое, так как оно использует .append (). Таким образом, чтобы использовать это, вы можете просто вызвать эту функцию один раз для каждого файла плагина, который вы хотите включить?
    2011-12-01 05: 55: 18Z

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

Проблема с $.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 и обеспечивать порядок загрузки зависимостей.

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

ПРИМЕЧАНИЕ. Вы должны использовать это только во время загрузки страницы, в противном случае вы получите пустой экран. Другими словами, всегда размещайте это перед /за пределами document.ready . Я не проверял использование этого после загрузки страницы в событии щелчка или чем-то подобном, но я почти уверен, что это не удастся.

Мне понравилась идея расширения 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"
});
    
8
2018-03-30 21: 22: 17Z
  1. Это именно то, что говорится в текущем принятом ответе: просто недостаточно.
    2017-02-02 23: 31: 40Z
  2. Основное отличие состоит в том, что если отсутствует зависимость, она добавит тег сценария для зависимости, затем также добавит тег сценария для вызывающего файла и выдаст ошибка, которая останавливает выполнение. Это приводит к тому, что сценарии обрабатываются и запускаются в правильном порядке, и устраняет необходимость в обратных вызовах. Таким образом, зависимый сценарий будет загружен и выполнен перед вызывающим сценарием, поддерживая вложение.
    2017-02-17 00: 19: 54Z
  3. Что касается «похоже, что текущая тенденция заключается в отказе от синхронных запросов», то это верно только потому, что многие разработчики неправильно использовали их и заставляли пользователей без необходимости ждать. Однако, если запрос является естественно синхронным, как оператор Include, тогда простой синхронный Ajax вполне подойдет. Я создал общую функцию расширения JavaScript, которая синхронно выполняет функции, такие как чтение файла, не являющегося частью JavaScript, путем запуска PHP-файла «server», и нашел его очень полезным при написании приложений с использованием JavaScript. Для такого Ajax локальный веб-сервер не нужен.
    2018-12-06 19: 38: 08Z

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

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

/**
* @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, ",$1").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);
}
    
7
2014-10-18 21: 45: 38Z
источник размещен Вот