Только для читателей Lifeexample возможно открыть интернет-магазин на Moguta.CMS со скидкой в 15%
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() включает в себя разработанный нами ранее способ подключения файлов, но с одним дополнением. Перед подключением происходит проверка на наличие данного файла в реестре. Если реестр не содержит подобной записи, то скрипт подключается и пополняет собой массив подключенных скриптов, тем самым, исключая повторное подключение и дублирование кода.
Использовать данную функцию следует таким образом:
1 | includeJS('users.js'); |
Как видите сама реализация js include и js include_once, а также require и require_once оказалась намного проще, чем могло показаться изначально. Подписывайтесь на рассылку блога, т.к. скоро выйдет очень полезная статья о работе с датами в MySql.
Читайте также похожие статьи:
Чтобы не пропустить публикацию следующей статьи подписывайтесь на рассылку по E-mail или RSS ленту блога.
Комментарии
А что будет, если Аякс завершится ошибкой, получится что из за того что мы уже записали наш файл в массив функция не даст повторно подключить его, наверно было бы правильно поместить новую запись в массив после того как будет точно известно что новый скрипт загружен. То есть ajax({success:function() { javascripts.push(path) }); . вот…