javascript - 如何使用 jQuery $.getScript() 方法包含多个 js 文件

Question

我正在尝试将 javascript 文件动态包含到我的 js 文件中。我对此做了一些研究，发现 jQuery $.getScript() 方法是一种理想的方法。

// jQuery
$.getScript('/path/to/imported/script.js', function()
{
    // script is now loaded and executed.
    // put your dependent JS here.
    // what if the JS code is dependent on multiple JS files? 
});

但是我想知道这种方法是否可以一次加载多个脚本？为什么我问这个是因为有时我的 javascript 文件依赖于多个 js 文件。

提前致谢。

Answer 1

答案是

您可以将 promises 与 getScript() 一起使用并等待所有脚本加载完毕，例如:

$.when(
    $.getScript( "/mypath/myscript1.js" ),
    $.getScript( "/mypath/myscript2.js" ),
    $.getScript( "/mypath/myscript3.js" ),
    $.Deferred(function( deferred ){
        $( deferred.resolve );
    })
).done(function(){
    
    //place your code here, the scripts are all loaded
    
});

FIDDLE

ANOTHER FIDDLE

在上面的代码中，添加一个 Deferred 并在 $() 中解析它就像在 jQuery 调用中放置任何其他函数，比如 $(func)，它是一样

$(function() { func(); });

即它等待 DOM 准备就绪，因此在上面的示例中 $.when 等待所有脚本加载 并且 DOM 准备就绪，因为 $.Deferred 调用，在 DOM 就绪回调中解析。

---

为了更通用，一个方便的函数

可以像这样创建一个接受任何脚本数组的实用函数:

$.getMultiScripts = function(arr, path) {
    var _arr = $.map(arr, function(scr) {
        return $.getScript( (path||"") + scr );
    });
        
    _arr.push($.Deferred(function( deferred ){
        $( deferred.resolve );
    }));
        
    return $.when.apply($, _arr);
}

可以这样使用

var script_arr = [
    'myscript1.js', 
    'myscript2.js', 
    'myscript3.js'
];

$.getMultiScripts(script_arr, '/mypath/').done(function() {
    // all scripts loaded
});

路径将被添加到所有脚本之前，并且也是可选的，这意味着如果数组包含完整的 URL，也可以这样做，并一起省略路径

$.getMultiScripts(script_arr).done(function() { ...

---

参数、错误等

顺便说一句，请注意，done 回调将包含许多与传入脚本相匹配的参数，每个参数代表一个包含响应的数组

$.getMultiScripts(script_arr).done(function(response1, response2, response3) { ...

其中每个数组将包含类似 [content_of_file_loaded, status, xhr_object] 的内容。 我们通常不需要访问这些参数，因为无论如何脚本都会自动加载，而且大多数时候 done 回调是我们真正想要知道所有脚本都已加载的全部内容，我只是为了完整性而添加它，并且在极少数情况下需要访问加载文件中的实际文本，或者需要访问每个 XHR 对象或类似的东西。

此外，如果任何脚本加载失败，将调用失败处理程序，并且不会加载后续脚本

$.getMultiScripts(script_arr).done(function() {
     // all done
}).fail(function(error) {
     // one or more scripts failed to load
}).always(function() {
     // always called, both on success and error
});