單例模式是JavaScript項目中最常用的設計模式之一,下面羅列了JavaScript實現(xiàn)設計模式中的單例模式的一些技巧總結,包括惰性加載與分支技術等,需要的朋友可以參考下.

一、使用全局變量保存單例

這是最簡單的實現(xiàn)方法

function Person(){ 

  this.createTime=new Date(); 

} 

var instance=new Person(); 

function getInstance(){ 

  return instance; 

} 

加載該js時就創(chuàng)建一個Person對象，保存到instance全局變量中，每次使用都取這個對象。如果一次都沒使用，那么創(chuàng)建的這個對象則浪費了，我們可以優(yōu)化一下，

var instance 

function getInstance(){ 

  if(!instance){ 

    instance=new Person(); 

  } 

  return instance; 

} 

這樣，第一次使用時才創(chuàng)建對象。

這個方法的缺點是，instance是全局的變量，在多人合作或者開發(fā)周期比較長的情況下，很難保證instance不會被其它代碼修改或覆蓋，很可能到調(diào)用的時候，發(fā)現(xiàn)instance根本就不是Person對象。

我們考慮下使用閉包來封裝起instance，使它不再是全局變量就可以解決這個問題了

二、閉包創(chuàng)建對象

var getInstance(){ 

var instance; 

return function(){ 

    if(!instance){ 

      instance=new Person(); 

    } 

    return instance; 

  } 

}(); 

這樣，instance就被封裝起來了，不用擔心被修改了。

現(xiàn)在通過getInstance()函數(shù)可以獲得單例了。新的問題，如果我通過new Person()來創(chuàng)建對象，獲得的還是多個對象，javascript又不可以像java一樣把構造器私有化。那怎么樣可以讓多次new出來的對象都是一個實例呢？

三、構造函數(shù)的靜態(tài)屬性緩存實例

先看代碼

function Person(){ 

  //如果已經(jīng)緩存了實例，則直接返回緩存的實例 

  if(typeof Person.instance==='object'){ 

    return Person.instance; 

  } 

  this.createTime=new Date(); 

  //緩存實例 

  Person.instance=this; 

  return this; 

} 

從代碼可以看到，第一次new時，if的條件返回false，會往下走，初始化對象，然后保存對象到Person.instance這個靜態(tài)屬性中。

第二次new 時，if的條件返回true，直接返回Person.instance，不會再往下運行初始化的代碼。所以不管new幾次，返回的都是第一次創(chuàng)建的對象。

這個方法的缺點和方法一的缺點一樣，Person.instance也是公開屬性，有可能會被修改。

我們參考方法二，使用閉包來封裝一個，也許就能解決該問題了

四、重寫構造函數(shù)

這個方法要使用閉包，但不能像方法二那么簡單，我們需要重寫構造函數(shù)。

function Person(){ 

  //緩存實例 

  var instance=this; 

  this.createTime=new Date(); 

  //重寫構造函數(shù) 

  Person=function(){ 

    return instance; 

  } 

} 

第一次new 時，調(diào)用原始構造函數(shù)先緩存該實例，然后再初始化，同時，重寫該構造函數(shù)。以后再new 時，永遠調(diào)用不到原始的構造函數(shù)了，只能調(diào)用到重寫后的構造函數(shù)，而這個函數(shù)總是返回緩存的instance.

上面的方法似乎沒什么問題，但通過下面的測試，可以發(fā)現(xiàn)問題

//向原型添加屬性 

Person.prototype.prop1=true; 

var p1=new Person(); 

//在創(chuàng)建初始化對象后，再次向該原型添加屬性 

Person.prototype.prop2=true; 

var p2=new Person(); 

//開始測試 

console.log(p1.prop1);//結果為true 

console.log(p2.prop1);//結果為true 

console.log(p1.prop2);//結果為undefined 

console.log(p2.prop2);//結果為undefined 

console.log(p1.constructor===Person);//結果為false 

console.log(p2.constructor===Person);//結果為false 

我們預期中的結果，應該是全都是true。

分析一下上述測試代碼

Person.prototype.prop1=true;是在原始構造函數(shù)的原型下增加了prop1這個屬性，并賦值

而在執(zhí)行 var p1=new Person();之后，Person這個構造函數(shù)已經(jīng)被重寫了

所以Person.prototype.prop2=true;是在新的原型下增加prop2這個屬性

var p2=new Person(); p2和p1實際上是同一個對象，即原始構造函數(shù)創(chuàng)建的對象

