我正在尝试将 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 文件。
先感谢您。
您可以使用 promisegetScript()并等待所有脚本加载完毕，例如：
$.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
});
在上面的代码中，添加一个 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
});
我实现了一个简单的函数来并行加载多个脚本：
function getScripts(scripts, callback) {
var progress = 0;
scripts.forEach(function(script) {
$.getScript(script, function () {
if (++progress == scripts.length) callback();
});
});
}
getScripts(["script1.js", "script2.js"], function () {
// do something...
});
在前一个的回调中加载后续所需的脚本，例如：
$.getScript('scripta.js', function()
{
$.getScript('scriptb.js', function()
{
// run script that depends on scripta.js and scriptb.js
});
});
有时需要按特定顺序加载脚本。例如 jQuery 必须在 jQuery UI 之前加载。此页面上的大多数示例并行（异步）加载脚本，这意味着无法保证执行顺序。如果没有排序，如果两者都成功加载但顺序错误y，则依赖的脚本x可能会中断。
我提出了一种混合方法，它允许顺序加载依赖脚本 + 可选的并行加载 +延迟对象：
/*
* loads scripts one-by-one using recursion
* returns jQuery.Deferred
*/
function loadScripts(scripts) {
var deferred = jQuery.Deferred();
function loadScript(i) {
if (i < scripts.length) {
jQuery.ajax({
url: scripts[i],
dataType: "script",
cache: true,
success: function() {
loadScript(i + 1);
}
});
} else {
deferred.resolve();
}
}
loadScript(0);
return deferred;
}
/*
* example using serial and parallel download together
*/
// queue #1 - jquery ui and jquery ui i18n files
var d1 = loadScripts([
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js",
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/i18n/jquery-ui-i18n.min.js"
]).done(function() {
jQuery("#datepicker1").datepicker(jQuery.datepicker.regional.fr);
});
// queue #2 - jquery cycle2 plugin and tile effect plugin
var d2 = loadScripts([
"https://cdn.rawgit.com/malsup/cycle2/2.1.6/build/jquery.cycle2.min.js",
"https://cdn.rawgit.com/malsup/cycle2/2.1.6/build/plugin/jquery.cycle2.tile.min.js"
]).done(function() {
jQuery("#slideshow1").cycle({
fx: "tileBlind",
log: false
});
});
// trigger a callback when all queues are complete
jQuery.when(d1, d2).done(function() {
console.log("All scripts loaded");
});@import url("https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/blitzer/jquery-ui.min.css");
#slideshow1 {
position: relative;
z-index: 1;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p><input id="datepicker1"></p>
<div id="slideshow1">
<img src="https://dummyimage.com/300x100/FC0/000">
<img src="https://dummyimage.com/300x100/0CF/000">
<img src="https://dummyimage.com/300x100/CF0/000">
</div>两个队列中的脚本将并行下载，但每个队列中的脚本将依次下载，确保有序执行。瀑布图：
使用yepnope.js或Modernizr（包括 yepnope.js as Modernizr.load）。
更新
只是为了跟进，这是您当前使用 yepnope 的一个很好的等价物，显示了对多个脚本的依赖关系：
yepnope({
load: ['script1.js', 'script2.js', 'script3.js'],
complete: function () {
// all the scripts have loaded, do whatever you want here
}
});