一、 為什么要使用模塊化？

• 解決命名沖突
• 解決依賴管理
• 提高代碼可讀性
• 代碼解耦,提高復用性

二、CMD、AMD、CommonJS 規(guī)范分別指什么？有哪些應用

CommonJS 規(guī)范

CommonJS是服務器端模塊的規(guī)范，Node.js采用了這個規(guī)范。Node.JS首先采用了js模塊化的概念。

1. 定義模塊： 一個單獨的文件就是一個模塊，每個模塊都是單獨的作用域。在該模塊內(nèi)部所定義的變量，其他模塊無法讀取，除非是定義為global對象的屬性。
2. 模塊輸出： 模塊只有一個出口，那就是module.exports對象。把要輸出的內(nèi)容放入該對象。
3. 加載模塊： 加載模塊使用require方法，該方法讀取一個文件并執(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方法讀取一個文件并執(zhí)行，返回文件內(nèi)部的module.exports對象
var nameModule = require('./myModel.js');

nameModule.printName();

關于路徑：一般情況可以省略js擴展名。可以用相對路徑也可以使用絕對路徑。（若該模塊是系統(tǒng)內(nèi)置模塊，可以省略路徑直接使用模塊名。）
可以發(fā)現(xiàn)，require是同步的。在服務器端使用時很順暢，但在瀏覽器端使用時遇到了很大困難。

我們可以通過使用標準模板封裝模塊定義來解決。有兩種“套路”：

AMD 規(guī)范

AMD(Asynchronous Module Definition, 異步模塊定義) 指定一種機制，在該機制下模塊和依賴可以異步加載。這對瀏覽器端的異步加載尤其適用。
實現(xiàn)AMD的庫有RequireJS 、curl 、Dojo 等。

語法

define(id?, dependencies?, factory)

• id（可選）：用來定義模塊的標識，若為空，就默認為模塊加載器請求的指定腳本的名字。
• dependencies（可選）：是當前模塊依賴的，已被模塊定義的模塊標識的數(shù)組字面量。默認為["require", "exports", "module"]。
• factory：模塊初始化要執(zhí)行的函數(shù)或對象。如果是函數(shù)，則只執(zhí)行一次，若是對象，則對象應是模塊的輸出值。

示例

define('modal', ['jQuery', 'dialog'], function($, Dialog){
    $('.modal').show();
    Dialog.open();
});

應用

AMD規(guī)范不是JavaScript原生支持，所以在進行頁面開發(fā)時需要用到RequireJS。

RequireJS主要解決兩個問題：

1. 解決了存在依賴關系的Js文件，依賴文件早于被依賴文件加載到瀏覽器的問題。
2. 解決了js加載的時候瀏覽器會停止頁面渲染，加載文件越多，頁面失去響應時間越長的問題。

語法：

1. 定義模塊 define：
   define(id?, dependencies?, factory)
2. 加載模塊 require：
   require([dependencies], function(){})
   dependencies： 數(shù)組，表示所依賴的模塊。
   function： 回調(diào)函數(shù)，當前面指定模塊全部加載成功之后，再被調(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ù)時是異步加載，瀏覽器不會失去響應。只有在依賴模塊都加載成功之后才會執(zhí)行回調(diào)函數(shù)，這樣解決了依賴性的問題。

CMD規(guī)范

CMD（Common Module Definition）是 SeaJS推廣過程中產(chǎn)生的。在模塊定義方式和模塊加載時機上與AMD規(guī)范有所不同

語法

define(id?, deps?, factory)

• id：推崇一個模塊就是一個文件。所以經(jīng)常使用文件名作為id
• deps： 推崇依賴就近。因此一般不在參數(shù)中寫依賴，而是在factory中寫。
• factory：

function(require, exports, module)

require(id)（方法）：接受模塊標識作為唯一參數(shù)，用來獲取其他模塊提供的接口。
exports（對象）：用來向外提供模塊接口。
module（對象）：存儲與當前模塊關聯(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ū)別

在模塊定義時對依賴的處理不同：
AMD推崇依賴前置，在定義模塊的時候就聲明其依賴的模塊。
CMD推崇就近依賴，只有在用到時再聲明。

區(qū)別只是語法上的不同，兩者都是異步加載模塊，只是對依賴模塊的執(zhí)行時機處理不同。
AMD是提前加載完全部模塊并執(zhí)行，哪個先加載完就先執(zhí)行哪個，但主邏輯在所有依賴加載完后才執(zhí)行。
CMD是提前加載，但并不提前執(zhí)行，在主邏輯需要時再執(zhí)行。