从JavaScript同步导入JavaScript文件？ [英] Import JavaScript file from within JavaScript synchronously?

问题描述

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

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

因此，这似乎不是一个选择。如何从另一个JavaScript文件中同步加载JavaScript文件？

解决方案

您无法同步加载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小部件。 ：）

Instead of messing up my HTML file, I'd like to import my external JavaScript files through another JavaScript file, much like @import in css.

On several websites, including StackOverflow itself, I noticed that appending a script tag to the DOM can solve this issue; however, this is done asynchronuosly, while the order of my files is important - the second file for example may rely on the first file in the list. When, say, loading jQuery first and then loading a dependency (plugin etc.) of it, the dependency might finish loading earlier and will throw errors because jQuery doesn't exist yet.

Therefore, this does not seem to be an option. How can I synchronously load JavaScript files from within another JavaScript file?

解决方案

You cannot synchronously load JS files from within JS.

What you can do however, is implement a loader queue, something like this:

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();

In the above example, jQuery is loaded first, then jQuery UI, then the Twitter JS widget. :)

这篇关于从JavaScript同步导入JavaScript文件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！