Добрый день всему хабрасообществу! Недавно мне выпало разрабатывать огромный веб-проект (точнее доделать), на котором была просто уйма Ajax. Проблема заключалась в том, что все яваскриптовые файлы грузились сразу. Тобиш, если б мне захотелось добавить ещё функционал — то это новый js-файл, который следует грузить пользователю (хотя возможно ему этот функционал может даже не потребоватся). Недавно прочтенная статья "Динамическая подгрузка модулей на Javascript" дала мне понять, что js можно подгружать динамически, поэтому я стал искать метод решения.
И вот какое решения нашел. Поскольку переписывать проект у меня не было не времени не желания, мне оставалось только найти быстрый способ как осуществить быструю подгрузку js-файлов по требованию. В Интернете я случайно наткнулся на такую библиотеку как JSAN (JavaScript Archive Network, не путайте с JSON). Разработчики данной библиотеки пытаются сделать аналог CPAN только для JavaScript.
Вот ссылка на источник.
Там все красиво описывается, но я объясню самое основное. JSAN предоставляет средства для динамической подгрузки кода, используя XMLHttpRequest к серверу. Библиотека содержится в одном js-файле, который и требуется подключить к странице. Дальше — проще. К примеру:
Cледующий ниже вызов JSAN.require постарается загрузить js/creating.js, пробуя искать во всех источниках, указанных в JSAN include_path, который по умолчанию равен ['.', 'lib']. И все!
Единственным требованием является, чтобы все модули находились внутри своего namespace, так для примера, приведенного выше, начало s/creating.js будет выглядеть примерно так:
Но я бы отнес это скорее к плюсу нежели к минусу, т.к это заставляет разработчика изолировать свои библиотеки от внешнего мира, тем самым сводя проблему конфликта имен практически к нулю. Кстати, помимо JSAN.require, существует также метод JSAN.use, который позволяет экспортировать только необходимый функционал из модуля, что как раз мне потребовалось. Первое что пришлось сделать, так это преобразовать вид старых функций с
в
поскольку только так функции подгружались. Дальше я просто добавил в шаблонах простую замену. Например есть функция itemsCreating в файле js/creating.js. По клику на обьект на странице она должна выполнятсяю Для этого вместо
заменял на
Теперь проект избавился от лишнего кода (и трафика для пользователей), и нужные js-файлы вызывались только когда их функционал требуется. Кстати, if(typeof itemsCreating != 'function') делает так, что повторный раз грузить уже этот js-файл не потребуется, поскольку функция itemsCreating уже будет определена (пока не перегрузите страницу ;). Ну вот вроди и все.
ЗЫ Моя первая статья на Хабре, поэтому критика не мало важна.
И вот какое решения нашел. Поскольку переписывать проект у меня не было не времени не желания, мне оставалось только найти быстрый способ как осуществить быструю подгрузку js-файлов по требованию. В Интернете я случайно наткнулся на такую библиотеку как JSAN (JavaScript Archive Network, не путайте с JSON). Разработчики данной библиотеки пытаются сделать аналог CPAN только для JavaScript.
Вот ссылка на источник.
Там все красиво описывается, но я объясню самое основное. JSAN предоставляет средства для динамической подгрузки кода, используя XMLHttpRequest к серверу. Библиотека содержится в одном js-файле, который и требуется подключить к странице. Дальше — проще. К примеру:
JSAN.require('js.creating');
var creating = new js.creating();
Cледующий ниже вызов JSAN.require постарается загрузить js/creating.js, пробуя искать во всех источниках, указанных в JSAN include_path, который по умолчанию равен ['.', 'lib']. И все!
Единственным требованием является, чтобы все модули находились внутри своего namespace, так для примера, приведенного выше, начало s/creating.js будет выглядеть примерно так:
if(js == undefined) var js = {};
if(js.creating == undefined) js.creating = {};
Но я бы отнес это скорее к плюсу нежели к минусу, т.к это заставляет разработчика изолировать свои библиотеки от внешнего мира, тем самым сводя проблему конфликта имен практически к нулю. Кстати, помимо JSAN.require, существует также метод JSAN.use, который позволяет экспортировать только необходимый функционал из модуля, что как раз мне потребовалось. Первое что пришлось сделать, так это преобразовать вид старых функций с
function foo(var1,var2){…
}
в
foo = function(var1,var2){…
}
поскольку только так функции подгружались. Дальше я просто добавил в шаблонах простую замену. Например есть функция itemsCreating в файле js/creating.js. По клику на обьект на странице она должна выполнятсяю Для этого вместо
onclick=«javascript: itemsCreating(this);
заменял на
onclick=»javascript:if(typeof itemsCreating != 'function') JSAN.use('js.creating'); itemsCreating(this);
Теперь проект избавился от лишнего кода (и трафика для пользователей), и нужные js-файлы вызывались только когда их функционал требуется. Кстати, if(typeof itemsCreating != 'function') делает так, что повторный раз грузить уже этот js-файл не потребуется, поскольку функция itemsCreating уже будет определена (пока не перегрузите страницу ;). Ну вот вроди и все.
ЗЫ Моя первая статья на Хабре, поэтому критика не мало важна.