所以p1 p2都有prop1這個屬性，而沒有prop2這個屬性

同樣的，p1 p2的constructor指向的也是原始的構造函數(shù)，而Person此時已不是原來那個函數(shù)了

為了能按預期的結果那樣運行，可以通過一些修改來實現(xiàn)

function Person(){ 

  //緩存實例 

  var instance=this; 

  //重寫構造函數(shù) 

  Person=function(){ 

    return instance; 

  } 

  //保留原型屬性 

  Person.prototype=this; 

  //實例 

  instance=new Person(); 

  //重置構造函數(shù)引用 

  instance.constructor=Person; 

  //其他初始化 

  instance.createTime=new Date(); 

  return instance; 

} 

再運行前面的測試代碼，結果都是true了。

五、惰性加載：

在大型或復雜的項目中，起到了優(yōu)化的作用：那些開銷較大卻很少用到的組件可以被包裝到惰性加載單例中，示例程序：

/* Singleton with Private Members, step 3. */

MyNamespace.Singleton = (function() {

 // Private members.

 var privateAttribute1 = false;

 var privateAttribute2 = [1, 2, 3];

 function privateMethod1() {

  ...

 }

 function privateMethod2(args) {

  ...

 }

 return { // Public members.

  publicAttribute1: true,

  publicAttribute2: 10,

  publicMethod1: function() {

   ...

  },

  publicMethod2: function(args) {

   ...

  }

 };

})();

/* General skeleton for a lazy loading singleton, step 1. */

MyNamespace.Singleton = (function() {

 function constructor() { // All of the normal singleton code goes here.

  // Private members.

  var privateAttribute1 = false;

  var privateAttribute2 = [1, 2, 3];

  function privateMethod1() {

   ...

  }

  function privateMethod2(args) {

   ...

  }

  return { // Public members.

   publicAttribute1: true,

   publicAttribute2: 10,

   publicMethod1: function() {

    ...

   },

   publicMethod2: function(args) {

    ...

   }

  }

 }

})();

/* General skeleton for a lazy loading singleton, step 2. */

MyNamespace.Singleton = (function() {

 function constructor() { // All of the normal singleton code goes here.

  ...

 }

 return {

  getInstance: function() {

   // Control code goes here.

  }

 }

})();

/* General skeleton for a lazy loading singleton, step 3. */

MyNamespace.Singleton = (function() {

 var uniqueInstance; // Private attribute that holds the single instance.

 function constructor() { // All of the normal singleton code goes here.

  ...

 }

 return {

  getInstance: function() {

   if(!uniqueInstance) { // Instantiate only if the instance doesn't exist.

    uniqueInstance = constructor();

   }

   return uniqueInstance;

  }

 }

})();

六、使用分支單例：

針對特定環(huán)境的代碼可以被包裝到分支型單例中，示例程序：

/* SimpleXhrFactory singleton, step 1. */

var SimpleXhrFactory = (function() {

 // The three branches.

 var standard = {

  createXhrObject: function() {

   return new XMLHttpRequest();

  }

 };

 var activeXNew = {

  createXhrObject: function() {

   return new ActiveXObject('Msxml2.XMLHTTP');

  }

 };

 var activeXOld = {

  createXhrObject: function() {

   return new ActiveXObject('Microsoft.XMLHTTP');

  }

 };

})();

/* SimpleXhrFactory singleton, step 2. */

var SimpleXhrFactory = (function() {

 // The three branches.

 var standard = {

  createXhrObject: function() {

   return new XMLHttpRequest();

  }

 };

 var activeXNew = {

  createXhrObject: function() {

   return new ActiveXObject('Msxml2.XMLHTTP');

  }

 };

 var activeXOld = {

  createXhrObject: function() {

   return new ActiveXObject('Microsoft.XMLHTTP');

  }

 };

 // To assign the branch, try each method; return whatever doesn't fail.

 var testObject;

 try {

  testObject = standard.createXhrObject();

  return standard; // Return this if no error was thrown.

 }

 catch(e) {

  try {

   testObject = activeXNew.createXhrObject();

   return activeXNew; // Return this if no error was thrown.

  }

  catch(e) {

   try {

    testObject = activeXOld.createXhrObject();

    return activeXOld; // Return this if no error was thrown.

   }

   catch(e) {

    throw new Error('No XHR object found in this environment.');

   }

  }

 }

})();