問答
1.為什么要使用模塊化倍权？
- 要使用模塊化掷豺，我們要知道什么是模塊化？首先一個(gè)模塊是為了實(shí)現(xiàn)特定功能的文件薄声，模塊化就是使用模塊來隔離当船、組織復(fù)雜的javascript代碼（代碼量過萬）。模塊化的目的是為了解決兩大難題默辨，一是命名沖突生年，二是依賴管理。當(dāng)然它還有其他長處廓奕，可以提高代碼的可讀性抱婉，提高復(fù)用性。
- 一是它可以解決命名的沖突（前提桌粉，這是一個(gè)復(fù)雜的項(xiàng)目不是一個(gè)簡單的頁面）因?yàn)槿绻麊稳酥蛔鲆粋€(gè)簡單的頁面（1個(gè)html,js,css）沒必要去搞什么模塊化蒸绩，反而會(huì)增加復(fù)雜度，但是實(shí)際情況下一個(gè)項(xiàng)目是需要多個(gè)人分工合作铃肯，難免會(huì)出現(xiàn)命名沖突（一樣）患亿，所以模塊化應(yīng)運(yùn)而生。
- 二是它可以解決文件的依賴押逼，使文件易于管理步藕，我們來想象這樣一個(gè)場景，這是一個(gè)項(xiàng)目挑格，它的js文件夾下有許多js文件咙冗，它們之間互相依賴（會(huì)相互調(diào)用），你如何管理和確保它們加載的順序先后漂彤，才不會(huì)出現(xiàn)由于一個(gè)重要的js文件順序放錯(cuò)了雾消，而導(dǎo)致其他的js文件的功能無法使用，現(xiàn)在不用擔(dān)心了挫望，模塊化可以更好的實(shí)現(xiàn)依賴管理
- 三是提高代碼的可讀性立润，因?yàn)楦鱾€(gè)模塊各司其職，都是為了實(shí)現(xiàn)某個(gè)特定功能媳板，代碼更為簡潔桑腮，不會(huì)出現(xiàn)代碼亂糟糟的感覺。而且出現(xiàn)了問題蛉幸，也容易查找破讨。
- 四是代碼的復(fù)用性增強(qiáng)旨巷，因?yàn)槟K化就是為了使代碼去實(shí)現(xiàn)某個(gè)特定的功能，和其他文件沒有多少關(guān)聯(lián)添忘，因此我們以后的項(xiàng)目中只要需要實(shí)現(xiàn)這個(gè)功能采呐，直接調(diào)用這個(gè)模塊，如果發(fā)現(xiàn)這個(gè)功能的bug,也只要去單獨(dú)修改這個(gè)模塊的文件搁骑，而不會(huì)產(chǎn)生一顆老鼠屎壞了一鍋湯的惡劣的影響
2.CMD斧吐、AMD、CommonJS 規(guī)范分別指什么仲器？有哪些應(yīng)用
-
CommonJS是服務(wù)器端模塊的規(guī)范煤率，Node.js采用了這個(gè)規(guī)范。它的主要內(nèi)容如下：
1.定義模塊：一個(gè)單獨(dú)的文件就是一個(gè)模塊乏冀。每一個(gè)模塊都是一個(gè)單獨(dú)的作用域蝶糯，也就是說，在該模塊內(nèi)部定義的變量辆沦，無法被其他模塊讀取昼捍，除非定義為global（全局）對(duì)象的屬性
2.模塊輸出： 模塊只有一個(gè)出口，module.exports對(duì)象肢扯，我們需要把模塊希望輸出的內(nèi)容放入該對(duì)象
3.加載模塊： 加載模塊使用require方法妒茬，該方法讀取一個(gè)文件并執(zhí)行，返回文件內(nèi)部的module.exports對(duì)象//定義模塊 math.js var random=Math.random()*10; function printRandom(){ console.log(random) } function printIntRandom(){ console.log(Math.floor(random)) } //模塊輸出 module.exports={ printRandom:printRandom, printIntRandom:printIntRandom } //加載模塊 math.js var math=require('math') //就可以調(diào)用模塊提供的方法 math.printIntRandom() math.printRandom() AMD 即Asynchronous Module Definition蔚晨，中文名是異步模塊定義的意思乍钻。它是一個(gè)在瀏覽器端模塊化開發(fā)的規(guī)范，模塊和依賴可以異步加載铭腕，對(duì)瀏覽器端較為適用银择。可以說AMD是專門為瀏覽器中的javascript環(huán)境設(shè)計(jì)的規(guī)范累舷。語法如下：
define(id?, dependencies?, factory)
1.id: 定義中模塊的名字浩考，可選；如果沒有提供該參數(shù)笋粟，模塊的名字應(yīng)該默認(rèn)為模塊加載器請(qǐng)求的指定腳本的名字(如dialog.js)
2.依賴dependencies：是一個(gè)當(dāng)前模塊依賴的怀挠，已被模塊定義的模塊標(biāo)識(shí)的數(shù)組字面量析蝴。 依賴參數(shù)是可選的害捕，如果忽略此參數(shù)，它應(yīng)該默認(rèn)為["require", "exports", "module"]闷畸。然而尝盼，如果工廠方法的長度屬性小于3，加載器會(huì)選擇以函數(shù)的長度屬性指定的參數(shù)個(gè)數(shù)調(diào)用工廠方法佑菩。
3.工廠方法factory盾沫，模塊初始化要執(zhí)行的函數(shù)或?qū)ο蟛迷Ｈ绻麨楹瘮?shù)，它應(yīng)該只被執(zhí)行一次赴精。如果是對(duì)象佩捞，此對(duì)象應(yīng)該為模塊的輸出值
示例
define('tabs', ['jQuery', 'tabs-mod'], function($, tabs){
$('.tabs').show();
Dialog.open();
});
注意：dependencies中元素的模塊的順序必須和factory中參數(shù)順序一致，factory中參數(shù)的名稱不必一致
應(yīng)用：RequireJS蕾哟、curl一忱、Dojo等框架式按照AMD規(guī)范實(shí)現(xiàn)模塊化的設(shè)置。CMD 即Common Module Definition通用模塊定義谭确，CMD規(guī)范是國內(nèi)發(fā)展出來的帘营，就像AMD有個(gè)requireJS，CMD有個(gè)瀏覽器的實(shí)現(xiàn)SeaJS逐哈，SeaJS要解決的問題和requireJS一樣芬迄，只不過在模塊定義方式和模塊加載（可以說運(yùn)行、解析）時(shí)機(jī)上有所不同昂秃。語法如下：
define(id?, deps?, factory)
id,des,factory和AMD意思差不多禀梳，這里不贅述
CMD理念
1.一個(gè)文件一個(gè)模塊，所以經(jīng)常就用文件名作為模塊id
2.CMD推崇依賴就近肠骆，所以一般不在define的參數(shù)中寫依賴出皇，在factory中寫factory有三個(gè)參數(shù)，如下：
function(require, exports, module)
實(shí)例
define(function(require,exports,moudle){
var random=require('../random.js')
random.doSomething()
//......
var int=require('../int.js')
int.doSomething()
//......
})AMD與CMD的區(qū)別
1.對(duì)于依賴的模塊哗戈，AMD 是提前執(zhí)行郊艘，CMD 是延遲執(zhí)行。
2.CMD 推崇依賴就近唯咬，AMD 推崇依賴前置纱注。
3.AMD 的 API 默認(rèn)是一個(gè)當(dāng)多個(gè)用，CMD 的 API 嚴(yán)格區(qū)分胆胰，推崇職責(zé)單一狞贱。比如 AMD 里，require 分全局 require 和局部 require蜀涨，都叫 require瞎嬉。CMD 里，沒有全局 require厚柳，而是根據(jù)模塊系統(tǒng)的完備性氧枣，提供 seajs.use 來實(shí)現(xiàn)模塊系統(tǒng)的加載啟動(dòng)。CMD 里别垮，每個(gè) API 都簡單純粹
轉(zhuǎn)自知乎：AMD與CMD區(qū)別
