示例代碼地址

1. 為什么要使用模塊化？

• 1.解決命名沖突
• 2.代碼解耦，提高復用性
• 3.提高代碼可讀性
• 3.方便管理，提高代碼的可維護性

2. CMD、AMD、CommonJS 規范分別指什么？有哪些應用

(1) CommonJS

node.js的模塊系統，就是參照CommonJS規范實現的。
1.定義模塊 根據CommonJS規范，一個單獨的文件就是一個模塊。每一個模塊都是一個單獨的作用域，也就是說，在該模塊內部定義的變量，無法被其他模塊讀取，除非定義為global對象的屬性
2.模塊輸出： 模塊只有一個出口，module.exports對象，我們需要把模塊希望輸出的內容放入該對象
3.加載模塊： 加載模塊使用require方法，該方法讀取一個文件并執行，返回文件內部的module.exports對象

CommonJS規范使用示例:
目錄結構：

|- CommonJS
  |- moduleA.js
  |- moduleB.js
  |- main.js

moduleA.js:

// 模塊定義 moduleA.js
exports.sum=function(){
    var value=0, i=0, len=arguments.length;
    while(i<len){
        value +=arguments[i++];
    }
    return value;
}

moduleB.js:

// 模塊定義 moduleB.js
var sum=require("./moduleA.js").sum;
function increase(val){
    return sum(val,1);
}
function decrease(val){
    return sum(val, -1);
}
module.exports={
    increase:increase,
    decrease:decrease
}

main.js:

// main.js
var sum=require("./moduleA.js").sum;
var increase=require("./moduleB.js").increase;
var decrease=require("./moduleB.js").decrease;

console.log(sum(6,7,8));   //21
console.log(increase(100));   //101
console.log(decrease(100));   //99

注意：以上代碼在瀏覽器端是無法運行的，需要在node端運行。在gitBash中運行命令node main.js 即可看到結果。

(2) AMD

AMD是"Asynchronous Module Definition"的縮寫，意思就是"異步模塊定義"。所有依賴某個模塊的語句，都定義在一個回調函數中，等到加載完成之后，這個回調函數才會運行。
由于不是JavaScript原生支持，使用AMD規范進行頁面開發需要用到對應的庫函數，也就是RequireJS，實際上AMD 是 RequireJS 在推廣過程中對模塊定義的規范化的產出。
requireJS定義了一個函數 define，它是全局變量，用來定義模塊
語法：define(id?, dependencies?, factory);

• id：定義中模塊的名字，可選；如果沒有提供該參數，模塊的名字應該默認為模塊加載器請求的指定腳本的名字(如dialog.js)
• dependencies：是一個當前模塊依賴的模塊名稱數組,可以省略；
• factory：工廠方法，模塊初始化要執行的函數或對象。如果為函數，它應該只被執行一次。如果是對象，此對象應該為模塊的輸出值。

AMD規范使用示例:
目錄結構：

|- AMD
  |- index.html
  |- js
    |- moduleA.js
    |- moduleB.js
    |- main.js

moduleA.js:

// 定義模塊 moduleA.js
define(function(){
    function sum(){
        var total=0, i=0, len=arguments.length;
        while(i<len){
            total +=arguments[i++];
        }
        return total;
    };
    return {sum:sum};
})

moduleB.js

// 定義模塊 moduleB.js ,模塊B依賴于模塊A
define(["moduleA"],function(a){
    function increase(val){
        return a.sum(val,1);
    }
    function decrease(val){
        return a.sum(val, -1);
    }
    return {
        increase:increase,
        decrease:decrease
    }
})

main.js:

// 主模塊main.js, main.js依賴于模塊A和模塊B
define(["moduleA","moduleB"],function(a,b){
    var sum=a.sum;
    var increase=b.increase;
    var decrease=b.decrease;

    console.log(sum(6,7,8));   //21
    console.log(increase(100));   //101
    console.log(decrease(100));   //99
})

index.html:

<!--index.html-->
<!--先加載RequireJS-->
<script src="http://apps.bdimg.com/libs/require.js/2.1.11/require.min.js"></script>
<script type="text/javascript">
    requirejs.config({
        baseUrl:"js"
    })
    requirejs(["main"]);   //加載入口模塊
</script>

控制臺查看結果：

(3) CMD

CMD即Common Module Definition,通用模塊定義。
CMD規范是國內發展出來的，就像AMD有個requireJS，CMD有個瀏覽器的實現SeaJS，SeaJS要解決的問題和requireJS一樣，只不過在模塊定義方式和模塊加載解析時機上有所不同。
語法：define(id?, deps?, factory)

因為CMD推崇：

• 1.一個文件一個模塊，所以經常就用文件名作為模塊id
• 2.CMD推崇依賴就近，所以一般不在define的參數中寫依賴，在factory中寫。

factory有三個參數function(require, exports, module)
其中require 是一個方法，接受 模塊標識 作為唯一參數，用來獲取其他模塊提供的接口；exports是一個對象，用來向外提供模塊接口;module是一個對象，上面存儲了與當前模塊相關聯的一些屬性和方法。

CMD規范使用示例:
目錄結構：

|- CMD
  |- index.html
  |- js
    |- moduleA.js
    |- moduleB.js
    |- main.js

moduleA.js:

// 定義模塊 moduleA.js
define(function(require,exports,module){
    exports.sum=function(){
        var total=0, i=0, len=arguments.length;
        while(i<len){
            total +=arguments[i++];
        }
        return total;   
    }
})

moduleB.js :

// 定義模塊 moduleB.js 
define(function(require,exports,module){
    var sum=require("moduleA").sum;
    exports.increase=function(val){
        return sum(val,1);
    }
    exports.decrease=function(val){
        return sum(val,-1);
    }
})

main.js:

//定義主模塊main.js
define(function(require,exports,module){
    var sum=require("moduleA").sum;
    var increase=require("moduleB").increase;
    var decrease=require("moduleB").decrease;
    
    console.log(sum(4,5,6));   //15
    console.log(increase(150));   //151
    console.log(decrease(150));   //149

})

<!--index.html-->
<!--先加載RequireJS-->
<script src="http://apps.bdimg.com/libs/require.js/2.1.11/require.min.js"></script>
<script type="text/javascript">
  requirejs.config({
    baseUrl:"js"
  })
  requirejs(["main"]);   //加載入口模塊
</script>

控制臺查看結果：

(4) AMD與CMD區別

• 1.AMD推崇依賴前置，在定義模塊的時候就要聲明其依賴的模塊
• 2.CMD推崇就近依賴，只有在用到某個模塊的時候再去require

最明顯的區別就是在模塊定義時對依賴的處理不同:

• 同樣都是異步加載模塊，AMD在加載模塊完成后就會執行該模塊，所有模塊都加載執行完后會進入require的回調函數，執行主邏輯，這樣的效果就是依賴模塊的執行順序和書寫順序不一定一致，看網絡速度，哪個先下載下來，哪個先執行，但是主邏輯一定在所有依賴加載完成后才執行。
• CMD加載完某個依賴模塊后并不執行，只是下載而已，在所有依賴模塊加載完成后進入主邏輯，遇到require語句的時候才執行對應的模塊，這樣模塊的執行順序和書寫順序是完全一致的。
  這種區別各有優劣，只是語法上的差距，而且requireJS和SeaJS都支持對方的寫法。