Блог Леопарда

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

Недавно мне выпало разрабатывать огромный веб-проект (точнее доделать), на котором была просто уйма Ajax. Проблема заключалась в том, что все яваскриптовые файлы грузились сразу. Тобиш, если б мне захотелось добавить ещё функционал – то это новый js-файл, который следует грузить пользователю (хотя возможно ему этот функционал может даже не потребоватся). Недавно прочтенная статья «Динамическая подгрузка модулей на Javascript» дала мне понять, что js можно подгружать динамически, поэтому я стал искать метод решения.

И вот какое решения нашел. Поскольку переписывать проект у меня не было не времени не желания, мне оставалось только найти быстрый способ как осуществить быструю подгрузку 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 уже будет определена (пока не перегрузите страницу . Ну вот вроди и все.

23. августа 2008 by Alexey Vasiliev
Categories: Ajax, javascript | Tags: Ajax, javascript | Один комментарий