我們先從CommonJS談起，因?yàn)樵诰W(wǎng)頁(yè)端沒(méi)有模塊化編程只是頁(yè)面JavaScript邏輯復(fù)雜瓢省，但也可以工作下去弄息，在服務(wù)器端卻一定要有模塊，所以雖然JavaScript在web端發(fā)展這么多年勤婚，第一個(gè)流行的模塊化規(guī)范卻由服務(wù)器端的JavaScript應(yīng)用帶來(lái)摹量，CommonJS規(guī)范是由NodeJS發(fā)揚(yáng)光大，這標(biāo)志著JavaScript模塊化編程正式登上舞臺(tái)
一蛔六、CommonJS
CommonJS就是為JS的表現(xiàn)來(lái)制定規(guī)范，因?yàn)閖s沒(méi)有模塊的功能所以CommonJS應(yīng)運(yùn)而生废亭，它希望js可以在任何地方運(yùn)行国章，不只是瀏覽器中。
CommonJS能有一定的影響力豆村，我覺(jué)得絕對(duì)離不開(kāi)Node的人氣液兽，不過(guò)喔，Node掌动，CommonJS四啰，瀏覽器甚至是W3C之間有什么關(guān)系呢，我找到了個(gè)貼切的圖：
CommonJS定義的模塊分為:{模塊引用(require)} {模塊定義(exports)} {模塊標(biāo)識(shí)(module)}
1粗恢、定義模塊
根據(jù)CommonJS規(guī)范柑晒，一個(gè)單獨(dú)的文件就是一個(gè)模塊。每一個(gè)模塊都是一個(gè)單獨(dú)的作用域眷射，也就是說(shuō)匙赞，在該模塊內(nèi)部定義的變量佛掖，無(wú)法被其他模塊讀取，除非定義為global對(duì)象的屬性
2涌庭、模塊輸出：
模塊只有一個(gè)出口芥被，module.exports對(duì)象，我們需要把模塊希望輸出的內(nèi)容放入該對(duì)象
3坐榆、加載模塊：
加載模塊使用require方法拴魄，該方法讀取一個(gè)文件并執(zhí)行，返回文件內(nèi)部的module.exports對(duì)象
require()用來(lái)引入外部模塊席镀；exports對(duì)象用于導(dǎo)出當(dāng)前模塊的方法或變量匹中，唯一的導(dǎo)出口；module對(duì)象就代表模塊本身愉昆。
//模塊定義?
myModel.jsvarname ='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();
AMD
AMD 即Asynchronous Module Definition职员，中文名是異步模塊定義的意思。它是一個(gè)在瀏覽器端模塊化開(kāi)發(fā)的規(guī)范
由于不是JavaScript原生支持跛溉，使用AMD規(guī)范進(jìn)行頁(yè)面開(kāi)發(fā)需要用到對(duì)應(yīng)的庫(kù)函數(shù)焊切，也就是大名鼎鼎RequireJS，實(shí)際上AMD 是 RequireJS 在推廣過(guò)程中對(duì)模塊定義的規(guī)范化的產(chǎn)出
requireJS主要解決兩個(gè)問(wèn)題
1芳室、多個(gè)js文件可能有依賴關(guān)系专肪，被依賴的文件需要早于依賴它的文件加載到瀏覽器
2、js加載的時(shí)候?yàn)g覽器會(huì)停止頁(yè)面渲染堪侯，加載文件越多嚎尤，頁(yè)面失去響應(yīng)時(shí)間越長(zhǎng)
看一個(gè)使用requireJS的例子
CMD
CMD 即Common Module Definition通用模塊定義，CMD規(guī)范是國(guó)內(nèi)發(fā)展出來(lái)的伍宦，就像AMD有個(gè)requireJS芽死，CMD有個(gè)瀏覽器的實(shí)現(xiàn)SeaJS，SeaJS要解決的問(wèn)題和requireJS一樣次洼，只不過(guò)在模塊定義方式和模塊加載（可以說(shuō)運(yùn)行关贵、解析）時(shí)機(jī)上有所不同
語(yǔ)法
Sea.js 推崇一個(gè)模塊一個(gè)文件，遵循統(tǒng)一的寫法
因?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ù)翔脱，用來(lái)獲取其他模塊提供的接口：require(id)
exports 是一個(gè)對(duì)象奴拦，用來(lái)向外提供模塊接口
module 是一個(gè)對(duì)象，上面存儲(chǔ)了與當(dāng)前模塊相關(guān)聯(lián)的一些屬性和方法
AMD與CMD區(qū)別
關(guān)于這兩個(gè)的區(qū)別網(wǎng)上可以搜出一堆文章届吁，簡(jiǎn)單總結(jié)一下
最明顯的區(qū)別就是在模塊定義時(shí)對(duì)依賴的處理不同
1粱坤、AMD推崇依賴前置隶糕，在定義模塊的時(shí)候就要聲明其依賴的模塊
2、CMD推崇就近依賴站玄，只有在用到某個(gè)模塊的時(shí)候再去require
這種區(qū)別各有優(yōu)劣枚驻，只是語(yǔ)法上的差距，而且requireJS和SeaJS都支持對(duì)方的寫法
AMD和CMD最大的區(qū)別是對(duì)依賴模塊的執(zhí)行時(shí)機(jī)處理不同株旷，注意不是加載的時(shí)機(jī)或者方式不同
很多人說(shuō)requireJS是異步加載模塊再登，SeaJS是同步加載模塊，這么理解實(shí)際上是不準(zhǔn)確的晾剖，其實(shí)加載模塊都是異步的锉矢，只不過(guò)AMD依賴前置，js可以方便知道依賴模塊是誰(shuí)齿尽，立即加載沽损，而CMD就近依賴，需要使用把模塊變?yōu)樽址馕鲆槐椴胖酪蕾嚵四切┠K循头，這也是很多人詬病CMD的一點(diǎn)绵估，犧牲性能來(lái)帶來(lái)開(kāi)發(fā)的便利性，實(shí)際上解析模塊用的時(shí)間短到可以忽略
為什么我們說(shuō)兩個(gè)的區(qū)別是依賴模塊執(zhí)行時(shí)機(jī)不同卡骂，為什么很多人認(rèn)為ADM是異步的国裳，CMD是同步的（除了名字的原因。全跨。缝左。）
同樣都是異步加載模塊，AMD在加載模塊完成后就會(huì)執(zhí)行改模塊浓若，所有模塊都加載執(zhí)行完后會(huì)進(jìn)入require的回調(diào)函數(shù)渺杉，執(zhí)行主邏輯，這樣的效果就是依賴模塊的執(zhí)行順序和書寫順序不一定一致挪钓，看網(wǎng)絡(luò)速度是越，哪個(gè)先下載下來(lái)，哪個(gè)先執(zhí)行诵原，但是主邏輯一定在所有依賴加載完成后才執(zhí)行
CMD加載完某個(gè)依賴模塊后并不執(zhí)行英妓，只是下載而已挽放，在所有依賴模塊加載完成后進(jìn)入主邏輯绍赛，遇到require語(yǔ)句的時(shí)候才執(zhí)行對(duì)應(yīng)的模塊灰蛙，這樣模塊的執(zhí)行順序和書寫順序是完全一致的
這也是很多人說(shuō)AMD用戶體驗(yàn)好十酣，因?yàn)闆](méi)有延遲逼纸，依賴模塊提前執(zhí)行了黔帕，CMD性能好肆饶，因?yàn)橹挥杏脩粜枰臅r(shí)候才執(zhí)行的原因
