麻豆小视频在线观看_中文黄色一级片_久久久成人精品_成片免费观看视频大全_午夜精品久久久久久久99热浪潮_成人一区二区三区四区

首頁(yè) > 語(yǔ)言 > JavaScript > 正文

學(xué)習(xí)JavaScript設(shè)計(jì)模式(單例模式)

2024-05-06 16:25:17
字體:
供稿:網(wǎng)友
這篇文章主要帶領(lǐng)大家學(xué)習(xí)JavaScript設(shè)計(jì)模式,其中重點(diǎn)介紹單例模式,舉例說明單例模式的技術(shù)、弊端等,對(duì)單例模式進(jìn)行詳細(xì)剖析,感興趣的小伙伴們可以參考一下
 

單例模式的定義:保證一個(gè)類僅有一個(gè)實(shí)例,并提供一個(gè)訪問它的全局訪問點(diǎn)。

單例模式是一種常用的模式,有一些對(duì)象我們往往只需要一個(gè),比如線程池、全局緩存、瀏覽器的window對(duì)象。在js開發(fā)中,單例模式的用途同樣非常廣泛。試想一下,當(dāng)我們單擊登錄按鈕的時(shí)候,頁(yè)面中會(huì)出現(xiàn)一個(gè)登錄框,而這個(gè)浮窗是唯一的,無論單擊多少次登錄按鈕,這個(gè)浮窗只會(huì)被創(chuàng)建一次。因此這個(gè)登錄浮窗就適合用單例模式。

1、單例模式的使用場(chǎng)景

在使用一種模式之前,我們最好要知道,這種模式的使用場(chǎng)景。用了這么久的單例模式,竟全然不知!用它具體有哪些好處呢?

1).可以用它來劃分命名空間(這個(gè)就是就是經(jīng)常用的了)

2).利用分支技術(shù)來封裝瀏覽器之間的差異(這個(gè)還真沒用過,挺新鮮)

3).借助單例模式,可以把代碼組織的更為一致,方便閱讀與維護(hù)(這個(gè)也用過了)

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ì)象字面量都是單例,那些只是用來模仿關(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;

這樣以來,即使我們?cè)谕饷媛暶髁讼嗤淖兞浚材茉谝欢ǔ潭壬戏乐筧ttr1的被修改。

2)、防止其它來源代碼的修改

現(xiàn)在網(wǎng)頁(yè)上的JavaScript代碼往往不止用一個(gè)來源,什么庫(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 loadaddLoadEvent(XGP.RegPage.init);

5、惰性單例

前面所講的單例模式又一個(gè)共同點(diǎn):?jiǎn)卫龑?duì)象都是在腳本加載時(shí)被創(chuàng)建出來。對(duì)于資源密集的或配置開銷甚大的單例,更合理的做法是將其實(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ù)

分支是一種用來把瀏覽器間的差異封裝在運(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);

比如說,如果網(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è)賮砜纯此谋锥恕?/p>

由于單例模式提供的是一種單點(diǎn)訪問,所以它有可能導(dǎo)致模塊間的強(qiáng)耦合。因此也就不利于單元測(cè)試了。

綜上,單例還是留給定義命名空間和實(shí)現(xiàn)分支型方法這些用途。

通過七點(diǎn)不同方面對(duì)單例模式的介紹,大家是不是對(duì)單例模式有了更深入的了解,希望這篇文章可以幫到大家。



注:相關(guān)教程知識(shí)閱讀請(qǐng)移步到JavaScript/Ajax教程頻道。
發(fā)表評(píng)論 共有條評(píng)論
用戶名: 密碼:
驗(yàn)證碼: 匿名發(fā)表

圖片精選

主站蜘蛛池模板: 欧美另类综合 | 午夜影院a | av手机在线免费播放 | 国产99久久久久久免费看 | 午夜精品成人一区二区 | 日韩av手机在线免费观看 | www.48xx.com| 成人短视频在线播放 | 玩偶姐姐在线观看免费 | 久久99国产精品视频 | 成人精品视频在线 | 国产午夜免费视频 | 国产一区二区三区视频在线观看 | 91精品国产777在线观看 | 91成人在线网站 | 精品久久久久久久久久中文字幕 | china对白普通话xxxx | 国产福利不卡一区二区三区 | 蜜桃视频在线观看视频 | 一级一级一级毛片 | 精品国产视频一区二区三区 | 久久蜜桃精品一区二区三区综合网 | 护士xxxx | 康妮卡特欧美精品一区 | 天海翼四虎精品正在播放 | 毛片大全免费 | 成人午夜在线观看视频 | 性视频久久| 麻豆视频国产在线观看 | 亚洲精品a在线观看 | 草草影院地址 | 伊久在线| 中国字幕av | 精品国产一区二区三区免费 | 免费播放欧美毛片 | 91成人免费视频 | 毛片a级毛片免费播放100 | 欧美日本不卡 | 亚州成人在线观看 | 一区二区三区日韩电影 | sesee99|