實現(xiàn)javascript文件動態(tài)加載時是順序執(zhí)行的方法

這篇文章將為大家詳細講解有關實現(xiàn)javascript文件動態(tài)加載時是順序執(zhí)行的方法，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

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

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%出錯。

通過分析我覺得原因應該是這樣的： 雖然我是按數(shù)組中定義的順序去動態(tài)創(chuàng)建script標簽去加載對應的js文件，但是由于文件的大小以及網(wǎng)絡等因素，導致各個文件現(xiàn)在完成的次序并不完全等于請求的次序。比如上面的例子中，如果a.js文件比較大，下載的比b.js慢，這樣當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);
    });
}

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

關于實現(xiàn)javascript文件動態(tài)加載時是順序執(zhí)行的方法就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。