動態加載javascript文件時，如何讓文件順序執行

TwIStOy 發布于2019-08-02 14:06 / 810人閱讀

摘要：通過分析我覺得原因應該是這樣的雖然我是按數組中定義的順序去動態創建標簽去加載對應的文件，但是由于文件的大小以及網絡等因素，導致各個文件現在完成的次序并不完全等于請求的次序。

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

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);
});

但是在代碼執行的過程中，很高頻率的報同一個錯，大概的意思就是說：b.js在執行的時候引用的a.js中的方法不存在。錯誤出現的評率很高，但也不是100%出錯。
通過分析我覺得原因應該是這樣的：雖然我是按數組中定義的順序去動態創建script標簽去加載對應的js文件，但是由于文件的大小以及網絡等因素，導致各個文件現在完成的次序并不完全等于請求的次序。比如上面的例子中，如果a.js文件比較大，下載的比b.js慢，這樣當b.js下載完成并開始執行的時候，他所依賴的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調用或者回調嵌套，雖然最終解決了問題，但是有一個問題，文件從異步加載變成了同步加載，增加了的文件下載的時間，文件越多的時候影響越明顯。所以正確的思路應該是異步加載文件，但是執行一個文件的時候需要等到它所依賴的文件加載完畢并首先執行，對于這個問題，大家可以借鑒第三方庫如require.js, 或者es6中引入的模塊化功能完美解決這些問題。

GPU云服務器云服務器 javascript執行順序 javascript加載文件 javascript文件加載如何執行asp文件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/53577.html

動態加載javascript文件時，如何讓文件順序執行

摘要：通過分析我覺得原因應該是這樣的雖然我是按數組中定義的順序去動態創建標簽去加載對應的文件，但是由于文件的大小以及網絡等因素，導致各個文件現在完成的次序并不完全等于請求的次序。之前在寫js代碼時，想通過代碼動態向html中插入一定數量的js文件，文件的依賴關系已經按順序排好，關鍵代碼大致如下： var jsFiles = [somepath/a.js,somepath/b.js,...]...

Tangpj 2019-08-23 14:43 評論0 收藏0
動靜分離的數據并發加載策略

摘要：關于動靜分離的描述，這里推薦一篇不錯的博文網站靜態化處理動靜分離策略。這里的解決辦法則是采用的屬性，將其應用于數據請求相關的上，就可以達到腳本與數據并發加載的效果。作者：莫冠釗轉載請注明出處，保留原文鏈接和作者信息前言當今許多大型網頁應用尤其是SPA均采用了動靜分離的策略。關于動靜分離的描述，這里推薦一篇不錯的博文網站靜態化處理—動靜分離策略。本人是做前端的，之前有幸與一...

Object 2019-08-21 14:07 評論0 收藏0
動靜分離的數據并發加載策略

摘要：關于動靜分離的描述，這里推薦一篇不錯的博文網站靜態化處理動靜分離策略。這里的解決辦法則是采用的屬性，將其應用于數據請求相關的上，就可以達到腳本與數據并發加載的效果。作者：莫冠釗轉載請注明出處，保留原文鏈接和作者信息前言當今許多大型網頁應用尤其是SPA均采用了動靜分離的策略。關于動靜分離的描述，這里推薦一篇不錯的博文網站靜態化處理—動靜分離策略。本人是做前端的，之前有幸與一...

MrZONT 2019-08-06 13:17 評論0 收藏0
webpack配置

摘要：配置無入口的在輸出時的文件名稱。配置發布到線上資源的前綴，為類型。則是用于配置這個異步插入的標簽的值。配置以何種方式導出庫。是字符串的枚舉類型，支持以下配置。在為時，配置將沒有意義。是可選配置項，類型需要是其中一個。 webpack配置查看所有文檔頁面：全棧開發，獲取更多信息。原文鏈接：第2章配置，原文廣告模態框遮擋，閱讀體驗不好，所以整理成本文，方便查找。配置 Webpack...

Doyle 2019-08-22 17:27 評論0 收藏0