JavaScript模塊規(guī)范

在任何一個(gè)大型應(yīng)用中模塊化是很常見的，與一些更傳統(tǒng)的編程語言不同的是，JavaScript (ECMA-262版本)還不支持原生的模塊化。

Javascript社區(qū)做了很多努力，在現(xiàn)有的運(yùn)行環(huán)境中，實(shí)現(xiàn)"模塊"的效果。通行的JavaScript模塊規(guī)范主要有兩種：CommonJS、AMD、UMD、CMD等。

CommonJS

CommonJS規(guī)范是服務(wù)器端Javascript模塊規(guī)范。

Node.js的模塊系統(tǒng)，就是參照CommonJS規(guī)范實(shí)現(xiàn)的。NPM也遵循了commonJS定義的包規(guī)范，從而形成了一套完整的生態(tài)系統(tǒng)。

CommonJS定義的模塊分為:{模塊引用(require)} {模塊定義(exports)} {模塊標(biāo)識(shí)(module)}。require()用來引入外部模塊;exports對象用于導(dǎo)出當(dāng)前模塊的方法或變量，唯一的導(dǎo)出口;module對象就代表模塊本身。

exports對象

module對象

AMD

AMD是"Asynchronous Module Definition"的縮寫，意思是"異步模塊定義"，是前端模塊規(guī)范。

RequireJS就是實(shí)現(xiàn)了AMD規(guī)范的呢。

AMD規(guī)范定義了一個(gè)自由變量或者說是全局變量 define 的函數(shù)。

define( id?, dependencies?, factory );

id 為字符串類型，表示了模塊標(biāo)識(shí)，為可選參數(shù)。若不存在則模塊標(biāo)識(shí)應(yīng)該默認(rèn)定義為在加載器中被請求腳本的標(biāo)識(shí)。如果存在，那么模塊標(biāo)識(shí)必須為頂層的或者一個(gè)絕對的標(biāo)識(shí)。

dependencies ，是一個(gè)當(dāng)前模塊依賴的，已被模塊定義的模塊標(biāo)識(shí)的數(shù)組字面量。

factory，是一個(gè)需要進(jìn)行實(shí)例化的函數(shù)或者一個(gè)對象。

define

UMD

CommonJS module以服務(wù)器端為第一的原則發(fā)展，選擇同步加載模塊。它的模塊是無需包裝的,但它僅支持對象類型(objects)模塊。AMD以瀏覽器為第一(browser-first)的原則發(fā)展，選擇異步加載模塊。它的模塊支持對象、函數(shù)、構(gòu)造器、字符串、JSON等各種類型的模塊,因此在瀏覽器中它非常靈活。這迫使人們想出另一種更通用格式 UMD(Universal Module Definition)，希望提供一個(gè)前后端跨平臺(tái)的解決方案。

UMD

UMD的實(shí)現(xiàn)很簡單，先判斷是否支持AMD(define是否存在)，存在則使用AMD方式加載模塊。再判斷是否支持Node.js模塊格式(exports是否存在)，存在則使用Node.js模塊格式。前兩個(gè)都不存在，則將模塊公開到全局(window或global)。

define是否存在

exports是否存在

CMD

CMD 即Common Module Definition通用模塊定義，CMD規(guī)范是國內(nèi)發(fā)展出來的，就像AMD有個(gè)requireJS，CMD有個(gè)瀏覽器的實(shí)現(xiàn)SeaJS，SeaJS要解決的問題和requireJS一樣，只不過在模塊定義方式和模塊加載(可以說運(yùn)行、解析)時(shí)機(jī)上有所不同。

Sea.js 推崇一個(gè)模塊一個(gè)文件，遵循統(tǒng)一的寫法

define(id?, deps?, factory)

因?yàn)镃MD推崇一個(gè)文件一個(gè)模塊，所以經(jīng)常就用文件名作為模塊id,CMD推崇依賴就近，所以一般不在define的參數(shù)中寫依賴，在factory中寫。

factory是一個(gè)函數(shù)，有三個(gè)參數(shù)，function(require, exports, module)

require 是一個(gè)方法，接受模塊標(biāo)識(shí) 作為唯一參數(shù)，用來獲取其他模塊提供的接口

exports 是一個(gè)對象，用來向外提供模塊接口

module 是一個(gè)對象，上面存儲(chǔ)了與當(dāng)前模塊相關(guān)聯(lián)的一些屬性和方法

CMD