教你如何寫模塊（循序漸進(jìn)）
寫法一：函數(shù)即模塊
function mod1(){
//the code of mod1
}
function mod2(){
//the code of mod2
}
//調(diào)用模塊1
mod1();
//調(diào)用模塊2
mod2();
優(yōu)點(diǎn)：簡(jiǎn)單易懂
缺點(diǎn)：每個(gè)函數(shù)都是全局的弯予，太多全局變量趴泌，容易代碼沖突
結(jié)論：只能放棄
寫法二：對(duì)象寫法
為解決方法一造成很多全局變量的問(wèn)題奥务，決定將mod1和mod2放在一個(gè)對(duì)象里
var module1 = new Object({
_count: 5,
func1: function(){
//the code of func1
},
func2: function(){
//the code of func2
}
});
//調(diào)用
module1.func1();
//弊端是對(duì)象里面的所有成員都會(huì)暴露在外面卓鹿，可以被修改檩电，比如_count
module1._count = 2;
優(yōu)點(diǎn)：減少了全局變量，代碼更加好管理
缺點(diǎn)：模塊里面所有的成員都是對(duì)外暴露的现斋，很多時(shí)候我們并不是這么想的喜最，我們希望私有變量的存在
結(jié)論：同樣只能放棄
寫法三：Immediately-invoked Function Expression, IIFE（立即函數(shù)寫法）
var module1 = (function(){
var _count = 5;
var func1 = function(){
//the code of func1
};
var func2 = function(){
//the code of func2q
};
//暴露要對(duì)外的接口
return {
func1: func1,
func2: func2
}
})();
//以上寫法，外部是無(wú)法訪問(wèn)到_count變量的
console.log(module1._count); //undefined
優(yōu)點(diǎn)：滿足了模塊的封裝庄蹋，有很好地控制了模塊內(nèi)部成員的訪問(wèn)權(quán)限
缺點(diǎn)：當(dāng)一個(gè)模塊很大瞬内，需要分成幾部分，或者一個(gè)模塊需要繼承另外一個(gè)模塊時(shí)限书，無(wú)法滿足
結(jié)論：進(jìn)行稍加優(yōu)化改造即可
改造一：放大模式
核心：將模塊作為參數(shù)傳進(jìn)來(lái)虫蝶，在“模塊拓建”完成后再返回
//此時(shí)需要給module1添加一個(gè)方法三
var module1 = (function(mod){
//添加func3代碼
mod.func3 = function(){
//code of func3
};
return mod;
})(module1);
缺點(diǎn)：在瀏覽器環(huán)境中，模塊的各個(gè)部分很可能都是從網(wǎng)上獲取的蔗包，哪個(gè)部分先加載完可能我們不是很清楚秉扑，所以有可能加載到一個(gè)不存在空對(duì)象慧邮。
改造二： 寬放大模式
為了避免加載到一個(gè)不存在的空對(duì)象调限，采用以下寫法
文件a.js->存放module1的部分代碼
var module1 = (function(mod){
var _count = 0;
mod.func1 = function(){
//code of func1
};
return mod;
})(window.module1 || {});
文件b.js->存放module1的另外一部分代碼
var module1 = (function(mod){
mod.func2 = function(){
//code of func2
};
return mod;
})(module1);
這樣就不用擔(dān)心a.js和b.js哪個(gè)先加載完哪個(gè)慢加載完了，模塊代碼都不會(huì)丟失了误澳。
引入全局變量
模塊的一大特性是獨(dú)立耻矮，模塊內(nèi)部代碼最好不要和程序的其他部分直接交互，這樣能夠降低模塊和其他部分代碼的耦合性忆谓。
當(dāng)需要在模塊內(nèi)調(diào)用其他變量裆装，需要將其他全局變量輸入模塊
var module1 = (function(mod, $){
var _count = 5;
mod.renderDom = function(){
$('cnt').html('<p>just try!</p>');
};
})(window.module1 || {}, jQuery);
完
