CommonJS、AMD、CMD和ES6模塊化區別

本文參考自：http://www.javashuo.com/article/p-pkefugki-gh.html

一、CommonJS

NodeJS是CommonJS規範的實現，webpack 也是以CommonJS的形式來書寫。node.js將javascript語言用於服務器端編程。

二、AMD

基於commonJS規範的nodeJS出來之後，服務端的模塊概念已經造成，很天然地，你們就想要客戶端模塊。並且最好二者可以兼容，一個模塊不用修改，在服務器和瀏覽器均可以運行。可是，因爲一個重大的侷限，使得CommonJS規範不適用於瀏覽器環境。

var math = require('math'); 　　math.add(2, 3);

第二行math.add(2, 3)，在第一行require('math')以後運行，所以必須等math.js加載完成。也就是說，若是加載時間很長，整個應用就會停在那裏等。您會注意到 require 是同步的。

這對服務器端不是一個問題，由於全部的模塊都存放在本地硬盤，能夠同步加載完成，等待時間就是硬盤的讀取時間。可是，對於瀏覽器，這倒是一個大問題，由於模塊都放在服務器端，等待時間取決於網速的快慢，可能要等很長時間，瀏覽器處於"假死"狀態。

所以，瀏覽器端的模塊，不能採用"同步加載"（synchronous），只能採用"異步加載"（asynchronous）。這就是AMD規範誕生的背景。

AMD是"Asynchronous Module Definition"的縮寫，意思就是"異步模塊定義"。它採用異步方式加載模塊，模塊的加載不影響它後面語句的運行。全部依賴這個模塊的語句，都定義在一個回調函數中，等到加載完成以後，這個回調函數纔會運行。

三、CMD

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

 四、ES6 模塊化

ES6 模塊化採用靜態編譯，使得編譯時就能肯定模塊的依賴關係，以及輸入和輸出的變量。CommonJS 和 AMD 模塊，都只能在運行時肯定這些東西。

 

對於 CommonJS 和 ES6 中的模塊化的二者區別是：

• 前者支持動態導入，也就是 require(${path}/xx.js)，後者目前不支持。

• 前者是同步導入，由於用於服務端，文件都在本地，同步導入即便卡住主線程影響也不大。然後者是異步導入，由於用於瀏覽器，須要下載文件，若是也採用同步導入會對渲染有很大影響。

• 前者在導出時都是值拷貝，就算導出的值變了，導入的值也不會改變，因此若是想更新值，必須從新導入一次。可是後者採用實時綁定的方式，導入導出的值都指向同一個內存地址，因此導入值會跟隨導出值變化