javascript設(shè)計(jì)模式之module(模塊)模式
模塊是任何強(qiáng)大應(yīng)用程序中不可或缺的一部分,它通常能幫助我們清晰地分離和組織項(xiàng)目中的代碼單元。
js中實(shí)現(xiàn)模塊的方法:
1.對(duì)象字面量表示法
2.Module模式
3.AMD模塊
4.CommonJS模塊
5.ECMAScript Harmony 模塊
對(duì)象字面量
對(duì)象字面量不需要使用new運(yùn)算符進(jìn)行實(shí)例化,但不能用在一個(gè)語句的開頭,因?yàn)殚_始的可能被解讀為一個(gè)塊的開始,在對(duì)象的外部,新成員可以使用如下賦值語句添加到對(duì)象字面量上,myModule.property = “someValue”。
var myModule = {
myProperty:"someValue",
myConfig:{
useCaching:true,
language:"en"
},
//基本方法
myMethod:function(){
//...
},
//根據(jù)當(dāng)前配置輸出信息
myMethod2:function(){
console.log("Caching is:"+(this.myConfing.useCaching) ? "enabled":"disabled");
},
//重寫當(dāng)前配置
myMethod3:function(newConfig) {
if(typeof newConfig ==="object"){
this.myConfig = newConfig;
console.log(this.myConfig.language);
}
},
};
myModule.myMethod3({
language:"fr",
usecaching:false
})
使用對(duì)象字面量有助于封裝和組織代碼。
在javascript中,Module模式用于進(jìn)一步模擬類的概念,通過這種方式,能夠使一個(gè)單獨(dú)的對(duì)象擁有公有/私有方法和變量,從而屏蔽來自全局作用域的特殊部分。
module模式使用了閉包封裝“私有”狀態(tài)和組織。它提供了一種包裝混合公有/私有方法和變量的方式,防止起泄露至全局作用域,并與別的開發(fā)人員的接口發(fā)生沖突。通過該模式,只需要返回一個(gè)公有的API,而其他的一切則都維持在私有閉包里。
在module模式內(nèi),由于閉包的存在,聲明變量和方法只在該模式內(nèi)部可用,但在返回對(duì)象上定義的變量和方法,則對(duì)外部使用者都是可用的
module模式的實(shí)現(xiàn)
var testModule = (function(){
var counter = 0;
return {
incrementCounter:function(){
return ++counter;
},
resetCounter:function(){
console.log("counter value prior to reset" + counter);
counter = 0;
}
}
})();
//增加計(jì)數(shù)器
testModule.incrementCounter();
//檢查計(jì)數(shù)器值并重置
testModule.resetCounter();
代碼的其他部分是無法直接讀取incrementCounter()和resetCounter()。counter變量實(shí)際上是完全與全局作用域隔離的,因此它表現(xiàn)的就像是一個(gè)私有變量,它的存在被局限于模塊的閉包內(nèi),因?yàn)槲ㄒ荒軌蛟L問其作用域的代碼就是這兩個(gè)函數(shù)。上述方法進(jìn)行了有效的命名空間設(shè)置,所以在測(cè)試代碼中,所有的調(diào)用都需要加上前綴。
//包含命名空間、公有、和私有變量的Module模式
var myNamspace = (function(){
//私有計(jì)數(shù)器變量
var myPrivateVar = 0;
//記錄素有參數(shù)的私有函數(shù)
var myPrivateMethod = function(foo){
console.log(foo);
};
return {
//公有變量
muPublicVar:"foo",
//調(diào)用私有變量和方法的公有函數(shù)
myPublicFunction:function(bar){
myPrivateVar++;
myPrivateMethod(bar);
}
}
})();
引用全局變量
JavaScript有一個(gè)特性叫做隱式全局變量,不管一個(gè)變量有沒有用過,JavaScript解釋器反向遍歷作用域鏈來查找整個(gè)變量的var聲明,如果沒有找到var,解釋器則假定該變量是全局變量,如果該變量用于了賦值操作的話,之前如果不存在的話,解釋器則會(huì)自動(dòng)創(chuàng)建它,這就是說在匿名閉包里使用或創(chuàng)建全局變量非常容易,不過比較困難的是,代碼比較難管理,尤其是閱讀代碼的人看著很多區(qū)分哪些變量是全局的,哪些是局部的。
不過,好在在匿名函數(shù)里我們可以提供一個(gè)比較簡(jiǎn)單的替代方案,我們可以將全局變量當(dāng)成一個(gè)參數(shù)傳入到匿名函數(shù)然后使用,相比隱式全局變量,它又清晰又快,我們來看一個(gè)例子:
//全局模塊
var myModule = (function(jQ,_){
function privateMethod1(){
jQ(".container").html(test);
}
return {
publicMethod:function(){
privateMethod1();
}
}
})(jQuery,_);
myModule.publicMethod();
//全局模塊
var myModule = (function(){
//模塊對(duì)象
var module = {};
privateVariale = "Hello";
function privateMethod(){
//...
}
module.publicproperty = "Foobar";
module.publiceMethod = function(){
}
return module;
})();
聲明全局變量,而不需要實(shí)現(xiàn)它們,并可以同樣地支持全局引入的概念
Module模式的還是存在一定的不足:
1. 由于我們?cè)L問公有和私有成員的方式不同,當(dāng)我們想改變可見性時(shí),實(shí)際上我們必須修改每一個(gè)曾經(jīng)使用過該成員的存在。
2. 我們無法訪問那些之后在方法里面添加的私有成員,
3. 無法為私有成員創(chuàng)建自動(dòng)化單元測(cè)試,bug需要修正補(bǔ)丁時(shí)會(huì)增加額外的復(fù)雜性。
4. 開發(fā)人員無法輕易地?cái)U(kuò)展私有方法
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
escape編碼與unescape解碼漢字出現(xiàn)亂碼的解決方法
這篇文章主要介紹了escape編碼與unescape解碼漢字出現(xiàn)亂碼的解決方法,需要的朋友可以參考下2014-07-07
JavaScript中判斷整數(shù)的多種方法總結(jié)
這篇文章主要介紹了JavaScript中判斷整數(shù)的多種方法總結(jié),本文總結(jié)了5種判斷整數(shù)的方法,如取余運(yùn)算符判斷、Math.round、Math.ceil、Math.floor判斷等,需要的朋友可以參考下2014-11-11
js實(shí)現(xiàn)適合新聞?lì)悎D片的輪播效果
本文主要分享了js實(shí)現(xiàn)適合新聞?lì)悎D片輪播效果的示例代碼,具有一定的參考價(jià)值,下面跟著小編一起來看下吧2017-02-02
微信小程序與后臺(tái)PHP交互的方法實(shí)例分析
這篇文章主要介紹了微信小程序與后臺(tái)PHP交互的方法,結(jié)合實(shí)例形式分析了微信小程序基于wx.request(OBJECT)方法與后臺(tái)php程序交互相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下2018-12-12
bootstrap導(dǎo)航條實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了bootstrap導(dǎo)航條的實(shí)現(xiàn)代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12
通過構(gòu)造函數(shù)實(shí)例化對(duì)象的方法
下面小編就為大家?guī)硪黄ㄟ^構(gòu)造函數(shù)實(shí)例化對(duì)象的方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06
JavaScript原始值與包裝對(duì)象的詳細(xì)介紹
這篇文章主要給大家介紹了關(guān)于JavaScript原始值與包裝對(duì)象的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
BootStrap 實(shí)現(xiàn)各種樣式的進(jìn)度條效果
這篇文章主要介紹了BootStrap 實(shí)現(xiàn)各種樣式的進(jìn)度條效果,代碼分為動(dòng)態(tài)和疊加兩種效果,需要的朋友可以參考下2016-12-12

