如何使用jQuery $ .getScript（）方法包含多个js文件

Question

如何使用jQuery $ .getScript（）方法包含多个js文件如何使用jQuery $ .getScript（）方法包含多个js文件

我试图动态地将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});小提琴ANOTHER FIDDLE在上面的代码中，添加一个Deferred并将其解析为内部$()就像在jQuery调用中放置任何其他函数一样$(func)，就像它一样$(function() { func(); });即它等待DOM准备就绪，因此在上面的例子中$.when等待加载所有脚本并且由于$.Deferred在DOM就绪回调中解析的调用而使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});

Answer 2

您可以尝试使用递归。这将一个接一个地同步下载它们，直到它完成下载整个列表。var queue = ['url/links/go/here'];ProcessScripts(function() { // All done do what ever you want}, 0);function ProcessScripts(cb, index) {     getScript(queue[index], function() {         index++;         if (index === queue.length) { // Reached the end             cb();         } else {             return ProcessScripts(cb, index);         }     });}function getScript(script, callback) {     $.getScript(script, function() {         callback();     });}

Answer 3

以下是使用Maciej Sawicki的答案并实现Promise回调：function loadScripts(urls, path) {     return new Promise(function(resolve) {         urls.forEach(function(src, i) {             let script = document.createElement('script');                     script.type = 'text/javascript';             script.src = (path || "") + src;             script.async = false;             // If last script, bind the callback event to resolve             if(i == urls.length-1) {                                     // Multiple binding for browser compatibility                 script.onreadystatechange = resolve;                 script.onload = resolve;             }             // Fire the loading             document.body.appendChild(script);         });     });}使用：let JSDependencies = ["jquery.js",                       "LibraryNeedingJquery.js",                       "ParametersNeedingLibrary.js"];loadScripts(JSDependencies,'JavaScript/').then(taskNeedingParameters);所有Javascript文件都会尽快下载并按给定顺序执行。然后taskNeedingParameters被叫。