从 JavaScript 中同步导入 JavaScript 文件？

我不想弄乱我的 HTML 文件，而是想通过另一个 JavaScript 文件导入外部 JavaScript 文件，就像@import in css.

在几个网站上，包括 StackOverflow 本身，我注意到向 DOM 附加脚本标签可以解决这个问题；然而，这是异步完成的，而我的文件的顺序很重要 - 例如第二个文件可能依赖于列表中的第一个文件。例如，当首先加载 jQuery，然后加载它的依赖项（插件等）时，该依赖项可能会提前完成加载，并会抛出错误，因为 jQuery 尚不存在。

因此，这似乎不是一个选择。我怎么能够同步地从另一个 JavaScript 文件中加载 JavaScript 文件？

您无法从 JS 内部同步加载 JS 文件。

你什么can然而，要做的是实现一个加载队列，如下所示：

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 小部件。 :)