Включение файла .js в файл .js

Я хотел бы узнать, можно ли добавить файл .js в другой файл .js?

Причина, по которой я хочу сделать это, - это минимизировать количество клиентов. У меня есть несколько файлов .js, уже написанных с функциями, которые нужны клиенту. Клиент будет иметь html файл, который он/она управляет с помощью файла .js include (my .js file).

Я мог бы перезаписать новый .js файл со всеми функциями в нем или, чтобы избежать двойной работы, выяснить способ записи файла .js, который включает в себя другие файлы .js.

ОТВЕТЫ

Ответ 1

В основном я делаю это, создаю новый элемент и присоединяю его к <head>

var x = document.createElement('script');
x.src = 'http://example.com/test.js';
document.getElementsByTagName("head")[0].appendChild(x);

Вы также можете использовать событие onload для каждого прикрепленного вами script, но, пожалуйста, проверьте его, я не уверен, что он работает в кросс-браузере или нет.

x.onload=callback_function;

Ответ 2

Лучшим решением для времени загрузки вашего браузера будет использование серверной стороны script, чтобы объединить их все вместе в один большой файл .js. Убедитесь, что gzip/minify окончательная версия. Одиночный запрос - приятный и компактный.

В качестве альтернативы вы можете использовать DOM для создания тега <script> и установить для него свойство src, а затем добавить его в <head>. Если вам нужно дождаться загрузки этой функции, вы можете вывести остальную часть вашего javascript файла из события load в тег script.

Эта функция основана на функциональности jQuery $.getScript()

function loadScript(src, f) {
  var head = document.getElementsByTagName("head")[0];
  var script = document.createElement("script");
  script.src = src;
  var done = false;
  script.onload = script.onreadystatechange = function() { 
    // attach to both events for cross browser finish detection:
    if ( !done && (!this.readyState ||
      this.readyState == "loaded" || this.readyState == "complete") ) {
      done = true;
      if (typeof f == 'function') f();
      // cleans up a little memory:
      script.onload = script.onreadystatechange = null;
      head.removeChild(script);
    }
  };
  head.appendChild(script);
}

// example:
loadScript('/some-other-script.js', function() { 
   alert('finished loading');
   finishSetup();
 });

Ответ 3

Нет прямого способа сделать это.

Что вы можете сделать, это загрузить script по требованию. (опять-таки использует нечто похожее на то, что упоминал Игнасио, но гораздо чище).

Проверьте эту ссылку на несколько способов: http://ajaxpatterns.org/On-Demand_Javascript

Мой любимый (не всегда применимо):

<script src="dojo.js" type="text/javascript">
dojo.require("dojo.aDojoPackage");

Закрытие Google также обеспечивает аналогичную функциональность.

Ответ 4

Популярным методом решения проблемы сокращения ссылок JavaScript из файлов HTML является использование инструмента конкатенации, такого как Sprockets, который препроцессов и объединяет исходные файлы JavaScript вместе.

Помимо сокращения количества ссылок из файлов HTML, это также уменьшит количество обращений к серверу.

Затем вы можете запустить результирующую конкатенацию с помощью инструмента миниатюры, такого как jsmin, чтобы он был уменьшен.

Ответ 5

Я использую метод @gnarf, хотя я возвращаюсь к document.writeln тегу <script> для IE < 7, поскольку я не мог заставить создание DOM работать надежно в IE6 (и TBH не заботился о том, чтобы поставить много усилий в нее). Ядро моего кода:

  if (horus.script.broken) {
    document.writeln('<script type="text/javascript" src="'+script+'"></script>');   
    horus.script.loaded(script);
  } else {
    var s=document.createElement('script');
    s.type='text/javascript';
    s.src=script;
    s.async=true;

    if (horus.brokenDOM)
      s.onreadystatechange=
        function () {
          if (this.readyState=='loaded' || this.readyState=='complete')
            horus.script.loaded(script);

        };

    else
      s.onload=function () { horus.script.loaded(script) };

    document.head.appendChild(s);
  }

где horus.script.loaded() отмечает, что загружен файл javascript, и вызывает любые ожидающие невостребованные подпрограммы (сохраненные кодом автозагрузки).