把数组变成函数，用jquery做一个javascript加载器

Question

我们如何从像这样的数组中创建一个函数

$.loader({
    js: [
        ['1.js','3.js','2.js'], 
        ['4.js'], 
        ['5.js'] 
    ]
}); 

做某事

$.when(
    $.getScript("1.js"),
    $.getScript('3.js'),
    $.getScript('2.js'))
    .then(
        function(){
            $.getScript('4.js').then(function(){
                $.getScript('5.js');
            })
        });

这是我目前正在做的事情

loader: function(arg){
    var js = arg;
    var phase = 0;
    for (var i = 0; i < o.length; i++) {
        console.log(o[i]);
        $.each(o[i], function(key,src) {
            //append javascript
        });
    };
}

问题是我不知道从哪里开始。 这就是我的想法

1. 我把它们分成几个阶段。
2. 设置阶段 0，它将运行第一个阵列，但我该怎么做？ $.getScript(src) 用于每个 src 剂量堆栈。或链。也许把它一个 var 刺痛？像string + = $.getScript(src). 所以它会像$.getScript("1.js").getScript("3.js").getScript("2.js") 直到有字符串数组，在这个例子中是3。然后在字符串前面附加$.when(，然后在字符串后面加上.then(function(){，直到它完成，然后以某种方式关闭字符串。
3. 好吧，我不知道（这里是 stackoverflow 上的帖子）

Answer 1

function lScripts(startAt){
for (var i = startAt; i < js.length; i++) {    
    if (js[i].constructor == Array){
        for (var j = 0; j < js[i].length; j++) {
            if(j==js[i].length){
                $.getScript('js[i][j]',function(){
                    lScripts(startAt+1);
                });
            }else{
                $.getScript('js[i][j]');
            }

        }

    }else{
         $.getScript('js[i]',function(){
            lScripts(startAt+1);
         });

    }
}
}

lScripts(0);

Answer 2

为了清楚起见，您是在谈论自己编写一个加载一堆脚本的解决方案吗？如果是这样，请不要自己做。站在别人的肩膀上。

RequireJS 已经完成了您的要求。 http://requirejs.org/

它甚至还有用于 jQuery 的文档。 http://requirejs.org/docs/jquery.html

其他人已经完成了艰苦的工作，编写并测试了一个好的产品。节省自己的时间和压力。

Answer 3

我希望这就是你的意思：http://jsfiddle.net/pimvdb/hdN3Q/1/。

(function($) {
    function load(files, index) {
        var arr = [];

        // fill arr with getScript requests (fake here)
        for(var i = 0; i < files[index].length; i++) {
            arr.push(console.log(files[index][i]));
        }

        // call $.when with arr as array of arguments (using apply)
        $.when.apply(null, arr).then(function() {
            if(index < files.length - 1) {
                // if we have to move to the next chunk,
                // load that next one
                setTimeout(function() {
                    // timeout is to show they get processed in chunks
                    load(files, index + 1);
                }, 1000);
            }
        });
    }

    $.loader = function(obj) {
        load(obj.js, 0);
    }
})(jQuery);

$.loader({
    js: [
        ['1.js','3.js','2.js'], 
        ['4.js'], 
        ['5.js'] 
    ]
});

---

.apply 本质上与调用函数的作用相同。但是，由于$.when 的参数数量因输入而异，因此您不能只调用$.when(...)，因为您没有固定数量的参数。使用可变数量的参数调用函数的方法是使用.apply。它的工作原理是这样的：

someFunction(1, 2, 3);

等于：

someFunction.apply(null, [1, 2, 3]);

（null 指的是此处超出范围的执行上下文。）这样做的好处是您可以构建任意大小的数组。因此，您可以通过这种方式使用任意数量的参数调用函数。

在load 函数中，arr 被getScript 函数填充，其工作方式相同：

var arr = [getScript('file1'), getScript('file2')];
$.when.apply(null, arr);

等于：

$.when(getScript('file1'), getScript('file2'));

在load 中，我们用一个块的文件填充arr，例如在您的情况下，第一个块是 1.js、3.js 和 2.js。这是使用for 循环完成的，但您最终得到的数组可以传递给.apply。

---

当所有文件都加载完毕后，.then 被调用。我们传递给那里的函数应该加载下一个块，但前提是 是 下一个块。如果有 3 个块，当 index 为 0 或 1 时，它应该转到下一个块。当块 2 完成时，没有下一个块，所以它不应该继续到下一个，因为没有下一个。

所以我们需要这个if 子句：

if(index < files.length - 1) {

说files.length 是3。那么这个if 条件只有在index 是0 或1 时才会通过，这就是我们想要的。