動態加載 js

jubincn 發布于2019-08-21 17:32 / 3017人閱讀

摘要：由于報表只有部分模塊用到，所以想使用動態加載方式。常用的動態加載有兩種。這里介紹動態創建標簽的方法。不說了，直接上代碼上面是動態加載的方法。當同時打開這些模塊時，有可能會導致多次加載。所以可以把加載后的模塊根據路徑緩存起來。

前端項目中使用到了一個報表庫 Plotly.js, 這個庫有 600多k。由于報表只有部分模塊用到，所以想使用動態加載方式。

首先想到使用 webpack 的懶加載，但是打包時間太長。加這個庫之前 30秒，加之后 6 分鐘。使用 noParse 也沒有效果。

所以決定用到時，手動加載。

js 常用的動態加載有兩種。ajax 加載后使用 eval 執行。或者使用 script 標簽加載。

這里介紹動態創建標簽的方法。不說了，直接上代碼:

// Attach handlers for all browsers


var loadScript = function (path, callback) {
    const me = this;
    const script = document.createElement("script");
    script.type = "text/javascript";
    let done = false;
    const head = document.head;
    const error = () => {
        if (!done) {
            done = true;
            script.onload = script.onreadystatechange = script.onerror = null;
            head.removeChild(script);
            callback(false);
        }
    }
    const success = () => {
        if (!done) {
            done = true;
            script.onload = script.onreadystatechange = script.onerror = null;
            head.removeChild(script);
            callback(true);
        }
    }
    script.onreadystatechange = function () {
        if (this.readyState == "loaded" || this.readyState == "complete") {
            success();
        }
    };
    script.onload = success;
    script.onerror = error;
    script.src = path;
    head.appendChild(script);
}

上面是動態加載 js 的方法。但是可能多個模塊會用到這個 js 庫。當同時打開這些模塊時，有可能會導致多次加載。所以可以把加載后的模塊根據路徑緩存起來。

下面代碼是使用 TypeScript 寫的, 根據路徑記錄 js 文件加載信息，避免重復:

export default class LoadJs {

    public static loadSync(path: string): Promise {
        const me = this;
        return new Promise((resolve, reject) => {
            me.load(path, (bSuc) => {
                if (bSuc) {
                    resolve();
                } else {
                    reject();
                }
            });
        });
    }

    public static load(path: string, callback: (bSuc: boolean) => void): void {
        let lib = this.pathLoaded[path];
        // 沒有記錄，添加記錄
        if (!lib) {
            lib = {
                isLoaded: false,
                callback: [callback],
            };
            this.pathLoaded[path] = lib;
        }
        // 已加載直接返回
        if (lib.isLoaded) {
            callback(true);
        } else {
            // 添加回調
            lib.callback.push(callback);
            // 加載
            const me = this;
            this.loadScript(path, suc => {
                if (suc) {
                    me.onLoad(lib, true);
                } else {
                    me.onLoad(lib, false);
                }
            })
        }
    }

    private static loadScript(path, callback) {
        const me = this;
        const script = document.createElement("script") as any;
        script.type = "text/javascript";
        let done = false;
        const head = document.head;
        const error = () => {
            if (!done) {
                done = true;
                script.onload = script.onreadystatechange = script.onerror = null;
                head.removeChild(script);
                callback(false);
            }
        }
        const success = () => {
            if (!done) {
                done = true;
                script.onload = script.onreadystatechange = script.onerror = null;
                head.removeChild(script);
                callback(true);
            }
        }
        script.onreadystatechange = function () {
            if (this.readyState == "loaded" || this.readyState == "complete") {
                success();
            }
        };
        script.onload = success;
        script.onerror = error;
        script.src = path;
        head.appendChild(script);
    }
    private static pathLoaded: { [key: string]: PathLoading } = {};
    private static onLoad(p: PathLoading, isSuc: boolean): void {
        p.isLoaded = true;
        for (const fun of p.callback) {
            fun(isSuc);
        }
        p.callback = [];
    }
}

interface PathLoading {
    isLoaded: boolean;
    callback: Array<(f: boolean) => void>;
}

GPU云服務器云服務器動態加載js js 動態加載視頻 js 動態加載數據 js動態加載數據

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

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

js實用方法記錄-js動態加載css、js腳本文件

摘要：測試動態加載到標簽并執行回調方法調用加載成功動態加載腳本地址回調函數加載樣式站中下載打開方法測試頁面跳轉到微信中不能打開其他安卓手機嘗試調用未指定需要打開的可參考自定義協議參數轉換參考參數轉對象使用對象轉參數 js實用方法記錄-動態加載css/js 1.動態加載js文件到head標簽并執行回調方法調用：dynamicLoadJs(http://www.yimo.link/static/...

shusen 2019-08-23 13:10 評論0 收藏0
js實用方法記錄-js動態加載css、js腳本文件

摘要：測試動態加載到標簽并執行回調方法調用加載成功動態加載腳本地址回調函數加載樣式站中下載打開方法測試頁面跳轉到微信中不能打開其他安卓手機嘗試調用未指定需要打開的可參考自定義協議參數轉換參考參數轉對象使用對象轉參數 js實用方法記錄-動態加載css/js 1.動態加載js文件到head標簽并執行回調方法調用：dynamicLoadJs(http://www.yimo.link/static/...

Dogee 2019-08-02 11:59 評論0 收藏0
js實用方法記錄-js動態加載css、js腳本文件

摘要：測試動態加載到標簽并執行回調方法調用加載成功動態加載腳本地址回調函數加載樣式站中下載打開方法測試頁面跳轉到微信中不能打開其他安卓手機嘗試調用未指定需要打開的可參考自定義協議參數轉換參考參數轉對象使用對象轉參數 js實用方法記錄-動態加載css/js 1.動態加載js文件到head標簽并執行回調方法調用：dynamicLoadJs(http://www.yimo.link/static/...

sanyang 2019-08-29 17:14 評論0 收藏0
原生JS動態加載JS、CSS文件及代碼腳本

摘要：屬性共中狀態初始狀態加載中加載完成已加載并可與用戶交互，但還需要加載圖片等其他資源全部資源加載完成文檔加載順序解析結構加載外部腳本和樣式表文件解析并執行腳本樹構建完成加載外部資源文件圖片等頁面加載完成動態加載公共方法動態加載外部文件，并執行 DOM readyState屬性共5中狀態 uninitialized：初始狀態 loading：document加載中 loaded: ...

you_De 2019-08-22 18:50 評論0 收藏0
原生JS動態加載JS、CSS文件及代碼腳本

摘要：屬性共中狀態初始狀態加載中加載完成已加載并可與用戶交互，但還需要加載圖片等其他資源全部資源加載完成文檔加載順序解析結構加載外部腳本和樣式表文件解析并執行腳本樹構建完成加載外部資源文件圖片等頁面加載完成動態加載公共方法動態加載外部文件，并執行 DOM readyState屬性共5中狀態 uninitialized：初始狀態 loading：document加載中 loaded: ...

yagami 2019-08-30 15:54 評論0 收藏0