Js include и Js require
Здравствуйте, уважаемые читатели блога LifeExample,
в данной статье речь пойдет о подключении отдельного js файла прямо в
коде исполняемого JavaScript. Другими словами, сегодня мы разберемся,
как сделать js include, и в каких ситуациях это может потребоваться.
По умолчанию язык программирования JavaScript не имеет схожей с PHP функции include или require,
но это легко исправить. Также можно сделать аналог PHP функции
include_once для JavaScript, напомню, что разница между include и
include_once в том, что include подключает файл столько раз сколько он
был вызван, а include_once только единожды.
При программировании на PHP встречаются задачи, для решения, которых
не имеет значение выбранный вариант подключения, но в одностраничных
приложениях на Javascript, include в чистом виде лучше не использовать.
Я имею в виду, что подключать дополнительный скрипт следует только
один раз, дабы не наплодить кучу лишних обработчиков, и не тратить
время на выяснение проблемы: "почему клик по элементу срабатывает два
раза?".
Способы эмулирования js include и js require
Самое простое решение это использовать библиотеку jQuery и встроенный метод getScript()
1
| $.getScript('my.Include.js'); |
Плюсы этого метода в его тривиальности, одна строчка и файл
подключен. Такой вариант подойдет, когда надо подключить, например,
какой-то плагин, который не был объявлен в секции &lq;head&rq ,
но использование getScript() не всегда подходит, поскольку указанный файл будет выполнен только после завершения скрипта, из которого он вызван.
Если нет надобности в подключении jQuery, то getScript() можно заменить аналогом include на чистом javascript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| function include(src, callback)
{
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
if(callback)
{
var userAgent = navigator.userAgent.toLowerCase();
if(/msie/.test( userAgent ) && !/opera/.test( userAgent ))
{
script.onreadystatechange = function()
{
if(script.readyState == 'complete')
callback();
}
}
else
{
script.onload = function ()
{
callback();
}
}
}
script.src = src;
head.appendChild(script);
} |
Данный метод также как и getScript() добавит файл и выполнит его после загрузки всей страницы.
Как быть когда нужен моментальный include JS
Необходимость подключить скрипт на горячую может понадобиться при работе с модулями (псевдо классами javascript).
Т.е. при подключении класса необходимо сразу его инициализировать,
запустив конструктор, и впоследствии уже работать с его свойствами и
методами прямо в текущем коде.
Логика решения проста:
- В теле скрипта, в который надо заинклюдить модуль делаем AJAX запрос на сервер для получения js файла с классом;
- Полученный текст файла прогоняем через встроенную в JS функцию eval().
Использование eval() совершенно безопасно,
если вы уверены в том, что полученный скрипт не вредоносен, но в случае
работы со своим сервером это не грозит.
Реализация js require
Реализовать js require и js include очень просто. Ajax запрос можно сделать на чистом javacsript, об я рассказывал в статье "примеры Ajax", но я предпочитаю более прозрачный и привычный многим способ выполнения AJAX запросов средствами библиотеки jQuery.
И так, встречайте, то к чему мы так долго шли на протяжении данной
статьи. Подключение JS внутри выполняемого кода с моментальным
выполнением подключенного скрипта.
1
2
3
4
5
6
7
8
| $.ajax({
url: path,
dataType: "html",
async: false,
success: function(js){
eval(js);
}
}); |
Данным кусочком кода можно оперативно подключить скрипт и он выполнится внутри, обрабатывающей ответ, success функции.
Этот код можно упростить и использовать подключение других скриптов таким образом:
1
2
3
4
5
| $.ajax({
url: path,
dataType: "script",
async: false,
}); |
В этом случае указав тип ответа – dataType: "script”, полученный код будет выполнен автоматически без ручного использования eval().
Аналог include_once в JS
С простым require и include в javascript
разобрались, теперь давайте исключим повторное подключение скриптов,
тем самым реализуем аналог , знакомой нам с PHP функции include_once.
Чтобы реализовать include_once в JS нам потребуется ввести реестровую
переменную, подойдет обычный массив, которая будет хранить в себе
подключенные ранее пути файлов.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| /**
* подключает javascript файл и выполняет его
* заносит название файла в реестр подключенных,
* дабы не дублировать
*/
var javascripts = [];
function includeJS (path) {
//alert('пробуем подключить'+path);
for (var i=0; i<javascripts.length; i++) {
if(path == javascripts[i]){
// alert('JavaScript: ['+path+'] уже был подключен ранее!');
return false;
}
}
javascripts.push(path);
$.ajax({
url: path,
dataType: "script",// при типе script, JS сам инклюдится и воспроизводится
async: false
});
} |
В этом примере реализации include_once на javascript используется массив javascripts , функция includeJS()
включает в себя разработанный нами ранее способ подключения файлов, но
с одним дополнением. Перед подключением происходит проверка на наличие
данного файла в реестре. Если реестр не содержит подобной записи, то
скрипт подключается и пополняет собой массив подключенных скриптов, тем
самым, исключая повторное подключение и дублирование кода.
Использовать данную функцию следует таким образом:
Как видите сама реализация js include и js include_once, а также require и require_once
оказалась намного проще, чем могло показаться изначально.
Подписывайтесь на рассылку блога, т.к. скоро выйдет очень полезная
статья о работе с датами в MySql.
| 