前端模組化，AMD與CMD的區別

singer-coder發表於2017-12-26
前端
原創 2016年08月03日 17:15:51
  • 21234

最近在研究cmd和amd，在網上看到一篇不錯的文章，整理下看看。
在JavaScript發展初期就是為了實現簡單的頁面互動邏輯，寥寥數語即可；如今CPU、瀏覽器效能得到了極大的提升，很多頁面邏輯遷移到了客戶端（表單驗證等），隨著web2.0時代的到來，Ajax技術得到廣泛應用，jQuery等前端庫層出不窮，前端程式碼日益膨脹

這時候JavaScript作為嵌入式的指令碼語言的定位動搖了，JavaScript卻沒有為組織程式碼提供任何明顯幫助，甚至沒有類的概念，更不用說模組（module）了，JavaScript極其簡單的程式碼組織規範不足以駕馭如此龐大規模的程式碼

模組

既然JavaScript不能handle如此大規模的程式碼，我們可以借鑑一下其它語言是怎麼處理大規模程式設計的，在Java中有一個重要帶概念——package，邏輯上相關的程式碼組織到同一個包內，包內是一個相對獨立的王國，不用擔心命名衝突什麼的，那麼外部如果使用呢？直接import對應的package即可

import java.util.ArrayList;
遺憾的是JavaScript在設計時定位原因，沒有提供類似的功能，開發者需要模擬出類似的功能，來隔離、組織複雜的JavaScript程式碼，我們稱為模組化。

一個模組就是實現特定功能的檔案，有了模組，我們就可以更方便地使用別人的程式碼，想要什麼功能，就載入什麼模組。模組開發需要遵循一定的規範，各行其是就都亂套了

規範形成的過程是痛苦的，前端的先驅在刀耕火種、茹毛飲血的階段開始，發展到現在初具規模，簡單瞭解一下這段不凡的歷程

函式封裝

我們在講函式的時候提到，函式一個功能就是實現特定邏輯的一組語句打包，而且JavaScript的作用域就是基於函式的，所以把函式作為模組化的第一步是很自然的事情，在一個檔案裡面編寫幾個相關函式就是最開始的模組了

function fn1(){
    statement
}

function fn2(){
    statement
}1234567複製程式碼

這樣在需要的以後夾在函式所在檔案，呼叫函式就可以了

這種做法的缺點很明顯：汙染了全域性變數，無法保證不與其他模組發生變數名衝突，而且模組成員之間沒什麼關係。

物件

為了解決上面問題，物件的寫法應運而生，可以把所有的模組成員封裝在一個物件中

var myModule = {
    var1: 1,

    var2: 2,

    fn1: function(){

    },

    fn2: function(){

    }
}12345678910111213複製程式碼

這樣我們在希望呼叫模組的時候引用對應檔案，然後

myModule.fn2();
這樣避免了變數汙染，只要保證模組名唯一即可，同時同一模組內的成員也有了關係

看似不錯的解決方案，但是也有缺陷，外部可以隨意修改內部成員

myModel.var1 = 100;
這樣就會產生意外的安全問題

立即執行函式

可以通過立即執行函式，來達到隱藏細節的目的

var myModule = (function(){
    var var1 = 1;
    var var2 = 2;

    function fn1(){

    }

    function fn2(){

    }

    return {
        fn1: fn1,
        fn2: fn2
    };
})();1234567891011121314151617複製程式碼

這樣在模組外部無法修改我們沒有暴露出來的變數、函式

上述做法就是我們模組化的基礎，目前，通行的JavaScript模組規範主要有兩種：CommonJS和AMD

CommonJS

我們先從CommonJS談起，因為在網頁端沒有模組化程式設計只是頁面JavaScript邏輯複雜，但也可以工作下去，在伺服器端卻一定要有模組，所以雖然JavaScript在web端發展這麼多年，第一個流行的模組化規範卻由伺服器端的JavaScript應用帶來，CommonJS規範是由NodeJS發揚光大，這標誌著JavaScript模組化程式設計正式登上舞臺。

1、定義模組
根據CommonJS規範，一個單獨的檔案就是一個模組。每一個模組都是一個單獨的作用域，也就是說，在該模組內部定義的變數，無法被其他模組讀取，除非定義為global物件的屬性

2、模組輸出：
模組只有一個出口，module.exports物件，我們需要把模組希望輸出的內容放入該物件

3、載入模組：
載入模組使用require方法，該方法讀取一個檔案並執行，返回檔案內部的module.exports物件

看個例子

//模組定義 myModel.js

var name = 'Byron';

function printName(){
    console.log(name);
}

function printFullName(firstName){
    console.log(firstName + name);
}

module.exports = {
    printName: printName,
    printFullName: printFullName
}

//載入模組

var nameModule = require('./myModel.js');

nameModule.printName();12345678910111213141516171819202122複製程式碼

不同的實現對require時的路徑有不同要求，一般情況可以省略js擴充名，可以使用相對路徑，也可以使用絕對路徑，甚至可以省略路徑直接使用模組名（前提是該模組是系統內建模組）

尷尬的瀏覽器

仔細看上面的程式碼，會發現require是同步的。模組系統需要同步讀取模組檔案內容，並編譯執行以得到模組介面。

這在伺服器端實現很簡單，也很自然，然而， 想在瀏覽器端實現問題卻很多。

瀏覽器端，載入JavaScript最佳、最容易的方式是在document中插入script 標籤。但指令碼標籤天生非同步，傳統CommonJS模組在瀏覽器環境中無法正常載入。

