js單例模式詳解實(shí)例

2019-11-20 21:37:28

字體：大中小

供稿：網(wǎng)友

什么是單例？

單例要求一個(gè)類有且只有一個(gè)實(shí)例，提供一個(gè)全局的訪問(wèn)點(diǎn)。因此它要繞過(guò)常規(guī)的控制器，使其只能有一個(gè)實(shí)例，供使用者使用，而使用著不關(guān)心有幾個(gè)實(shí)例，因此這是設(shè)計(jì)者的責(zé)任

復(fù)制代碼代碼如下:

In JavaScript, Singletons serve as a shared resource namespace which isolate implementation code from the global namespace so as to provide a single point of access for functions.

在javascript中，單例被當(dāng)做一個(gè)全局的命名空間，提供一個(gè)訪問(wèn)該對(duì)象的一個(gè)點(diǎn)。

使用場(chǎng)景

復(fù)制代碼代碼如下:

In practice, the Singleton pattern is useful when exactly one object is needed to coordinate others across a system. 

單例比較適用于一個(gè)對(duì)象和其他系統(tǒng)進(jìn)行交互。

類比

單例有點(diǎn)類似于一個(gè)小組的小組長(zhǎng)，在一段時(shí)間內(nèi)只有一個(gè)小組長(zhǎng)，有小組長(zhǎng)來(lái)指定組員的工作，分配和協(xié)調(diào)和組員的工作。

實(shí)例1：這個(gè)是最簡(jiǎn)單的單例，通過(guò)key，value的形式存儲(chǔ)屬性和方法

復(fù)制代碼代碼如下:

var A = {
   xx:3,
   yy:4,
   B:function(el){

   },
   C:function(el){

   },
   D:function(el){

   },
   E:function(el){

   }
}

實(shí)例2：首先創(chuàng)建一個(gè)實(shí)例的引用，然后判斷這個(gè)實(shí)例是否存在，如果不存在那么就創(chuàng)建，存在的話，就直接返回，保證有且只有一個(gè)。

復(fù)制代碼代碼如下:

var mySingleton = (function () {

// Instance 存儲(chǔ)一個(gè)單例實(shí)例的引用
var instance;

function init() {

// Singleton

// 私有的方法和變量
function privateMethod(){
console.log( "I am private" );
}

var privateVariable = "Im also private";

return {

// 共有的方法和變量
publicMethod: function () {
console.log( "The public can see me!" );
},

publicProperty: "I am also public"
};

};

return {

// 如果實(shí)例不存在，那么創(chuàng)建一個(gè)
getInstance: function () {

if ( !instance ) {
instance = init();
}

return instance;
}

};

})();

var singleA = mySingleton;
var singleB = mySingleton;
console.log( singleA === singleB ); // true

實(shí)例3：

復(fù)制代碼代碼如下:

var SingletonTester = (function () {
  // options: an object containing configuration options for the singleton
  // e.g var options = { name: "test", pointX: 5}; 
  function Singleton( options )  {
    // set options to the options supplied
    // or an empty object if none are provided
    options = options || {};
    // set some properties for our singleton
    this.name = "SingletonTester";
    this.pointX = options.pointX || 6;
    this.pointY = options.pointY || ; 
  }
  // our instance holder 
  var instance;
  // an emulation of static variables and methods
  var _static  = {  
    name:  "SingletonTester",
    // Method for getting an instance. It returns
    // a singleton instance of a singleton object
    getInstance:  function( options ) {   
      if( instance  ===  undefined )  {    
        instance = new Singleton( options );   
      }   
        return  instance;      
    } 
  }; 
  return  _static;
})();
var singletonTest  =  SingletonTester.getInstance({
  pointX:  5
});
// Log the output of pointX just to verify it is correct
// Outputs: 5
console.log( singletonTest.pointX ); 