Question

我目前正在尝试使用以下代码加载我的javascript文件

window.onload = function()
{
  var arr = new Array();
  arr[0] = "/js/main.js";
  arr[1] = "/js/jquery.expander.min.js";
  arr[2] = "/js/custom_expander.js";
  for (var i = 0; i < arr.length; i++)
  {
      var tag = document.createElement("script");
      tag.type = "text/javascript";
      tag.async = true;
      tag.src = arr[i];
      document.getElementsByTagName("head")[0].appendChild(tag);
  }
};

它运行良好但我的问题是我的第三个文件（custom_expander.js）取决于第二个（jquery.expander.min.js）。这就是为什么custom_expander.js顺便排在列表中的第三位。

但是，即使使用此代码，我也会出现以下错误

TypeError: $(...).expander is not a function

此错误在这里是因为我的custom_expander.js在jquery.expander.min.js完成加载之前加载。如下所示同步加载文件时，没有错误。

<script src="/js/main.js" type="text/javascript"></script>
<script src="/js/jquery.expander.min.js" type="text/javascript"></script>
<script src="/js/custom_expander.js" type="text/javascript"></script>

当我想异步加载jquery时，我遇到了完全相同的问题，我决定将它保留在我的标签中，但这不是解决方案。

如果文件之间存在依赖关系，我怎么能异步加载javascript文件？

Answer 1

正如我在上面的评论中发布的那样，如果你正在使用jQuery，你可以使用$.getScript()方法（jQuery Docs）

以下是一个示例（在jsfiddle处使用您自己的脚本尝试）：

var MyApp = {

    Scripts: {

        // put them with the correct order
        ToLoad: [
            '/path/to/script1.js',
            '/path/to/script2.js',
            '/path/to/script3.js'
        ],

        Loaded: 0

    },

    DoTheJob: function(){
        if( this.Scripts.ToLoad.length == this.Scripts.Loaded ) return;
        $.getScript(this.Scripts.ToLoad[this.Scripts.Loaded], function(){
            MyApp.Scripts.Loaded++;
            MyApp.DoTheJob();
        });
    }

};

// do it on ready (faster way)
$(function(){ 
    MyApp.DoTheJob();
});

// or do it on load
//window.onload = function(){ 
//    MyApp.DoTheJob();
//});

请记住，在加载所有脚本后，您可以使用处理程序对其进行改进。

Answer 2

我建议你使用RequireJs.It很酷。我想你会喜欢它。这并不困难

与依赖项异步加载javascript

2 个答案: