示例代碼地址

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

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

2. CMD刁卜、AMD、CommonJS 規(guī)范分別指什么礁哄？有哪些應(yīng)用

(1) CommonJS

node.js的模塊系統(tǒng)长酗，就是參照CommonJS規(guī)范實(shí)現(xiàn)的。
1.定義模塊 根據(jù)CommonJS規(guī)范桐绒，一個單獨(dú)的文件就是一個模塊夺脾。每一個模塊都是一個單獨(dú)的作用域，也就是說茉继，在該模塊內(nèi)部定義的變量咧叭，無法被其他模塊讀取，除非定義為global對象的屬性
2.模塊輸出： 模塊只有一個出口烁竭，module.exports對象菲茬，我們需要把模塊希望輸出的內(nèi)容放入該對象
3.加載模塊： 加載模塊使用require方法，該方法讀取一個文件并執(zhí)行派撕，返回文件內(nèi)部的module.exports對象

CommonJS規(guī)范使用示例:
目錄結(jié)構(gòu)：

|- 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

注意：以上代碼在瀏覽器端是無法運(yùn)行的婉弹，需要在node端運(yùn)行。在gitBash中運(yùn)行命令node main.js 即可看到結(jié)果终吼。

(2) AMD

AMD是"Asynchronous Module Definition"的縮寫商佛，意思就是"異步模塊定義"。所有依賴某個模塊的語句姆打，都定義在一個回調(diào)函數(shù)中良姆，等到加載完成之后，這個回調(diào)函數(shù)才會運(yùn)行幔戏。
由于不是JavaScript原生支持玛追，使用AMD規(guī)范進(jìn)行頁面開發(fā)需要用到對應(yīng)的庫函數(shù)，也就是RequireJS评抚，實(shí)際上AMD 是 RequireJS 在推廣過程中對模塊定義的規(guī)范化的產(chǎn)出豹缀。
requireJS定義了一個函數(shù) define，它是全局變量慨代，用來定義模塊
語法：define(id?, dependencies?, factory);

• id：定義中模塊的名字，可選啸如；如果沒有提供該參數(shù)侍匙，模塊的名字應(yīng)該默認(rèn)為模塊加載器請求的指定腳本的名字(如dialog.js)
• dependencies：是一個當(dāng)前模塊依賴的模塊名稱數(shù)組,可以省略；
• factory：工廠方法，模塊初始化要執(zhí)行的函數(shù)或?qū)ο笙氚怠Ｈ绻麨楹瘮?shù)妇汗，它應(yīng)該只被執(zhí)行一次。如果是對象说莫，此對象應(yīng)該為模塊的輸出值杨箭。

AMD規(guī)范使用示例:
目錄結(jié)構(gòu)：

|- 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>

控制臺查看結(jié)果：

(3) CMD

CMD即Common Module Definition,通用模塊定義储狭。
CMD規(guī)范是國內(nèi)發(fā)展出來的互婿，就像AMD有個requireJS，CMD有個瀏覽器的實(shí)現(xiàn)SeaJS辽狈，SeaJS要解決的問題和requireJS一樣慈参，只不過在模塊定義方式和模塊加載解析時機(jī)上有所不同。
語法：define(id?, deps?, factory)

因為CMD推崇：

• 1.一個文件一個模塊刮萌，所以經(jīng)常就用文件名作為模塊id
• 2.CMD推崇依賴就近驮配，所以一般不在define的參數(shù)中寫依賴，在factory中寫着茸。

factory有三個參數(shù)function(require, exports, module)
其中require 是一個方法壮锻，接受 模塊標(biāo)識 作為唯一參數(shù)，用來獲取其他模塊提供的接口涮阔；exports是一個對象猜绣，用來向外提供模塊接口;module是一個對象，上面存儲了與當(dāng)前模塊相關(guān)聯(lián)的一些屬性和方法澎语。

CMD規(guī)范使用示例:
目錄結(jié)構(gòu)：

|- 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>

控制臺查看結(jié)果：

(4) AMD與CMD區(qū)別

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

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

• 同樣都是異步加載模塊擅羞，AMD在加載模塊完成后就會執(zhí)行該模塊尸变，所有模塊都加載執(zhí)行完后會進(jìn)入require的回調(diào)函數(shù)，執(zhí)行主邏輯减俏，這樣的效果就是依賴模塊的執(zhí)行順序和書寫順序不一定一致召烂，看網(wǎng)絡(luò)速度，哪個先下載下來娃承，哪個先執(zhí)行奏夫，但是主邏輯一定在所有依賴加載完成后才執(zhí)行。
• CMD加載完某個依賴模塊后并不執(zhí)行历筝，只是下載而已酗昼，在所有依賴模塊加載完成后進(jìn)入主邏輯，遇到require語句的時候才執(zhí)行對應(yīng)的模塊梳猪，這樣模塊的執(zhí)行順序和書寫順序是完全一致的麻削。
  這種區(qū)別各有優(yōu)劣，只是語法上的差距，而且requireJS和SeaJS都支持對方的寫法呛哟。