一搞莺、 為什么要使用模塊化息罗？
- 解決命名沖突
- 解決依賴管理
- 提高代碼可讀性
- 代碼解耦,提高復(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對象的屬性澈圈。
- 模塊輸出： 模塊只有一個(gè)出口彬檀，那就是
module.exports對象。把要輸出的內(nèi)容放入該對象瞬女。 - 加載模塊： 加載模塊使用
require方法窍帝，該方法讀取一個(gè)文件并執(zhí)行，返回文件內(nèi)部的module.exports對象诽偷。
示例
//模塊定義 myModel.js
var name = 'Byron';
function printName(){
console.log(name);
}
function printFullName(firstName){
console.log(firstName + name);
}
//要輸出的內(nèi)容放入module.exports對象
module.exports = {
printName: printName,
printFullName: printFullName
}
//加載模塊
//使用require方法讀取一個(gè)文件并執(zhí)行坤学，返回文件內(nèi)部的module.exports對象
var nameModule = require('./myModel.js');
nameModule.printName();
關(guān)于路徑：一般情況可以省略js擴(kuò)展名”剑可以用相對路徑也可以使用絕對路徑深浮。（若該模塊是系統(tǒng)內(nèi)置模塊，可以省略路徑直接使用模塊名眠冈。）
可以發(fā)現(xiàn)飞苇，require是同步的。在服務(wù)器端使用時(shí)很順暢蜗顽，但在瀏覽器端使用時(shí)遇到了很大困難布卡。
我們可以通過使用標(biāo)準(zhǔn)模板封裝模塊定義來解決。有兩種“套路”：
AMD 規(guī)范
AMD(Asynchronous Module Definition, 異步模塊定義) 指定一種機(jī)制雇盖，在該機(jī)制下模塊和依賴可以異步加載羽利。這對瀏覽器端的異步加載尤其適用。
實(shí)現(xiàn)AMD的庫有RequireJS 刊懈、curl 、Dojo 等娃闲。
語法
define(id?, dependencies?, factory)
- id（可選）：用來定義模塊的標(biāo)識虚汛，若為空，就默認(rèn)為模塊加載器請求的指定腳本的名字皇帮。
- dependencies（可選）：是當(dāng)前模塊依賴的卷哩，已被模塊定義的模塊標(biāo)識的數(shù)組字面量。默認(rèn)為
["require", "exports", "module"]属拾。 - factory：模塊初始化要執(zhí)行的函數(shù)或對象将谊。如果是函數(shù)，則只執(zhí)行一次渐白，若是對象尊浓，則對象應(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í)間越長的問題。
語法：
- 定義模塊
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ù)聘芜，用來獲取其他模塊提供的接口。
exports（對象）：用來向外提供模塊接口缝龄。
module（對象）：存儲(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í)對依賴的處理不同：
AMD推崇依賴前置，在定義模塊的時(shí)候就聲明其依賴的模塊叔壤。
CMD推崇就近依賴瞎饲，只有在用到時(shí)再聲明。
區(qū)別只是語法上的不同炼绘，兩者都是異步加載模塊嗅战，只是對依賴模塊的執(zhí)行時(shí)機(jī)處理不同。
AMD是提前加載完全部模塊并執(zhí)行俺亮，哪個(gè)先加載完就先執(zhí)行哪個(gè)驮捍，但主邏輯在所有依賴加載完后才執(zhí)行。
CMD是提前加載脚曾，但并不提前執(zhí)行东且，在主邏輯需要時(shí)再執(zhí)行。
