動態(tài)加載javascript文件時，如何讓文件順序執(zhí)行

Tangpj 發(fā)布于2019-08-23 14:43 / 2498人閱讀

摘要：通過分析我覺得原因應(yīng)該是這樣的雖然我是按數(shù)組中定義的順序去動態(tài)創(chuàng)建標(biāo)簽去加載對應(yīng)的文件，但是由于文件的大小以及網(wǎng)絡(luò)等因素，導(dǎo)致各個文件現(xiàn)在完成的次序并不完全等于請求的次序。

之前在寫js代碼時，想通過代碼動態(tài)向html中插入一定數(shù)量的js文件，文件的依賴關(guān)系已經(jīng)按順序排好，關(guān)鍵代碼大致如下：

var jsFiles = ["somepath/a.js","somepath/b.js",...];
var head = document.head;
jsFiles.forEach((file) => {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = file;
    head.appendChild(script);
});

但是在代碼執(zhí)行的過程中，很高頻率的報同一個錯，大概的意思就是說：b.js在執(zhí)行的時候引用的a.js中的方法不存在。錯誤出現(xiàn)的評率很高，但也不是100%出錯。
通過分析我覺得原因應(yīng)該是這樣的：雖然我是按數(shù)組中定義的順序去動態(tài)創(chuàng)建script標(biāo)簽去加載對應(yīng)的js文件，但是由于文件的大小以及網(wǎng)絡(luò)等因素，導(dǎo)致各個文件現(xiàn)在完成的次序并不完全等于請求的次序。比如上面的例子中，如果a.js文件比較大，下載的比b.js慢，這樣當(dāng)b.js下載完成并開始執(zhí)行的時候，他所依賴的a.js中的變量或方法就會獲取不到。
想到的解決方法就是，等前一個文件加載完畢之后再去加載下一個文件，大致代碼如下：

function loadJsFiles(jsFiles) {
    return new Promise((resolve, reject) => {
        var load = function(i) {
            var file = jsFiles[i];
            var script = document.createElement("script");
            script.type = "text/javascript";
            script.onload = function() {
                i++;
                if(i === jsFiles.length) {
                    resolve();
                } else {
                     load(i);
                }
            }
            script.src = file;
            head.appendChild(script);
        };
        load(0);
    });
    
}

上面的方法也可以改為鏈?zhǔn)降腜romise調(diào)用或者回調(diào)嵌套，雖然最終解決了問題，但是有一個問題，文件從異步加載變成了同步加載，增加了的文件下載的時間，文件越多的時候影響越明顯。所以正確的思路應(yīng)該是異步加載文件，但是執(zhí)行一個文件的時候需要等到它所依賴的文件加載完畢并首先執(zhí)行，對于這個問題，大家可以借鑒第三方庫如require.js, 或者es6中引入的模塊化功能完美解決這些問題。