Добро пожаловать на авторский блог Авдеева Марка.

Только для читателей Lifeexample возможно открыть интернет-магазин на Moguta.CMS со скидкой в 15%

<<< Javascript классы || History API, пример одностраничного приложения >>>

Js include и Js require

19.02.2013
js-include-i-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). Т.е. при подключении класса необходимо сразу его инициализировать, запустив конструктор, и впоследствии уже работать с его свойствами и методами прямо в текущем коде.

Логика решения проста:

  1. В теле скрипта, в который надо заинклюдить модуль делаем AJAX запрос на сервер для получения js файла с классом;
  2. Полученный текст файла прогоняем через встроенную в 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 ленту блога.

Нравится

Комментарии

  • john

    А что будет, если Аякс завершится ошибкой, получится что из за того что мы уже записали наш файл в массив функция не даст повторно подключить его, наверно было бы правильно поместить новую запись в массив после того как будет точно известно что новый скрипт загружен. То есть ajax({success:function() { javascripts.push(path) }); . вот…

  • Оставить комментарий

    Подписаться на комментарии к этой статье по RSS

    Размещение статей и контекстных ссылок
    Бесплатная CMS для вашего магазина
    Яндекс.Метрика