javascript - 如何使用 javascript/jquery 加载资源 javascript 和 css 文件

Question

我正在处理的项目有很多 javascript 和 css 文件。我正在使用一个公司库，它通过使用类似这样的东西来处理资源文件的加载require("相对文件名").但是对于某些页面，我不想使用这个库，而是想使用普通的 jQuery。我不能使用脚本或样式标签来加载我的 javascript(因为我的内容在 iframe 中并且位于其他一些带有代理的页面中 - 所以所有 url 都在运行时计算)。我只能使用 jQuery 和 Javascript 来加载这些文件。

现在我知道我可以使用

$.getScript( <myFileURL>, function( data, textStatus, jqxhr ) {
                  console.log( "Load was performed." );
                  if(jqxhr.status = 200){
                      //call another resource file?
                  }               
            });

唯一的问题是启动如此多的异步调用来加载资源 javascript 文件似乎有点矫枉过正。除非加载所有资源文件，否则无法继续处理。是否有任何其他方法可以一次加载所有资源文件，然后仅在加载后才继续处理页面。

编辑:试过这个-

$.when($.getScript( <file1URL>),
               $.getScript( <file2URL>)).then(function(){
                customeFunction();// breakpoint here never gets hits.
          });

当我检查网络选项卡时 - 我可以看到文件已成功下载。但是 customFunction() 函数永远不会被调用。谢谢

Answer 1

$.getScript返回 promise object ，所以你可以这样做:

$.when($.getScript( "file1.js"),
       $.getScript( "file2.js"),
       $.getScript( "file3.js")).then(function(){
     //Your code.
});

请求将在不等待前一个完成的情况下启动。加载所有脚本后，将调用 then 处理程序。

或者如果你有一个文件名数组:

files = ["one.js", "two.js", "three.js"];
promises = $.map(files, function(file){
    return $.getScript(file.valueOf());
});
$.when.apply($, promises).then(function(){});