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

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

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

JavaScript語言官方未實(shí)現(xiàn)命名空間，我們定義一個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 對象保存著所有已加載的模塊
    var rootModule = {};

    // 每一個模塊實(shí)例都有id屬性作為require時查找的標(biāo)識符，
    // exports屬性作為對外暴露的對象，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) {
        // 手動賦值模塊id，兼容一個script里有多個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)加載過直接返回module.exports，
            // 如果沒有加載過則通過jsonp加載，并且拋出一個異常來打斷原函數(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，來支持模塊內(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);

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

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