簡(jiǎn)單實(shí)現(xiàn) JavaScript 模塊加載

tigerZH 發(fā)布于2019-08-22 18:13 / 1869人閱讀

摘要：語(yǔ)言官方未實(shí)現(xiàn)命名空間，我們定義一個(gè)函數(shù)以實(shí)現(xiàn)命名空間。函數(shù)的使用如我們可以這樣實(shí)現(xiàn)對(duì)象保存著所有已加載的模塊每一個(gè)模塊實(shí)例都有屬性作為時(shí)查找的標(biāo)識(shí)符，屬性作為對(duì)外暴露的對(duì)象，屬性表示是否加載完。將函數(shù)傳入，來(lái)支持模塊內(nèi)引用其他模塊。

JavaScript語(yǔ)言官方未實(shí)現(xiàn)命名空間，我們定義一個(gè)define函數(shù)以實(shí)現(xiàn)命名空間。define函數(shù)的使用如：

define(function(exports, module, require) {
    const $ = require("http://path/to/defined-jquery");
    $(function(){
        // dom ready!!!
    });
});

我們可以這樣實(shí)現(xiàn)：

(function(global) {
    "use strict";
    var errMsg = Math.random().toString(32).substr(2);
    // rootModule 對(duì)象保存著所有已加載的模塊
    var rootModule = {};

    // 每一個(gè)模塊實(shí)例都有id屬性作為require時(shí)查找的標(biāo)識(shí)符，
    // exports屬性作為對(duì)外暴露的對(duì)象，loaded屬性表示是否加載完。
    function ModuleCtor(id) {
        if (!this || this.__proto__ !== ModuleCtor.prototype) {
            return new ModuleCtor(id);
        }
        this.id = id;
        this.exports = {};
        this.loaded = !1;
    }

    function define(id, fn) {
        // 手動(dòng)賦值模塊id，兼容一個(gè)script里有多個(gè)define。
        if (typeof id === "function") {
            fn = id;
            id = document.currentScript
                ? document.currentScript.src
                : Math.random()
                      .toString(32)
                      .substr(2);
        }
        if (typeof id !== "string") {
            id = "" + id;
        }
        var module = ModuleCtor(id);
        exec();
        function __require__(src) {
            // 如果依賴已經(jīng)加載過(guò)直接返回module.exports，
            // 如果沒(méi)有加載過(guò)則通過(guò)jsonp加載，并且拋出一個(gè)異常來(lái)打斷原函數(shù)執(zhí)行，在子模塊加載完畢后重新執(zhí)行原函數(shù)模擬異步代碼阻塞同步執(zhí)行。
            if (rootModule[src] && rootModule[src].__proto__ === ModuleCtor.prototype) {
                return rootModule[src].exports;
            }
            loadScript(src, function() {
                exec();
            });
            throw new Error(errMsg);
        }
        function exec() {
            // 將__require__函數(shù)傳入fn，來(lái)支持模塊內(nèi)引用其他模塊。
            try {
                fn.call(module.exports, module.exports, module, __require__);
                module.loaded = !0;
                rootModule[id] = module;
            } catch (err) {
                if (err.message !== errMsg) {
                    throw err;
                }
            }
        }
    }

    function loadScript(src, callback) {
        var script = document.createElement("script");
        script.src = src;
        script.onload = function() {
            callback && callback(src);
        };
        document.body.appendChild(script);
        return script;
    }
    // 暴露define給全局
    global.define = define;
})(window);

這個(gè)模塊加載的實(shí)現(xiàn)有很多不足，如果模塊內(nèi)有很多require時(shí)會(huì)被執(zhí)行很多次，所以最好子模塊內(nèi)都是函數(shù)不要有自己的狀態(tài)。seajs的依賴解決方法是，調(diào)用函數(shù)的toString方法來(lái)獲得函數(shù)字面量，然后在parse出模塊依賴，先加載依賴，每一個(gè)依賴加載完成后都emit一個(gè)事件，當(dāng)所有依賴都加載完畢后，才執(zhí)行factory函數(shù)，factory函數(shù)只執(zhí)行一次，但是模塊加載的順序和require的順序基本沒(méi)有關(guān)系（并發(fā)請(qǐng)求，誰(shuí)都有可能先到）。

