CommonJS, AMD, CMD是什么及區別--簡單易懂有實例


CommonJS, AMD, CMD都是JS模塊化的規范。

  CommonJS是服務器端js模塊化的規范,NodeJS是這種規范的實現。

  AMD(異步模塊定義)和CMD(通用模塊定義)都是瀏覽器端js模塊化的規范。RequireJS 遵循的是 AMD,SeaJS 遵循的是 CMD。

 

一、CommonJS

  根據CommonJS規范,一個單獨的文件就是一個模塊。加載模塊使用require方法,該方法讀取一個文件並執行,最后返回文件內部的exports對象。所以,定義一個模塊就是寫一個新的js文件,但是最后要將文件的內容exports出來。接下來我們看一下如何定義模塊和加載模塊。

復制代碼
//定義一個module.js文件
var A = function() {
    console.log('我是定義的模塊');
}
//導出這個模塊
//1.第一種返回方式 module.exports = A; 
//2.第二種返回方式 module.exports.test = A
//3.第三種返回方式 exports.test = A;
exports.test = A;



//再寫一個test.js文件,去調用剛才定義好的模塊,這兩個文件在同一個目錄下
var module = require("./module");  //加載這個模塊

//調用這個模塊,不同的返回方式用不同的方式調用
//1.第一種調用方式 module();
//2.第二種調用方式 module.test();
//3.第三種調用方式 module.test();
module.test();


//接下來我們去執行這個文件,前提是你本地要安裝node.js,不多說了,自己百度安裝。
//首先打開cmd, cd到這兩個文件所在的目錄下,執行: node test.js
node test.js
//輸出結果:我是定義的模塊
復制代碼

  當我們執行 node test.js 的時候,根據 var module = require("./module"); 會加載同一目錄下的module.js文件,並將這個文件的exports對象返回,賦值給module,所以我們調用 module.test(); 就相當於執行了module.js文件。

  以上就是CommonJS規范下的模塊定義與加載的形式。

  CommonJS 加載模塊是同步的,所以只有加載完成才能執行后面的操作。像Node.js主要用於服務器的編程,加載的模塊文件一般都已經存在本地硬盤,所以加載起來比較快,不用考慮異步加載的方式,所以CommonJS規范比較適用。但如果是瀏覽器環境,要從服務器加載模塊,這是就必須采用異步模式。所以就有了 AMD  CMD 解決方案。 

 

二、AMD(異步模塊定義)

  AMD規范通過define方法去定義模塊,通過require方法去加載模塊。RequireJS實現了這種規范。

  AMD只有一個接口:define(id?,dependencies?,factory); 它要在聲明模塊的時候制定所有的依賴(dep),並且還要當做形參傳到factory中。要是沒什么依賴,就定義簡單的模塊(或者叫獨立的模塊),下面我們看代碼實現:

復制代碼
//編寫一個module1.js文件
//定義獨立的模塊
define({
    methodA: function() {
        console.log('我是module1的methodA');    
    },
    methodB: function() {
        console.log('我是module1的methodB');    
    }
});



//編寫一個module2.js文件
//另一種定義獨立模塊的方式
define(function () {
    return {
        methodA: function() {
            console.log('我是module2的methodA');    
        },
        methodB: function() {
            console.log('我是module2的methodB');    
        }
    };
});



//編寫一個module3.js文件
//定義非獨立的模塊(這個模塊依賴其他模塊)
define(['module1', 'module2'], function(m1, m2) {
    return {
        methodC: function() {
            m1.methodA();
            m2.methodB();
        }
    };

});



//再定義一個main.js,去加載這些個模塊
require(['module3'], function(m3){
    m3.methodC();
});


//我們在一個html文件中去通過RequireJS加載這個main.js
//等號右邊的main指的main.js
<script data-main="main" src="require.js"></script>

//瀏覽器控制台輸出結果
我是module1的methodA
我是module2的methodB
復制代碼

  以上就是AMD規范的模塊定義和加載的形式,ReauireJS實現了這種規范。所以我們的例子也借助RequireJS去實現。

 

三、CMD(通用模塊定義)

  CMD是SeaJS 在推廣過程中對模塊定義的規范化產出。

  AMD和CMD的區別:

  1. 對於依賴的模塊,AMD 是提前執行,CMD 是延遲執行。不過 RequireJS 從 2.0 開始,也改成可以延遲執行(根據寫法不同,處理方式不同)。CMD 推崇 as lazy as possible(盡可能的懶加載,也稱為延遲加載,即在需要的時候才加載)。

  2. CMD 推崇依賴就近,AMD 推崇依賴前置。
  雖然 AMD 也支持 CMD 的寫法,同時還支持將 require 作為依賴項傳遞,但 RequireJS 的作者默認是最喜歡上面的寫法,也是官方文檔里默認的模塊定義寫法。看代碼:

復制代碼
// CMD
define(function(require, exports, module) {
    var a = require('./a');
    a.doSomething();
    // 此處略去 100 行
    var b = require('./b');   // 依賴可以就近書寫
    b.doSomething();
    // ... 
})

// AMD 默認推薦的是
define(['./a', './b'], function(a, b) { // 依賴必須一開始就寫好
    a.doSomething();
    // 此處略去 100 行
    b.doSomething();
    //...
}) 
復制代碼

  3. AMD 的 API 默認是一個當多個用,CMD 的 API 嚴格區分,推崇職責單一。比如 AMD 里,require 分全局 require 和局部 require,都叫 require。CMD 里,沒有全局 require,而是根據模塊系統的完備性,提供 seajs.use 來實現模塊系統的加載啟動。CMD 里,每個 API 都簡單純粹。

 

轉載https://www.cnblogs.com/lishuxue/p/6000205.html#undefined


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM