JavaScript設計模式之單例模式詳解

更新時間：2017年06月09日 10:29:32 投稿：lijiao

這篇文章主要為大家詳細介紹了JavaScript設計模式之例模式的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下

最近項目不太忙，難得有時間看看書，平時挺喜歡js這門語言。也看過很多高級教程，覺得自己還是比較熱衷于js的設計模式。這一次重溫一下《JavaScript設計模式與開發(fā)實踐》，開篇為單例模式。

/**
 * pre 單例模式
 * 定義：保證一個類僅有一個實例，并提供一個訪問它的全局訪問點
 * 應用：單例模式是一種常用的模式，有一些對象我們往往只需要一個，
 * 比如線程池、全局緩存、瀏覽器中的 window 對象等。
 */
//--------------singleton-01-------------
/*寫法1*/
var Singleton = function(name){
 this.name = name;
 this.instance = null;
};

Singleton.prototype.getName = function(){
 alert(this.name);
};

Singleton.getInstance = function(){
 if(!this.instance){
  this.instance = new Singleton(name);
 }
 return this.instance;
};

var a = Singleton.getInstance("amy");
var b = Singleton.getInstance("ben");
alert(a === b);

// ------------singleton-02----------------
/*寫法2*/
var Singleton = function(name){
 this.name = name;
}
Singleton.prototype.getName = function(){
 return this.name;
}

Singleton.getInstance = (function(){
 var instance = null;
 return function(name){
  if(!instance){
   instance = new Singleton(name);
  }
  return instance;
 }
})();

var a = Singleton.getInstance("amy");
var b = Singleton.getInstance("ben");
alert(a === b);

// ------------singleton03-----------
/*寫法3*/
var Singleton = (function(){
 var instance;
 return function(name){
  if(instance){
   return instance;
  }
  this.name = name;
  instance = this;
 }
})();
var a = new Singleton("amy");
var b = new Singleton("ben");
alert(a === b);

//---------------- 示例 ---------------
var getSingleton = function(fn) {
 var result;
 return function() {
  if(!result) {
   result = fn.apply(this, arguments);
  }
  return result;
 }
};

var getSingletonVip = (function() {
 var instance;
 return function(fn) {
  return instance || (instance = fn.apply(this, arguments));
 }
})();

var createLoginUser = function() {
 var div = document.createElement("div");
 div.innerHTML = '這是登錄框';
 document.body.appendChild(div);
 return div;
};

var createInfoGrid = function() {
 var div = document.createElement("div");
 div.innerHTML = '這是列表信息框';
 document.body.appendChild(div);
 return div;
};
//--執(zhí)行singleton1 
var createUserDiv = getSingleton(createLoginUser);
createUserDiv();
createUserDiv();

//--執(zhí)行singleton2
getSingletonVip(createLoginUser);
getSingletonVip(createLoginUser);

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: