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

1、單例模式的使用場景

在使用一種模式之前，我們最好要知道，這種模式的使用場景。用了這么久的單例模式，竟全然不知！用它具體有哪些好處呢？

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

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

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

2、最基本的單例模式

最簡單的單例其實就是一個對象字面量。它把一批有一定關(guān)聯(lián)的方法和屬性組織在一起。

var Singleton = {
  attr1: true , 
  attr2: 10 ,
  method1 : function(){
    alert('我是方法1');
  },
  method2 : function(){
    alert('我是方法2');
  }
};

這個對象可以被修改。你可以添加屬性和方法。你也可以用delete運算符刪除現(xiàn)有成員。這實際上違背了面向?qū)ο笤O(shè)計的一條原則：類可以被擴(kuò)展，但不應(yīng)該被修改。如果某些變量需要保護(hù)，那么可以將其定義在閉包中。

對象字面量只是創(chuàng)建單例的方法之一。也并非所有的對象字面量都是單例，那些只是用來模仿關(guān)聯(lián)數(shù)組或容納數(shù)據(jù)的對象字面量顯然不是單例。

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');
  }        
  // 把塊級作用域里的執(zhí)行結(jié)果賦值給我的單例對象
  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;

這樣以來，即使我們在外面聲明了相同的變量，也能在一定程度上防止attr1的被修改。

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

現(xiàn)在網(wǎng)頁上的JavaScript代碼往往不止用一個來源，什么庫代碼、廣告代碼和徽章代碼。為了避免與自己代碼的沖突，可以定義一個包含自己所有代碼的對象。

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)頁的網(wǎng)站中，有些代碼是所有網(wǎng)頁都要用到的，他們通常被存放在獨立的文件中；而有些代碼則是某個網(wǎng)頁專用的，不會被用到其他地方。最好把這兩種代碼分別包裝在自己的單例對象中。

我們經(jīng)常要用Javascript為表單添加功能。出于平穩(wěn)退化方面的考慮，通常先創(chuàng)建一個不依賴于Javascript的、使用普通提交機(jī)制完成任務(wù)的純HTML網(wǎng)頁。

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、惰性單例

前面所講的單例模式又一個共同點：單例對象都是在腳本加載時被創(chuàng)建出來。對于資源密集的或配置開銷甚大的單例，更合理的做法是將其實例化推遲到需要使用他的時候。

這種技術(shù)就是惰性加載(lazy loading)。

實現(xiàn)步驟如下：

1）.將所有代碼移到constructor方法中

2）.全權(quán)控制調(diào)用時機(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ù)

分支是一種用來把瀏覽器間的差異封裝在運行期間進(jìn)行設(shè)置的動態(tài)方法中的技術(shù)。

// 分支單例 （判斷程序的分支 <瀏覽器差異的檢測>）
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)重缺乏效率。更有效的做法是在腳本加載時一次性地確定針對瀏覽器的代碼。這正是分支技術(shù)所做的事情。當(dāng)然，分支技術(shù)并不總是更高效的選擇，在兩個或者多個分支中只有一個分支被用到了，其他分支就占用了內(nèi)存。

在考慮是否使用分支技術(shù)的時候，必須在縮短時間和占用更多內(nèi)存這一利一弊之間權(quán)衡一下。

下面利用分支技術(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)于單例的知識，我們再來看看它的弊端。

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

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

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

您可能感興趣的文章: