關于CommonJS、AMD、CMD、UMD說明

harryhappy 發布于2019-08-20 10:15 / 1815人閱讀

摘要：函數有兩個參數，第一個參數是當前運行時環境，第二個參數是模塊的定義體。在執行規范時，會優先判斷是當前環境是否支持環境，然后再檢驗是否支持環境，否則認為當前環境為瀏覽器環境

CommonJS規范

CommonJS定義的模塊分為3部分:

require 模塊引用

exports 模塊導出

module 模塊本身

根據CommonJS規范，一個多帶帶的文件就是一個模塊。每一個模塊都是一個多帶帶的作用域，也就是說，在一個文件定義的變量（還包括函數和類），都是私有的，對其他文件是不可見的

// a.js

var a = {
    "a":a,
    "b":b
}

module.export = a //模塊導出

// b.js
var b = require("./a.js") //模塊引入

CommonJS 加載模塊是同步的，所以只有加載完成才能執行后面的操作

AMD(Asynchromous Module Definition)規范

AMD 加載模塊是異步的

define(id?, dependencies?, factory);

id: 模塊標識，可以省略。
dependencies: 所依賴的模塊，可以省略。
factory: 模塊的實現，或者一個JavaScript對象。

   //a.js 只有factory
   define(function() {
       return {
           mix: function(source, target) {
               ...
            }
        };
    });
    
    //b.js 依賴a.js
    define(["a"], function(a) {
        return {
            show: function() {
               ...
            }
        }
    });
    
    //c.js 依賴a.js b.js
    define(["a", "b"], function(a, b) {
        ....
    });
    
    //d.js 對象模塊
    define({
        data1: [],
        data2: []
    });

AMD規范允許輸出模塊兼容CommonJS規范，這時define方法如下：

    define(function (require, exports, module) {
        var reqModule = require("./a.js");
        requModule.mix();
        
        exports.asplode = function () {
            ...
        }
    });

CMD(Common Module Definition)規范

CMD和AMD的區別有以下幾點:

對于依賴的模塊AMD是提前執行，CMD是延遲執行。不過RequireJS從2.0開始，也改成可以延遲執行(根據寫法不同，處理方式不通過)

CMD推崇依賴就近，AMD推崇依賴前置

    //AMD寫法
    define(["./a","./b"], function (a, b) {
        //依賴一開始就寫好
        a.mix();
        b.show();
    });
    
    //CMD寫法
    define(function (requie, exports, module) {
        //依賴可以就近書寫
        var a = require("./a");
        a.mix();
        
        if (...) {
            var b = requie("./b");
            b.show();
        }
    });

UMD(Universal Module Definition)規范

(function (root, factory) {
    if (typeof define === "function" && define.amd) {
        // AMD
        define(["jquery"], factory);
    } else if (typeof exports === "object") {
        // Node, CommonJS-like
        module.exports = factory(require("jquery"));
    } else {
        // Browser globals (root is window)
        root.returnExports = factory(root.jQuery);
    }
}(this, function ($) {
    //    methods
    function myFunc(){};

    //    exposed public method
    return myFunc;
}));

應用UMD規范的js文件其實就是一個立即執行函數。函數有兩個參數，第一個參數是當前運行時環境，第二個參數是模塊的定義體。在執行UMD規范時，會優先判斷是當前環境是否支持AMD環境，然后再檢驗是否支持CommonJS環境，否則認為當前環境為瀏覽器環境（ window ）

云服務器 GPU云服務器 amd_cmd區別關于云服務器續費的情況說明 CommonJS UMD

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

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

AMD, CMD, CommonJS和UMD

摘要：若不存在則模塊標識應該默認定義為在加載器中被請求腳本的標識。其中是一個數組，里面的成員就是要加載的模塊是模塊加載完成之后的回調函數。在加載與兩個模塊之后執行回調函數實現具體過程。在判斷是否支持是否存在，存在則使用方式加載模塊。我的github(PS:希望star): https://github.com/tonyzheng1... 今天由于項目中引入的echarts的文件太大，req...

KavenFan 2019-08-19 18:02 評論0 收藏0
JS常見模塊化規范(CommonJS/AMD/CMD/UMD/ES6 Module)

摘要：常見模塊化方案是由社區提出的模塊化方案中的一種，遵循了這套方案。是模塊化規范中的一種，遵循了這套規范。中的模塊化能力由兩個命令構成和，命令用于規定模塊的對外接口，命令用于輸入其他模塊提供的功能。為什么需要模塊化在ES6出現之前，JS語言本身并沒有提供模塊化能力，這為開發帶來了一些問題，其中最重要的兩個問題應當是全局污染和依賴管理混亂。 // file a.js var name =...

walterrwu 2019-08-23 12:32 評論0 收藏0
JS模塊化——CommonJS AMD CMD UMD ES6 Module 比較

摘要：即盡早地執行依賴模塊。阮一峰輸出值的引用模塊是動態關聯模塊中的值，輸出的是值得引用。的加載實現阮一峰運行時加載靜態編譯模塊是運行時加載，模塊是編譯時輸出接口。模塊化開發優點模塊化開發中，通常一個文件就是一個模塊，有自己的作用域，只向外暴露特定的變量和函數，并且可以按需加載。依賴自動加載，按需加載。提高代碼復用率，方便進行代碼的管理，使得代碼管理更加清晰、規范。減少了命名沖...

shadowbook 2019-08-26 13:40 評論0 收藏0
js中的模塊化——commonjs,AMD,CMD,UMD,ES6

摘要：若不存在則模塊標識應該默認定義為在加載器中被請求腳本的標識。這也是目前很多插件頭部的寫法，就是用來兼容各種不同模塊化的寫法。語句輸出的值是動態綁定的，綁定其所在的模塊。前言歷史上，js沒有模塊化的概念，不能把一個大工程分解成很多小模塊。這對于多人開發大型，復雜的項目形成了巨大的障礙，明顯降低了開發效率，java，Python有import，甚至連css都有@import,但是令人費...

qpal 2019-08-23 13:49 評論0 收藏0
JS模塊規范：AMD、UMD、CMD、commonJS、ES6 module

摘要：要想讓模塊再次運行，必須清除緩存。模塊加載會阻塞接下來代碼的執行，需要等到模塊加載完成才能繼續執行同步加載。環境服務器環境應用的模塊規范是參照實現的。這等同在每個模塊頭部，有一行這樣的命令。 commonJS 特點： 1、模塊可以多次加載，但是只會在第一次加載時運行一次，然后運行結果就被緩存了，以后再加載，就直接讀取緩存結果。要想讓模塊再次運行，必須清除緩存。2、模塊加載會阻塞接下來代...

_ang 2019-08-22 11:17 評論0 收藏0