解決思路之一是，開發一個伺服器端元件，對模組程式碼作靜態分析，將模組與它的依賴列表一起返回給瀏覽器端。 這很好使，但需要伺服器安裝額外的元件，並因此要調整一系列底層架構。

另一種解決思路是，用一套標準模板來封裝模組定義，但是對於模組應該怎麼定義和怎麼載入，又產生的分歧：

AMD

AMD 即Asynchronous Module Definition，中文名是非同步模組定義的意思。它是一個在瀏覽器端模組化開發的規範

由於不是JavaScript原生支援，使用AMD規範進行頁面開發需要用到對應的庫函式，也就是大名鼎鼎RequireJS，實際上AMD 是 RequireJS 在推廣過程中對模組定義的規範化的產出

requireJS主要解決兩個問題

1、多個js檔案可能有依賴關係，被依賴的檔案需要早於依賴它的檔案載入到瀏覽器
2、js載入的時候瀏覽器會停止頁面渲染，載入檔案越多，頁面失去響應時間越長
看一個使用requireJS的例子

// 定義模組 myModule.js
define(['dependency'], function(){
    var name = 'Byron';
    function printName(){
        console.log(name);
    }

    return {
        printName: printName
    };
});

// 載入模組
require(['myModule'], function (my){
　 my.printName();
});12345678910111213141516複製程式碼

語法

requireJS定義了一個函式 define，它是全域性變數，用來定義模組

define(id?, dependencies?, factory);

  1. id：可選引數，用來定義模組的標識，如果沒有提供該引數，指令碼檔名（去掉擴充名）
  2. dependencies：是一個當前模組依賴的模組名稱陣列
  3. factory：工廠方法，模組初始化要執行的函式或物件。如果為函式，它應該只被執行一次。如果是物件，此物件應該為模組的輸出值
    在頁面上使用require函式載入模組

require([dependencies], function(){});
require()函式接受兩個引數

  1. 第一個引數是一個陣列，表示所依賴的模組
  2. 第二個引數是一個回撥函式，當前面指定的模組都載入成功後，它將被呼叫。載入的模組會以引數形式傳入該函式，從而在回撥函式內部就可以使用這些模組

require()函式在載入依賴的函式的時候是非同步載入的，這樣瀏覽器不會失去響應，它指定的回撥函式，只有前面的模組都載入成功後，才會執行，解決了依賴性的問題。

CMD

CMD 即Common Module Definition通用模組定義，CMD規範是國內發展出來的，就像AMD有個requireJS，CMD有個瀏覽器的實現SeaJS，SeaJS要解決的問題和requireJS一樣，只不過在模組定義方式和模組載入（可以說執行、解析）時機上有所不同
語法
Sea.js 推崇一個模組一個檔案，遵循統一的寫法
define(id?, deps?, factory)
因為CMD推崇

  1. 一個檔案一個模組，所以經常就用檔名作為模組id
  2. CMD推崇依賴就近，所以一般不在define的引數中寫依賴，在factory中寫

factory是一個函式，有三個引數，function(require, exports, module)

  1. require 是一個方法，接受 模組標識 作為唯一引數，用來獲取其他模組提供的介面：require(id)
  2. exports 是一個物件，用來向外提供模組介面
  3. module 是一個物件，上面儲存了與當前模組相關聯的一些屬性和方法

看個例子：

// 定義模組  myModule.js
define(function(require, exports, module) {
  var $ = require('jquery.js')
  $('div').addClass('active');
});

// 載入模組
seajs.use(['myModule.js'], function(my){

});12345678910複製程式碼

AMD與CMD區別

關於這兩個的區別網上可以搜出一堆文章，簡單總結一下

最明顯的區別就是在模組定義時對依賴的處理不同

1、AMD推崇依賴前置，在定義模組的時候就要宣告其依賴的模組
2、CMD推崇就近依賴，只有在用到某個模組的時候再去require
這種區別各有優劣，只是語法上的差距，而且requireJS和SeaJS都支援對方的寫法

AMD和CMD最大的區別是對依賴模組的執行時機處理不同，注意不是載入的時機或者方式不同

很多人說requireJS是非同步載入模組，SeaJS是同步載入模組，這麼理解實際上是不準確的，其實載入模組都是非同步的，只不過AMD依賴前置，js可以方便知道依賴模組是誰，立即載入，而CMD就近依賴，需要使用把模組變為字串解析一遍才知道依賴了那些模組，這也是很多人詬病CMD的一點，犧牲效能來帶來開發的便利性，實際上解析模組用的時間短到可以忽略

為什麼我們說兩個的區別是依賴模組執行時機不同，為什麼很多人認為ADM是非同步的，CMD是同步的（除了名字的原因。。。）

同樣都是非同步載入模組，AMD在載入模組完成後就會執行改模組，所有模組都載入執行完後會進入require的回撥函式，執行主邏輯，這樣的效果就是依賴模組的執行順序和書寫順序不一定一致，看網路速度，哪個先下載下來，哪個先執行，但是主邏輯一定在所有依賴載入完成後才執行

CMD載入完某個依賴模組後並不執行，只是下載而已，在所有依賴模組載入完成後進入主邏輯，遇到require語句的時候才執行對應的模組，這樣模組的執行順序和書寫順序是完全一致的

這也是很多人說AMD使用者體驗好，因為沒有延遲，依賴模組提前執行了，CMD效能好，因為只有使用者需要的時候才執行的原因


相關文章