如何使用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

答案是

您可以将promise与一起使用，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

});

jsfiddle

ANOTHER FIDDLE

在上面的代码中，添加Deferred并将其解析在内部$()就像将其他任何函数放在jQuery调用中一样$(func)，就像，

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

也就是说，它等待DOM准备就绪，因此在上面的示例中$.when，由于调用在DOMready回调中解析，因此等待所有脚本加载以及$.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
});