Импортировать файл JavaScript изнутри JavaScript синхронно?

Question

Вместо того, чтобы испортить мой HTML-файл, я хотел бы импортировать мои внешние файлы JavaScript через другой файл JavaScript, очень похожий на @import в css.

На нескольких веб-сайтах, включая сам StackOverflow, я заметил, что добавление тега сценария в DOM может решить эту проблему; однако это делается асинхронно, в то время как порядок моих файлов важен - например, второй файл может опираться на первый файл в списке. Когда, скажем, сначала загружается jQuery, а затем загружается его зависимость (плагин и т. Д.), Зависимость может закончиться раньше и вызовет ошибки, поскольку jQuery еще не существует.

Поэтому, похоже, это не вариант. Как я могу синхронно загрузить файлы JavaScript из другого файла JavaScript?

Answer 1

Нельзя синхронно загружать файлы JS из JS.

Однако, что вы можете сделать, это реализовать очередь загрузчика, что-то вроде этого:

function ScriptLoader(queue) {
   this.started = false;
   this.queue = queue || [];
   this.currentIndex = 0;
   var self = this;
   this.next = function() {
     if(self.currentIndex == self.queue.length) return;
     self.load(self.queue[self.currentIndex]);
     self.currentIndex++;
   };
   this.load = function(dest) {
      var s = document.createElement('script');
      s.src = dest;
      document.getElementsByTagName('head')[0].appendChild(s);
      s.onload = self.next;
      if('onreadystatechange' in s) {
        s.onreadystatechange = function () {
          if (this.readyState == 'complete') {
             self.next();
          }
        }
      }
   };
}

ScriptLoader.prototype.start = function() {
    if(!this.started) {
       this.next();
       this.started = true;
    }
};


var loader = new ScriptLoader(['https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js', 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js', 'http://widgets.twimg.com/j/2/widget.js']);
loader.start();

В приведенном выше примере сначала загружается jQuery, затем jQuery UI, затем виджет Twitter JS. :)

Answer 2

Посмотрите на RequireJS или LABjs для асинхронной загрузки скриптов. Я бы порекомендовал использовать одну из этих библиотек вместо собственной.