======= 一本正經(jīng)的分割線 ======
順便吐槽一下seajs，由于某種原因，我再8102年見(jiàn)到了seajs而我在3000年前沒(méi)用過(guò)。文檔始終沒(méi)有交代require("caonima");是如何打斷函數(shù)執(zhí)行的?？戳嗽创a發(fā)現(xiàn)是用了Function.prototype.toString方法，然后分析依賴并發(fā)加載（require函數(shù)是沒(méi)有順序之分的）?？丛创a前，我自己為了模擬該行為，通過(guò)拋出異常再反復(fù)的重新執(zhí)行也實(shí)現(xiàn)了一個(gè)文件加載，而且我這個(gè)更賤的貨還是真的同步引入依賴，更加cmd一些。

附 Webpack 模塊加載原理：

(function(modulesArr) {
    var rootModule = {};
    function __require__(id) {
        if (rootModule[id]) {
            return rootModule[id].exports;
        }
        var currentModule = modulesArr[id];
        var module = {
            id,
            exports: {}
        };
        currentModule.call(module.exports, module.exports, module, __require__);
        currentModule[id] = module;
        return module.exports;
    }
    return __require__(0);
})([
    function(exports, module, require) {
        var m1 = require(1);
        console.log(m1);
    },
    function(exports, module, require) {
        exports.msg = "Hello World";
        var m2 = require(2);
        m2();
    },
    function(exports, module, require) {
        module.exports = function() {
            var str = "Hello World";
            console.log(str);
            return str;
        };
    }
]);

云服務(wù)器 GPU云服務(wù)器未能加載模塊內(nèi)核模塊加載 python加載模塊 amd模塊加載

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

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

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

登陸后可評(píng)論

0條評(píng)論

tigerZH

男|高級(jí)講師

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

TA的文章

【C語(yǔ)言】超詳講解??指針是個(gè)什么針？（一次性搞定指針問(wèn)題）

閱讀 1423·2021-09-23 11:21
前端那些小眾而又精美的網(wǎng)站及工具

閱讀 3119·2019-08-30 14:14
canvas動(dòng)畫合集Vue組件

閱讀 3205·2019-08-30 13:56
vue transition 過(guò)渡動(dòng)畫從左向右進(jìn)入，從右向左進(jìn)入

閱讀 4156·2019-08-30 11:20
輸入 url 到頁(yè)面展現(xiàn)的短短幾秒內(nèi)瀏覽器究竟做了什么？

閱讀 1962·2019-08-29 17:23
采用20/80原則學(xué)習(xí) CSS Grid 布局

閱讀 2778·2019-08-29 16:14
玩兒前端——CSS垂直的那些事兒

閱讀 1708·2019-08-28 18:18
Promise學(xué)習(xí)筆記

閱讀 1499·2019-08-26 12:14

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

資訊專欄INFORMATION COLUMN

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

簡(jiǎn)單實(shí)現(xiàn) JavaScript 模塊加載

相關(guān)文章

【Node】前后端模塊規(guī)范與模塊加載原理

**前端性能優(yōu)化（三）——傳統(tǒng) JavaScript 優(yōu)化的誤區(qū)**

JavaScript模塊化編程探索

Node.js隨手筆記（一）：node簡(jiǎn)介與模塊系統(tǒng)

**淺談 JavaScript 模塊化編程**

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

0條評(píng)論

tigerZH

男|高級(jí)講師

TA的文章

【C語(yǔ)言】超詳講解??指針是個(gè)什么針？（一次性搞定指針問(wèn)題）

前端那些小眾而又精美的網(wǎng)站及工具

canvas動(dòng)畫合集Vue組件

vue transition 過(guò)渡動(dòng)畫從左向右進(jìn)入，從右向左進(jìn)入

輸入 url 到頁(yè)面展現(xiàn)的短短幾秒內(nèi)瀏覽器究竟做了什么？

采用20/80原則學(xué)習(xí) CSS Grid 布局

玩兒前端——CSS垂直的那些事兒

Promise學(xué)習(xí)筆記

最新活動(dòng)

資訊專欄INFORMATION COLUMN

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

簡(jiǎn)單實(shí)現(xiàn) JavaScript 模塊加載

相關(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)！