commonJs原理解析

Flands 發布于2019-08-23 11:56 / 1262人閱讀

摘要：同步加載先使用注冊文件路徑和對應方法之間的映射關系保存在中再使用方法，通過傳入的路徑去中取出對應的方法使用獲取方法的同時，會觸發依賴模塊中的方法，這樣就實現了模塊的加載異步加載異步加載異步加載的邏輯匜不復雜，在同步加載的

同步加載

先使用require.register注冊文件路徑和對應方法之間的映射關系保存在require.modules中

再使用require方法，通過傳入的路徑去require.modules中取出對應的方法

使用require獲取方法的同時，會觸發依賴模塊中的require方法，這樣就實現了模塊的加載

index.html





    
    
    
    Document

commonJS.js

function require(path) {
    let mod = require.modules[path];
    mod.exports = {};
    mod.call(window, require, mod, mod.exports);
    return mod.exports;
}

require.modules = {};

require.register = function (path, fn) {
    // 異步加載
    require.modules[path] = fn;
}

hello.js、name.js

//hello.js
require.register("hello.js", function (require, module, exports) {
    let name = require("name.js")
    exports.hello_name = "hello " + name;
    exports.hello_world = "hello world";
})
//name.js
require.register("name.js", function (require, module, exports) {
    module.exports = "shimingw"
})

異步加載

異步加載的邏輯匜不復雜，在同步加載的基礎上增加require.ensure方法，預先在modules對象上掛在onload方法

修改require.register方法，增加異步模塊注冊邏輯，在異步模塊注冊完成后觸發onload，以達到模塊異步加載的需求

commonJS_async.js

function require(path) {
    let mod = require.modules[path].method;
    mod.exports = {};
    mod.call(window, require, mod, mod.exports);
    return mod.exports;
}

require.modules = {};

require.register = function (path, fn) {
    // 異步加載
    if (require.modules[path] && require.modules[path].status === "loading") {
        // 異步加載成功
        require.modules[path].status = "loaded"
        require.modules[path].method = fn;
        require.modules[path].onload(require(path));
    } else {
        require.modules[path] = {
            moduleName: path, // 模塊Id
            status: "loaded",
            onload: null,
            method: fn
        };
    }
}

require.ensure = function (path, cb) {
    require.modules[path] = {
        moduleName: path, // 模塊Id
        status: "loading",
        onload: cb,
        method: null
    };
    var head = document.querySelector("head")
    var script = document.createElement("script");
    script.async = true;
    script.src = path;
    setTimeout(() => {
        head.appendChild(script);
    },5000 );
}

云服務器 GPU云服務器 CommonJS 運行原理解析 cdn解析原理 webrtc原理解析

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

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

最全的前端模塊化方案

摘要：模塊化主要是用來抽離公共代碼，隔離作用域，避免變量沖突等。將一個復雜的系統分解為多個模塊以方便編碼。順手寫一個省略省略實現此時的對應的形式解析省略執行兼容，模塊化語法。模塊化主要是用來抽離公共代碼，隔離作用域，避免變量沖突等。將一個復雜的系統分解為多個模塊以方便編碼。會講述以下內容 CommonJS AMD 及核心原理實現 CMD 及核心原理實現 UMD 及源碼解析 ES6...

antz 2019-08-23 17:07 評論0 收藏0
【Node】前后端模塊規范與模塊加載原理

摘要：例如指定一些依賴到模塊中實現規范的模塊化，感興趣的可以查看的文檔。 CommonJS 定義了 module、exports 和 require 模塊規范，Node.js 為了實現這個簡單的標準，從底層 C/C++ 內建模塊到 JavaScript 核心模塊，從路徑分析、文件定位到編譯執行，經歷了一系列復雜的過程。簡單的了解 Node 模塊的原理，有利于我們重新認識基于 Node 搭建的...

jsyzchen 2019-08-23 15:43 評論0 收藏0
解析 Webpack中import、require、按需加載的執行過程

摘要：但是瀏覽器是不識別這個關鍵詞的所以會對的代碼進行解釋首先給設定導出的值如果是會直接賦值給如果是其他形式則給的導出的設定一個該的返回值就是導出的結果而對于來說整個執行過程其實過程和是一樣的。最近由于一篇分享手淘過年項目中采用到的前端技術的影響,重新研究了一下項目中CSS的架構.本來打算寫一篇文章,但是寫到一半突然發現自己像在寫文檔介紹一樣,所以后來就放棄了。但是覺得過程中研究的 Web...

caozhijian 2019-08-22 15:14 評論0 收藏0
新鮮出爐的8月前端面試題

摘要：前言最近參加了幾場面試，積累了一些高頻面試題，我把面試題分為兩類，一種是基礎試題主要考察前端技基礎是否扎實，是否能夠將前端知識體系串聯。前言最近參加了幾場面試，積累了一些高頻面試題，我把面試題分為兩類，一種是基礎試題: 主要考察前端技基礎是否扎實，是否能夠將前端知識體系串聯。一種是開放式問題: 考察業務積累，是否有自己的思考，思考問題的方式，這類問題沒有標準答案。基礎題題目的答...

qingshanli1988 2019-08-23 10:47 評論0 收藏0
JavaScript模塊化發展

摘要：所有依賴這個模塊的語句，都定義在一個回調函數中，等到所有依賴加載完成之后前置依賴，這個回調函數才會運行。如果將前面的代碼改寫成形式，就是下面這樣定義了一個文件，該文件依賴模塊，當模塊加載完畢之后執行回調函數，這里并沒有暴露任何變量。模塊化是我們日常開發都要用到的基本技能，使用簡單且方便，但是很少人能說出來但是的原因及發展過程。現在通過對比不同時期的js的發展，將JavaScript模...

mengbo 2019-08-22 18:05 評論0 收藏0