將數組轉換為 function，使用 jquery 制作 javascript 加載器

Question

我們如何從 arrays 中制作 function

$.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，它將運行第一個數組，但我該怎么做？ 每個 src 劑量堆棧的$.getScript(src) 。 或鏈。 也許把它一個 var 刺痛？ 像string + = $.getScript(src). 所以它會像$.getScript("1.js").getScript("3.js").getScript("2.js")直到有 arrays 的字符串，在這個例子中是 3。 然后做類似 append $.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本質上與調用 function 的作用相同。 但是，由於 arguments 到$.when .when 的數量因輸入而異，因此您不能只調用$.when(...) ，因為您沒有固定數量的 arguments。 使用可變數量的 arguments 調用 function 的方法是使用.apply 。 它是這樣工作的：

someFunction(1, 2, 3);

等於：

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

（這里的null指的是 scope 之外的執行上下文。）這樣做的好處是您可以構建任意大小的數組。 因此，您可以通過這種方式使用任意可變數量的 arguments 調用 function。

在load function 中， 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 。 我們在那里傳遞的 function 應該加載下一個塊，但前提是存在下一個塊。 如果有 3 個塊，當index為0或1時，它應該 go 到下一個塊。 當塊2完成時，沒有下一個塊，所以它不應該繼續到下一個，因為沒有下一個。

所以我們需要這個if子句：

if(index < files.length - 1) {

說files.length是3 。 那么這個if條件只會在index為0或1時通過，這就是我們想要的。