JS模塊化標準CommonJS/AMD/CMD區別和詳解

今天接到阿里的電話面試,面試中問到CommonJS AMD CMD這3種JS模塊化開發標準的特色和區別。

當時問題回答的不太好，總結了一下，以避免你們採坑。

 

1、CommonJS

　　CommonJS是NodeJS服務器端的概念 、採用同步加載文件的方式

　　實例說明：

　　目前你們項目中使用打包工具webpack就是經過node實現的功能，配置webpack.config.js中使用的module.exports 公佈接口這就是CommonJS的標準

1 const path = require('path');
2 
3 module.exports = {
4   entry: './src/index.js',
5   output: {
6       path: path.resolve(__dirname, 'dist'),
7       filename: 'bundle.js'
8   }
9 };

 

服務器端的Node.js遵循CommonJS規範。核心思想是容許模塊經過require 方法來同步加載所要依賴的其餘模塊，而後經過exports或module.exports來導出須要暴露的接口。

 

優勢：

1. 服務器端便於重用
2. NPM中已經將近20w個模塊包
3. 簡單並容易使用

缺點：

1. 同步的模塊方式不適合不適合在瀏覽器環境中，同步意味着阻塞加載，瀏覽器資源是異步加載的
2. 不能非阻塞的並行加載多個模塊

 

2、AMD

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

 　　咱們使用的RequireJS就是AMD的實現框架。

 　　AMD規範只有一個主要接口define(id,dependencies,factory)，它要在聲明模塊的時候指定全部的依賴dependencies，而且還要當作形參傳到factory中，對於依賴的模塊提早執行，依賴前置。

 

1 //定義AMD接口規範
2 
3 define("module", ["dep1", "dep2"], function(d1, d2) {  
4 
5   //定義一個模塊dep1 dep2是依賴的模塊 依賴的模塊是前置加載的，
6 
7   return someExportedValue;  
8 
9 }); 

 

1 //引用模塊
2 
3 require(['math'], function (math) {
4             //異步加載math模塊 ，在回調函數中調用 
5 　　　　math.add(2, 3);
6 
7 });

 

 

3、CMD

CMD（Common Module Definition）模塊定義規範 該規範的表明框架是SeaJS CMD 推崇依賴就近，AMD 推崇依賴前置 ，對比上面AMD的define 就一路瞭然看到兩者的區別了

define(function(require, exports, module) {

var math= require('./math')  //當使用到math模塊了纔去加載math模塊

math.add(1,2)
// 此處略去100 行

var tools= require('./tools') // 依賴能夠就近書寫
tools.getFile()

// ... 

})

 

最後總結：

	目前實現的框架	文件加載方式	對依賴模塊的加載
AMD	RequireJS	異步加載	前置加載
CMD	SeaJS	異步加載	延遲加載
Command	NodeJS	同步加載	同步加載

 

 

 

 

 若是你們還想了解更多關於RequireJS和SeaJS的差異 看看玉伯的文章