學(xué)習(xí)JavaScript設(shè)計(jì)模式(單例模式)
單例模式的定義:保證一個(gè)類僅有一個(gè)實(shí)例,并提供一個(gè)訪問(wèn)它的全局訪問(wèn)點(diǎn)。
單例模式是一種常用的模式,有一些對(duì)象我們往往只需要一個(gè),比如線程池、全局緩存、瀏覽器的window對(duì)象。在js開(kāi)發(fā)中,單例模式的用途同樣非常廣泛。試想一下,當(dāng)我們單擊登錄按鈕的時(shí)候,頁(yè)面中會(huì)出現(xiàn)一個(gè)登錄框,而這個(gè)浮窗是唯一的,無(wú)論單擊多少次登錄按鈕,這個(gè)浮窗只會(huì)被創(chuàng)建一次。因此這個(gè)登錄浮窗就適合用單例模式。
1、單例模式的使用場(chǎng)景
在使用一種模式之前,我們最好要知道,這種模式的使用場(chǎng)景。用了這么久的單例模式,竟全然不知!用它具體有哪些好處呢?
1).可以用它來(lái)劃分命名空間(這個(gè)就是就是經(jīng)常用的了)
2).利用分支技術(shù)來(lái)封裝瀏覽器之間的差異(這個(gè)還真沒(méi)用過(guò),挺新鮮)
3).借助單例模式,可以把代碼組織的更為一致,方便閱讀與維護(hù)(這個(gè)也用過(guò)了)
2、最基本的單例模式
最簡(jiǎn)單的單例其實(shí)就是一個(gè)對(duì)象字面量。它把一批有一定關(guān)聯(lián)的方法和屬性組織在一起。
var Singleton = { attr1: true , attr2: 10 , method1 : function(){ alert('我是方法1'); }, method2 : function(){ alert('我是方法2'); } };
這個(gè)對(duì)象可以被修改。你可以添加屬性和方法。你也可以用delete運(yùn)算符刪除現(xiàn)有成員。這實(shí)際上違背了面向?qū)ο笤O(shè)計(jì)的一條原則:類可以被擴(kuò)展,但不應(yīng)該被修改。如果某些變量需要保護(hù),那么可以將其定義在閉包中。
對(duì)象字面量只是創(chuàng)建單例的方法之一。也并非所有的對(duì)象字面量都是單例,那些只是用來(lái)模仿關(guān)聯(lián)數(shù)組或容納數(shù)據(jù)的對(duì)象字面量顯然不是單例。
3、借用閉包創(chuàng)建單例
閉包主要的目地 保護(hù)數(shù)據(jù)
// 命名空間 var BHX = {} ; BHX.Singleton = (function(){ // 添加自己的私有成員 var a1 = true ; var a2 = 10 ; var f1 = function(){ alert('f1'); } var f2 = function(){ alert('f2'); } // 把塊級(jí)作用域里的執(zhí)行結(jié)果賦值給我的單例對(duì)象 return { attr1: a1 , attr2: a2 , method1 : function(){ return f1(); }, method2 : function(){ return f2(); } } ; })(); alert(BHX.Singleton.attr1); BHX.Singleton.method1();
這種單例模式又稱模塊模式,指的是它可以把一批相關(guān)的方法和屬性組織為模塊并起到劃分命名空間的作用。
4、單例模式用于劃分命名空間
1)、防止全局聲明的修改
/*using a namespace*/ var BHX = {}; BHX.Singleton = { attr1: true , attr2: 10 , method1 : function(){ alert('我是方法1'); }, method2 : function(){ alert('我是方法2'); } }; BHX.Singleton.attr1; var attr1 = false;
這樣以來(lái),即使我們?cè)谕饷媛暶髁讼嗤淖兞浚材茉谝欢ǔ潭壬戏乐筧ttr1的被修改。
2)、防止其它來(lái)源代碼的修改
現(xiàn)在網(wǎng)頁(yè)上的JavaScript代碼往往不止用一個(gè)來(lái)源,什么庫(kù)代碼、廣告代碼和徽章代碼。為了避免與自己代碼的沖突,可以定義一個(gè)包含自己所有代碼的對(duì)象。
var XGP = {}; XGP.Common = { //A singleton with common methods used by all objects and modules } XGP.ErrorCodes = { //An object literal used to store data } XGP.PageHandler = { //A singleton with page specific methods and attributes. }
3)、用作專用代碼封裝
在擁有許多網(wǎng)頁(yè)的網(wǎng)站中,有些代碼是所有網(wǎng)頁(yè)都要用到的,他們通常被存放在獨(dú)立的文件中;而有些代碼則是某個(gè)網(wǎng)頁(yè)專用的,不會(huì)被用到其他地方。最好把這兩種代碼分別包裝在自己的單例對(duì)象中。
我們經(jīng)常要用Javascript為表單添加功能。出于平穩(wěn)退化方面的考慮,通常先創(chuàng)建一個(gè)不依賴于Javascript的、使用普通提交機(jī)制完成任務(wù)的純HTML網(wǎng)頁(yè)。
XGP.RegPage = { FORM_ID: 'reg-form', OUTPUT_ID: 'reg-result', handleSubmit: function(e){ e.preventDefault(); //stop the normal form submission var data = {}; var inputs = XGP.RegPage.formEl.getElementByTagName('input'); for(var i=0, len=inputs.length; i<len; i++){ data[inputs[i].name] = inputs[i].value; } XGP.RegPage.sendRegistration(data); }, sendRegistration: function(data){ //make an xhr request and call displayResult() when response is recieved ... }, displayResult: function(response){ XGP.RegPage.outputEl.innerHTML = response; }, init: function(){ XGP.RegPage.formEl =$(XGP.RegPage.Form_ID); XGP.RegPage.outputEl = $(XGP.RegPage.OUTPUT_ID); //hijack the form submission addEvent(XGP.RegPage.formEl, 'submit', XGP.RegPage.handleSubmit); } } //invoke initialization method after the page load addLoadEvent(XGP.RegPage.init);
5、惰性單例
前面所講的單例模式又一個(gè)共同點(diǎn):?jiǎn)卫龑?duì)象都是在腳本加載時(shí)被創(chuàng)建出來(lái)。對(duì)于資源密集的或配置開(kāi)銷甚大的單例,更合理的做法是將其實(shí)例化推遲到需要使用他的時(shí)候。
這種技術(shù)就是惰性加載(lazy loading)。
實(shí)現(xiàn)步驟如下:
1).將所有代碼移到constructor方法中
2).全權(quán)控制調(diào)用時(shí)機(jī)(正是getInstance所要做的)
XGP.lazyLoading = (function(){ var uniqInstance; function constructor(){ var attr = false; function method(){ } return { attrp: true, methodp: function(){ } } } return { getInstance: function(){ if(!uniqInstance){ uniqInstance = constructor(); } return uniqInstance; } } })();
6、分支技術(shù)
分支是一種用來(lái)把瀏覽器間的差異封裝在運(yùn)行期間進(jìn)行設(shè)置的動(dòng)態(tài)方法中的技術(shù)。
// 分支單例 (判斷程序的分支 <瀏覽器差異的檢測(cè)>) var Ext = {} ; var def = false ; Ext.More = (function(){ var objA = { // 火狐瀏覽器 內(nèi)部的一些配置 attr1:'FF屬性1' // 屬性1 // 屬性2 // 方法1 // 方法2 } ; var objB = { // IE瀏覽器 內(nèi)部的一些配置 attr1:'IE屬性1' // 屬性1 // 屬性2 // 方法1 // 方法2 } ; return (def) ?objA:objB; })(); alert(Ext.More.attr1);
比如說(shuō),如果網(wǎng)站中要頻繁使用xhr,每次調(diào)用都要再次運(yùn)行瀏覽器嗅探代碼,這樣會(huì)嚴(yán)重缺乏效率。更有效的做法是在腳本加載時(shí)一次性地確定針對(duì)瀏覽器的代碼。這正是分支技術(shù)所做的事情。當(dāng)然,分支技術(shù)并不總是更高效的選擇,在兩個(gè)或者多個(gè)分支中只有一個(gè)分支被用到了,其他分支就占用了內(nèi)存。
在考慮是否使用分支技術(shù)的時(shí)候,必須在縮短時(shí)間和占用更多內(nèi)存這一利一弊之間權(quán)衡一下。
下面利用分支技術(shù)實(shí)現(xiàn)XHR:
var XHR = (function(){ var standard = { createXhrObj: function(){ return new XMLHttpRequest(); } }; var activeXNew = { createXhrObj: function(){ return new ActiveXObject('Msxml2.XMLHTTP'); } }; var activeXOld = { createXhrObj: function(){ return new ActiveXObject('Microsoft.XMLHTTP'); } }; var testObj; try{ testObj = standard.createXhrObj(); return testObj; }catch(e){ try{ testObj = activeXNew.createXhrObj(); return testObj; }catch(e){ try{ testObj = activeXOld.createXhrObj(); return testObj; }catch(e){ throw new Error('No XHR object found in this environment.'); } } } })();
7、單例模式的弊端
了解了這么多關(guān)于單例的知識(shí),我們?cè)賮?lái)看看它的弊端。
由于單例模式提供的是一種單點(diǎn)訪問(wèn),所以它有可能導(dǎo)致模塊間的強(qiáng)耦合。因此也就不利于單元測(cè)試了。
綜上,單例還是留給定義命名空間和實(shí)現(xiàn)分支型方法這些用途。
通過(guò)七點(diǎn)不同方面對(duì)單例模式的介紹,大家是不是對(duì)單例模式有了更深入的了解,希望這篇文章可以幫到大家。
- JavaScript設(shè)計(jì)模式之單例模式實(shí)例
- JavaScript實(shí)現(xiàn)設(shè)計(jì)模式中的單例模式的一些技巧總結(jié)
- JavaScript設(shè)計(jì)模式之單例模式詳解
- js設(shè)計(jì)模式之單例模式原理與用法詳解
- JS 設(shè)計(jì)模式之:?jiǎn)卫J蕉x與實(shí)現(xiàn)方法淺析
- javascript設(shè)計(jì)模式 – 單例模式原理與應(yīng)用實(shí)例分析
- JavaScript 設(shè)計(jì)模式 安全沙箱模式
- JavaScript設(shè)計(jì)模式之觀察者模式(發(fā)布者-訂閱者模式)
- JavaScript 設(shè)計(jì)模式之組合模式解析
- javascript設(shè)計(jì)模式之解釋器模式詳解
- 常用的Javascript設(shè)計(jì)模式小結(jié)
- JavaScript設(shè)計(jì)模式---單例模式詳解【四種基本形式】
相關(guān)文章
Bootstrap學(xué)習(xí)筆記之css樣式設(shè)計(jì)(1)
這篇文章主要為大家詳細(xì)介紹了bootstrap學(xué)習(xí)筆記之css樣式設(shè)計(jì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-06-06微信小程序局部刷新觸發(fā)整頁(yè)刷新效果的實(shí)現(xiàn)代碼
這篇文章主要介紹了微信小程序局部刷新觸發(fā)整頁(yè)刷新效果的實(shí)現(xiàn)代碼,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11JS只能輸入正整數(shù)的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇JS只能輸入正整數(shù)的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10Javascript 實(shí)現(xiàn)廣告后加載 可加載百度谷歌聯(lián)盟廣告
本文主要介紹一種新的廣告后加載的方式,支持自定義HTML廣告、百度聯(lián)盟廣告和谷歌聯(lián)盟廣告。這種方式在頁(yè)面加載完成后執(zhí)行,不影響內(nèi)容的顯示,對(duì)用戶更加友好。2016-05-05javascript回車完美實(shí)現(xiàn)tab切換功能
這篇文章主要介紹了javascript通過(guò)回車實(shí)現(xiàn)tab切換功能,需要的朋友可以參考下2014-03-03JS中使用mailto實(shí)現(xiàn)將用戶在網(wǎng)頁(yè)中輸入的內(nèi)容傳遞到本地郵件客戶端
這篇文章主要介紹了mailto實(shí)現(xiàn)將用戶在網(wǎng)頁(yè)中輸入的內(nèi)容傳遞到本地郵件客戶端的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-10-10用roll.js實(shí)現(xiàn)的圖片自動(dòng)滾動(dòng)+鼠標(biāo)觸動(dòng)的特效
用roll.js實(shí)現(xiàn)的圖片自動(dòng)滾動(dòng)+鼠標(biāo)觸動(dòng)的特效...2007-03-03JS HTML5 音樂(lè)天氣播放器(Ajax獲取天氣信息)
寫個(gè)播放器應(yīng)付復(fù)習(xí),因?yàn)锳jax涉及到跨域獲取天氣信息,有兩個(gè)版本,一個(gè)是直接跨域,IE10支持,其他的瀏覽器要改配置2013-05-05