如何使用 jQuery $.getScript() 方法包含多个 js 文件 [英] How to include multiple js files using jQuery $.getScript() method

问题描述

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

I am trying to dynamically include javascript files into my js file. I did some research about it and find jQuery $.getScript() method would be a desired way to go.

// 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 文件.

But I am wondering whether this method can load multiple scripts at one time? Why I am asking this is because sometimes my javascript file is depending on more than one js files.

先谢谢你.

推荐答案

答案是

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

The answer is

You can use promises with getScript() and wait until all the scripts are loaded, something like:

$.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

另一把小提琴

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

In the above code, adding a Deferred and resolving it inside $() is like placing any other function inside a jQuery call, like $(func), it's the same as

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

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

i.e. it waits for the DOM to be ready, so in the above example $.when waits for all the scripts to be loaded and for the DOM to be ready because of the $.Deferred call which resolves in the DOM ready callback.

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

A utility function that accepts any array of scripts could be created like this :

$.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 也可以这样做，并且一起省略路径

where the path will be prepended to all scripts, and is also optional, meaning that if the array contain the full URL's one could also do this, and leave out the path all together

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

---

参数、错误等

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

---

Arguments, errors etc.

As an aside, note that the done callback will contain a number of arguments matching the passed in scripts, each argument representing an array containing the response

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

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

where each array will contain something like [content_of_file_loaded, status, xhr_object]. We generally don't need to access those arguments as the scripts will be loaded automatically anyway, and most of the time the done callback is all we're really after to know that all scripts have been loaded, I'm just adding it for completeness, and for the rare occasions when the actual text from the loaded file needs to be accessed, or when one needs access to each XHR object or something similar.

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

Also, if any of the scripts fail to load, the fail handler will be called, and subsequent scripts will not be loaded

$.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
});

这篇关于如何使用 jQuery $.getScript() 方法包含多个 js 文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！