動(dòng)態(tài)加載 js

jubincn 發(fā)布于2019-08-21 17:32 / 3021人閱讀

摘要：由于報(bào)表只有部分模塊用到，所以想使用動(dòng)態(tài)加載方式。常用的動(dòng)態(tài)加載有兩種。這里介紹動(dòng)態(tài)創(chuàng)建標(biāo)簽的方法。不說(shuō)了，直接上代碼上面是動(dòng)態(tài)加載的方法。當(dāng)同時(shí)打開這些模塊時(shí)，有可能會(huì)導(dǎo)致多次加載。所以可以把加載后的模塊根據(jù)路徑緩存起來(lái)。

前端項(xiàng)目中使用到了一個(gè)報(bào)表庫(kù) Plotly.js, 這個(gè)庫(kù)有 600多k。由于報(bào)表只有部分模塊用到，所以想使用動(dòng)態(tài)加載方式。

首先想到使用 webpack 的懶加載，但是打包時(shí)間太長(zhǎng)。加這個(gè)庫(kù)之前 30秒，加之后 6 分鐘。使用 noParse 也沒有效果。

所以決定用到時(shí)，手動(dòng)加載。

js 常用的動(dòng)態(tài)加載有兩種。ajax 加載后使用 eval 執(zhí)行?；蛘?b>使用 script 標(biāo)簽加載。

這里介紹動(dòng)態(tài)創(chuàng)建標(biāo)簽的方法。不說(shuō)了，直接上代碼:

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

上面是動(dòng)態(tài)加載 js 的方法。但是可能多個(gè)模塊會(huì)用到這個(gè) js 庫(kù)。當(dāng)同時(shí)打開這些模塊時(shí)，有可能會(huì)導(dǎo)致多次加載。所以可以把加載后的模塊根據(jù)路徑緩存起來(lái)。

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

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 {
            // 添加回調(diào)
            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>;
}

云服務(wù)器 GPU云服務(wù)器動(dòng)態(tài)加載js js 動(dòng)態(tài)加載視頻 js 動(dòng)態(tài)加載數(shù)據(jù) js動(dòng)態(tài)加載數(shù)據(jù)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/89636.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

jubincn

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

#yyds干貨盤點(diǎn)#安全漏洞頻出，信息系統(tǒng)中安全防護(hù)如何有效構(gòu)建？

閱讀 3567·2021-11-22 15:11
測(cè)評(píng)racknerd雙11促銷款VPS，看看近期的racknerd到底如何

閱讀 4655·2021-11-18 13:15
如何閱讀《JavaScript高級(jí)程序設(shè)計(jì)》（一）

閱讀 2714·2019-08-29 14:08
symbol

閱讀 3588·2019-08-26 13:49
關(guān)于NaN

閱讀 3105·2019-08-26 12:17
awesome-typescript-loader報(bào)watchRun問題

閱讀 3298·2019-08-26 11:54
ES6 class繼承與super關(guān)鍵詞深入探索

閱讀 3122·2019-08-26 10:58
運(yùn)算符比較運(yùn)算符

閱讀 2041·2019-08-26 10:21

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

動(dòng)態(tài)加載 js

相關(guān)文章

js實(shí)用方法記錄-js動(dòng)態(tài)加載css、js腳本文件

js實(shí)用方法記錄-js動(dòng)態(tài)加載css、js腳本文件

js實(shí)用方法記錄-js動(dòng)態(tài)加載css、js腳本文件

原生JS動(dòng)態(tài)加載JS、CSS文件及代碼腳本

原生JS動(dòng)態(tài)加載JS、CSS文件及代碼腳本

發(fā)表評(píng)論

0條評(píng)論

jubincn

男|高級(jí)講師

TA的文章

#yyds干貨盤點(diǎn)#安全漏洞頻出，信息系統(tǒng)中安全防護(hù)如何有效構(gòu)建？

測(cè)評(píng)racknerd雙11促銷款VPS，看看近期的racknerd到底如何

如何閱讀《JavaScript高級(jí)程序設(shè)計(jì)》（一）

symbol

關(guān)于NaN

awesome-typescript-loader報(bào)watchRun問題

ES6 class繼承與super關(guān)鍵詞深入探索

運(yùn)算符比較運(yùn)算符

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

動(dòng)態(tài)加載 js

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！