一、 為什么要使用模塊化？
- 解決命名沖突
- 解決依賴管理
- 提高代碼可讀性
- 代碼解耦,提高復(fù)用性
二、CMD、AMD、CommonJS 規(guī)范分別指什么？有哪些應(yīng)用
CommonJS 規(guī)范
CommonJS是服務(wù)器端模塊的規(guī)范，Node.js采用了這個(gè)規(guī)范。Node.JS首先采用了js模塊化的概念。
- 定義模塊： 一個(gè)單獨(dú)的文件就是一個(gè)模塊，每個(gè)模塊都是單獨(dú)的作用域。在該模塊內(nèi)部所定義的變量，其他模塊無法讀取，除非是定義為global對(duì)象的屬性。
- 模塊輸出： 模塊只有一個(gè)出口，那就是
module.exports對(duì)象。把要輸出的內(nèi)容放入該對(duì)象。 - 加載模塊： 加載模塊使用
require方法，該方法讀取一個(gè)文件并執(zhí)行，返回文件內(nèi)部的module.exports對(duì)象。
示例
//模塊定義 myModel.js
var name = 'Byron';
function printName(){
console.log(name);
}
function printFullName(firstName){
console.log(firstName + name);
}
//要輸出的內(nèi)容放入module.exports對(duì)象
module.exports = {
printName: printName,
printFullName: printFullName
}
//加載模塊
//使用require方法讀取一個(gè)文件并執(zhí)行，返回文件內(nèi)部的module.exports對(duì)象
var nameModule = require('./myModel.js');
nameModule.printName();
關(guān)于路徑：一般情況可以省略js擴(kuò)展名。可以用相對(duì)路徑也可以使用絕對(duì)路徑。（若該模塊是系統(tǒng)內(nèi)置模塊，可以省略路徑直接使用模塊名。）
可以發(fā)現(xiàn)，require是同步的。在服務(wù)器端使用時(shí)很順暢，但在瀏覽器端使用時(shí)遇到了很大困難。
我們可以通過使用標(biāo)準(zhǔn)模板封裝模塊定義來解決。有兩種“套路”：
AMD 規(guī)范
AMD(Asynchronous Module Definition, 異步模塊定義) 指定一種機(jī)制，在該機(jī)制下模塊和依賴可以異步加載。這對(duì)瀏覽器端的異步加載尤其適用。
實(shí)現(xiàn)AMD的庫(kù)有RequireJS 、curl 、Dojo 等。
語法
define(id?, dependencies?, factory)
- id（可選）：用來定義模塊的標(biāo)識(shí)，若為空，就默認(rèn)為模塊加載器請(qǐng)求的指定腳本的名字。
- dependencies（可選）：是當(dāng)前模塊依賴的，已被模塊定義的模塊標(biāo)識(shí)的數(shù)組字面量。默認(rèn)為
["require", "exports", "module"]。 - factory：模塊初始化要執(zhí)行的函數(shù)或對(duì)象。如果是函數(shù)，則只執(zhí)行一次，若是對(duì)象，則對(duì)象應(yīng)是模塊的輸出值。
示例
define('modal', ['jQuery', 'dialog'], function($, Dialog){
$('.modal').show();
Dialog.open();
});
應(yīng)用
AMD規(guī)范不是JavaScript原生支持，所以在進(jìn)行頁面開發(fā)時(shí)需要用到RequireJS。
RequireJS主要解決兩個(gè)問題：
- 解決了存在依賴關(guān)系的Js文件，依賴文件早于被依賴文件加載到瀏覽器的問題。
- 解決了js加載的時(shí)候?yàn)g覽器會(huì)停止頁面渲染，加載文件越多，頁面失去響應(yīng)時(shí)間越長(zhǎng)的問題。
語法：
- 定義模塊
define：
define(id?, dependencies?, factory) - 加載模塊
require：
require([dependencies], function(){})
dependencies： 數(shù)組，表示所依賴的模塊。
function： 回調(diào)函數(shù)，當(dāng)前面指定模塊全部加載成功之后，再被調(diào)用。加載的模塊以參數(shù)的形式傳入該函數(shù)，這樣在回調(diào)函數(shù)內(nèi)部可使用這些模塊。
示例：
// 定義模塊 myModule.js
define(['dependency'], function(){
var name = 'Byron';
function printName(){
console.log(name);
}
return {
printName: printName
};
});
// 加載模塊
require(['myModule'], function (my){
my.printName(); });
require()函數(shù)在加載依賴函數(shù)時(shí)是異步加載，瀏覽器不會(huì)失去響應(yīng)。只有在依賴模塊都加載成功之后才會(huì)執(zhí)行回調(diào)函數(shù)，這樣解決了依賴性的問題。
CMD規(guī)范
CMD（Common Module Definition）是 SeaJS推廣過程中產(chǎn)生的。在模塊定義方式和模塊加載時(shí)機(jī)上與AMD規(guī)范有所不同
語法
define(id?, deps?, factory)
- id：推崇一個(gè)模塊就是一個(gè)文件。所以經(jīng)常使用文件名作為id
- deps： 推崇依賴就近。因此一般不在參數(shù)中寫依賴，而是在factory中寫。
- factory：
function(require, exports, module)
require(id)（方法）：接受模塊標(biāo)識(shí)作為唯一參數(shù)，用來獲取其他模塊提供的接口。
exports（對(duì)象）：用來向外提供模塊接口。
module（對(duì)象）：存儲(chǔ)與當(dāng)前模塊關(guān)聯(lián)的屬性和方法。
示例
// 定義模塊 myModule.js
//define(factory)
define(function(require, exports, module) {
var $ = require('jquery.js')
$('div').addClass('active');
});
// 加載模塊
seajs.use(['myModule.js'], function(my){
});
AMD與CMD區(qū)別
在模塊定義時(shí)對(duì)依賴的處理不同：
AMD推崇依賴前置，在定義模塊的時(shí)候就聲明其依賴的模塊。
CMD推崇就近依賴，只有在用到時(shí)再聲明。
區(qū)別只是語法上的不同，兩者都是異步加載模塊，只是對(duì)依賴模塊的執(zhí)行時(shí)機(jī)處理不同。
AMD是提前加載完全部模塊并執(zhí)行，哪個(gè)先加載完就先執(zhí)行哪個(gè)，但主邏輯在所有依賴加載完后才執(zhí)行。
CMD是提前加載，但并不提前執(zhí)行，在主邏輯需要時(shí)再執(zhí)行。
