學習JavaScript設計模式(單例模式)_javascript技巧-js教程-PHP中文網

單例模式的定義：保證一個類別只有一個實例，並提供一個存取它的全域存取點。

單例模式是一種常用的模式，有一些物件我們往往只需要一個，像是執行緒池、全域快取、瀏覽器的window物件。在js開發中，單例模式的用途同樣非常廣泛。試想一下，當我們點擊登入按鈕的時候，頁面中會出現一個登入框，而這個浮窗是唯一的，無論點擊多少次登入按鈕，這個浮窗只會被建立一次。因此這個登入浮窗就適合用單例模式。

1、單例模式的使用場景

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

1）.可以用它來分割命名空間(這個就是常用的了)

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

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

2、最基本的單例模式

最簡單的單例其實就是一個物件字面量。它把一批有一定關聯的方法和屬性組織在一起。

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

登入後複製

這個物件可以被修改。你可以新增屬性和方法。你也可以用delete運算子刪除現有成員。這其實違背了物件導向設計的一個原則：類別可以被擴展，但不應該被修改。如果某些變數需要保護，那麼可以將其定義在閉包中。

物件字面量只是建立單例的方法之一。也並非所有的物件字面量都是單例，那些只是用來模仿關聯數組或容納資料的物件字面量顯然不是單例。

3、借用閉包建立單例

閉包主要的目地保護資料

// 命名空间
var BHX = {} ;
BHX.Singleton = (function(){
  // 添加自己的私有成员
  var a1 = true ;
  var a2 = 10 ;
  var f1 = function(){
    alert('f1');
  }
  var f2 = function(){
    alert('f2');
  }        
  // 把块级作用域里的执行结果赋值给我的单例对象
  return {
      attr1: a1 , 
      attr2: a2 ,
      method1 : function(){
        return f1();
      },
      method2 : function(){
        return f2();
      }            
  } ;
})();

alert(BHX.Singleton.attr1);
BHX.Singleton.method1();

登入後複製

這種單例模式又稱模組模式，指的是它可以把一批相關的方法和屬性組織為模組並起到劃分命名空間的作用。

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）、防止其它來源程式碼的修改

現在網頁上的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）、用作專用程式碼封裝

在擁有許多網頁的網站中，有些程式碼是所有網頁都要用到的，他們通常被存放在獨立的文件中；而有些程式碼則是某個網頁專用的，不會被用到其他地方。最好把這兩種程式碼分別包裝在自己的單例物件中。

我們常常要用Javascript為表單新增功能。出於平穩退化方面的考慮，通常先建立一個不依賴Javascript的、使用普通提交機製完成任務的純HTML網頁。

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

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

這種技巧就是惰性載入(lazy loading)。

實作步驟如下：

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

2）.全權控制呼叫時機(正是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、分支技術

分支是一種用來把瀏覽器間的差異封裝在運作期間進行設定的動態方法中的技術。

// 分支单例 （判断程序的分支 <浏览器差异的检测>）
var Ext = {} ;
var def = false ;
Ext.More = (function(){
  var objA = {    // 火狐浏览器 内部的一些配置
      attr1:'FF属性1'
      // 属性1 
      // 属性2 
      // 方法1 
      // 方法2
  } ;
  var objB = {    // IE浏览器 内部的一些配置
      attr1:'IE属性1'
      // 属性1 
      // 属性2 
      // 方法1 
      // 方法2             
  } ;
  return (def) &#63;objA:objB;
})();
alert(Ext.More.attr1);

登入後複製

比如說，如果網站中要頻繁使用xhr，每次呼叫都要再次執行瀏覽器嗅探程式碼，這樣會嚴重缺乏效率。更有效的做法是在腳本載入時一次性地確定針對瀏覽器的程式碼。這正是分支技術所做的事情。當然，分支技術並不總是更有效率的選擇，在兩個或多個分支中只有一個分支被用到了，其他分支就佔用了記憶體。

在考慮是否使用分支技術的時候，必須在縮短時間和佔用更多記憶體這一利一弊之間權衡一下。

以下利用分支技術實現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、單例模式的弊端

了解了這麼多關於單例的知識，我們再來看看它的弊端。

由於單例模式提供的是一種單點訪問，所以它有可能導致模組間的強耦合。因此也就不利於單元測試了。

綜上，單例還是留給定義命名空間和實作分支型方法這些用途。

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