«Include в JavaScript» или (а)синхронная загрузка кода из файла

Классической считается загрузка JavaScript кода посредством тега script в обычных приложениях на JavaScript. Но… что делать, если скрипты требуется подгружать динамически? Тут вариантов несколько:

1. Воспользоваться возможностями HTML и «добавить» в новый элемент с тегом script:

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

… или…

    var loadedJS = document.createElement('script');     loadedJS.src = "myScript.js";     loadedJS.type = "text/javascript";     loadedJS.language = "javascript";     var head = document.getElementsByTagName('head')[0];     head.appendChild(loadedJS); 

… или…

 var head = document.getElementsByTagName('head')[0];  head.innerHTML+= '<script type="text/javascript" src="myScript.js"></script>'; 

2. Воспользоваться <iframe src=«loadJS.html#myScript.js», внутри которого уже подгрузим JS в зависимости от хэша и выполним его.

3. Воспользоваться AJAX.

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

Создадим объект js с одним свойством «root», обозначающим путь к папке со скриптами:

js= {root : ''}; 

После этого добавим объекту свойство — modules, являющееся объектом, хранящим состояния подгруженных скриптов:

js.modules = {}; 

Теперь опишем функцию самой подгрузки скрипта и выполнения его:

js.include= function(_path) {  // На тот случай, если файл в подпапке  var _id= _path.replace(/\//g, '');   // Если скрипт уже подгружен, выходим  if (js.modules[_id]) return;  // Открываем доступ через AJAX  var reader = new XMLHttpRequest();    // Настраиваем синхронный метод подгрузки  reader.open('GET', js.root+_path+'.js', false);  // Отсылаем запрос на получение файла   reader.send(null);  // Запоминаем исходный код файла  var sourceCode= reader.responseText;  // Устанавливаем флаг "загружен" для соответствующего модуля  js.loaded(_id);   // Выполняем подгруженный код  eval(sourceCode);  } 

Так же допишем функцию «loaded»:

js.loaded= function(_id) {  js.modules[_id]= true;  } 

Теперь в любом месте программы можно вызвать

 js.include('myScript.js');  

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

Благодаря «массиву» loaded скрипты, при циклической зависимости не будут «вешать» систему, так как каждый скрипт выполнится лишь единожды за время жизни страницы.

Также вы можете прописать js.loaded() в любом файле, который подгружаете через , чтобы он не выполнялся через include.

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

ссылка на оригинал статьи http://habrahabr.ru/post/265939/