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