從javascript對象創(chuàng)建說起
說起Module(模塊)模式，可能一些剛剛接觸javascript的同學(xué)還是覺得比較陌生，但是相信大多數(shù)學(xué)習(xí)javascript的同學(xué)都知道javascript對象創(chuàng)建的方式。最熟悉的莫過于構(gòu)造器方式創(chuàng)建對象。
Constructor(構(gòu)造器)模式
基本Construcor(構(gòu)造器)
function Car(model,year,miles){
this.model = model;
this.year = year;
this.miles = miles;
this.toShow = function(){
return this.model + "已經(jīng)行駛了:" +this.miles + "公里!";
}
}
//用法:
//可以創(chuàng)建car的新實例
var benz = new Car('Benz',2012,2000);
var bmw = new Car('bmw',2014,5000);
//打開瀏覽器控制臺(console)，查看這些對象上 調(diào)用toShow()方法的輸出
console.log(benz.toShow());
console.log(bmw.toShow());
什么是模式
模式很容易被復(fù)用
就像上面的構(gòu)造器模式,它是我們創(chuàng)建對象的一種模式,只要掌握了這種模式,它就是一種立即可用的解決方案。構(gòu)造器模式給我們提出了快速大量簡單的創(chuàng)建javascript對象的辦法。
模式是已經(jīng)驗證的解決方法
解決方案其實就是開發(fā)人員的經(jīng)驗和見解,他們?yōu)槎x和改進這些方法提供了幫助。從而形成了模式。比如構(gòu)造器模式，從上面的列子就可以看出，為了更好的實現(xiàn)對象的創(chuàng)建,構(gòu)造器模式在慢慢的改進,讓其達到最能適合創(chuàng)建javascript對象的形式
模式富有表達力
看到模式時,通常就表示有一個設(shè)置好的結(jié)構(gòu)和表達解決方案的詞匯。很簡單,做項目時,只要你說通過原型的構(gòu)造器模式創(chuàng)建對象。那么大家都知道你說的是什么意思。或者你說這個問題可以用觀察者模式去解決。只要大家都熟悉觀察者模式，那么在程序員之間就少了很多溝通的障礙。
所以模式也就是一種可以復(fù)用的解決方案而已，用來解決軟件設(shè)計中遇到的常見問題。
Module(模塊)模式
模塊是任何強大應(yīng)用程序架構(gòu)中不可或缺的一部分，它通常能夠幫我們清晰的分離和組織項目中的代碼單元。簡單的比喻的話，javascript中模塊就類似于C#中的命名空空間，Java中的包。
在javasctipt中,有幾種用于實現(xiàn)模塊的方法，包括
對象字面量表示法
Module模式
AMD模塊
CommonJS模塊
ECMAScript Harmony模塊
對象字面量
對象字面量的表示法相信大家都不會陌生，一個對象被描述為一組包含在大括號( { } )中，以逗號(,)分隔的name/value對，對象內(nèi)的名稱可以是字符串或者標識符，后面跟著一個冒號。對象中最后一個name/value對的后面不能加逗號，不然會導(dǎo)致出錯
var myObjectLiteral = {
variableKey:variableValue,
functionKey:function(){
//...
}
}
var myModule = {
myProperty:"someValue",
//對象字面量可以包含屬性和方法
//例如：可以聲明模塊的配置對象
//注意：無論是對象還是方法寫完，如果不是最后一個記得加上(,)
myConfig:{
useCaching:true,
language:'en'
},
//基本方法
myMethod:function(){
console.log('輸出基本信息');
},
//根據(jù)配置輸出信息
myMethod2:function(){
console.log('緩存是：' + (this.myConfig.useCaching)?'可用的':'不可用');
},
//重寫配置
myMethod3 = function(newConfig){
if(typeof newConfig === 'object'){
this.myConfig = newConfig;
console.log(this.myConfig.language);
}
}
};
//調(diào)用:
//輸出基本方法
myModule.myMethod();
//輸出:可用的
myModule.myMethod2();
//輸出：fr
myModule.myMethod3({
language:'fr',
useCaching:false
});
Module(模塊)模式
在javascript中，Module模式用于進一步模擬類的概念，通過這種方式，可以使一個單獨的對象擁有公有/私有方法和變量，從而屏蔽來自全局作用域的特殊部分。產(chǎn)生的結(jié)果是:函數(shù)名與在頁面上其他腳本定義的函數(shù)沖突的可能性降低。
私有
Module模式使用閉包封裝”私有”狀態(tài)和組織。它提供了一種包裝混合公有/私有方法和變量的方式，防止其泄露至全局作用域，并與別的開發(fā)人員的接口發(fā)生沖突。通過該模式，只需返回一個公有API，而其他的一切都維持在私有閉包里面。
這樣做為我們提供了一個屏蔽處理底層事件邏輯的整潔解決方案，同時只暴露一個接口供應(yīng)用程序的其他部分使用。該模式除了返回一個對象而不是一個函數(shù)之外，非常類似于一個立即調(diào)用的函數(shù)表達式(IIFE)。
購物車實例
代碼：
var basketModule = (function(){
//購物車數(shù)組,私有變量
var basket = [];
//私有函數(shù)
function doSomethingPrivate(){
//。。。
}
//私有函數(shù)
function doSomethingElsePrivate(){
//。。。
}
//返回一個暴露出的公有對象
return {
//添加item到購物車
addItems:function(values){
basket.push(values);
},
//獲得購物車里商品總數(shù)
getItemCount:function(){
return basket.length;
},
//私有函數(shù)的公有形式別名
doSomething:doSomethingPrivate,
//獲取所有商品的總價格
getTotal:function(){
var itemCount = this.getItemCount(),
total = 0;
while(itemCount--){
total += basket[itemCount].price;
}
return total;
}
};
})();
//用法:
basketModule.addItem({
item:"面包",
price:5
});
basketModule.addItem({
item:"可樂",
price:2
});
//2
console.log(basketModule.getItemCount());
//7
console.log(basketModule.getTotal());