javascript設(shè)計(jì)模式之單體模式學(xué)習(xí)筆記

更新時(shí)間：2017年02月15日 11:50:37 作者：灰太狼-銅豌豆

這篇文章主要為大家詳細(xì)介紹了javascript設(shè)計(jì)模式之單體模式學(xué)習(xí)筆記，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

單體模式提供了一種將代碼組織為一個(gè)邏輯單元的手段，這個(gè)邏輯單元中的代碼可以通過(guò)單一變量進(jìn)行訪問(wèn)。

單體模式的優(yōu)點(diǎn)是：

可以用來(lái)劃分命名空間，減少全局變量的數(shù)量。
使用單體模式可以使代碼組織的更為一致，使代碼容易閱讀和維護(hù)。
可以被實(shí)例化，且實(shí)例化一次。

什么是單體模式？單體模式是一個(gè)用來(lái)劃分命名空間并將一批屬性和方法組織在一起的對(duì)象，如果它可以被實(shí)例化，那么它只能被實(shí)例化一次。

但是并非所有的對(duì)象字面量都是單體，比如說(shuō)模擬數(shù)組或容納數(shù)據(jù)的話，那么它就不是單體，但是如果是組織一批相關(guān)的屬性和方法在一起的話，那么它有可能是單體模式，所以這需要看開(kāi)發(fā)者編寫代碼的意圖；

下面我們來(lái)看看定義一個(gè)對(duì)象字面量(結(jié)構(gòu)類似于單體模式)的基本結(jié)構(gòu)如下：

// 對(duì)象字面量
var Singleton = {
  attr1: 1,
  attr2: 2,
  method1: function(){
    return this.attr1;
  },
  method2: function(){
    return this.attr2;
  }
};

如上面只是簡(jiǎn)單的字面量結(jié)構(gòu)，上面的所有成員變量都是通過(guò)Singleton來(lái)訪問(wèn)的，但是它并不是單體模式；因?yàn)閱误w模式還有一個(gè)更重要的特點(diǎn)，就是可以僅被實(shí)例化一次，上面的只是不能被實(shí)例化的一個(gè)類，因此不是單體模式；對(duì)象字面量是用來(lái)創(chuàng)建單體模式的方法之一；

使用單體模式的結(jié)構(gòu)如下demo

我們明白的是單體模式如果有實(shí)例化的話，那么只實(shí)例化一次，要實(shí)現(xiàn)一個(gè)單體模式的話，我們無(wú)非就是使用一個(gè)變量來(lái)標(biāo)識(shí)該類是否被實(shí)例化，如果未被實(shí)例化的話，那么我們可以實(shí)例化一次，否則的話，直接返回已經(jīng)被實(shí)例化的對(duì)象。

如下代碼是單體模式的基本結(jié)構(gòu)：

// 單體模式
var Singleton = function(name){
  this.name = name;
  this.instance = null;
};
Singleton.prototype.getName = function(){
  return this.name;
}
// 獲取實(shí)例對(duì)象
function getInstance(name) {
  if(!this.instance) {
    this.instance = new Singleton(name);
  }
  return this.instance;
}
// 測(cè)試單體模式的實(shí)例
var a = getInstance("aa");
var b = getInstance("bb");

// 因?yàn)閱误w模式是只實(shí)例化一次，所以下面的實(shí)例是相等的
console.log(a === b); // true

由于單體模式只實(shí)例化一次，因此第一次調(diào)用，返回的是a實(shí)例對(duì)象，當(dāng)我們繼續(xù)調(diào)用的時(shí)候，b的實(shí)例就是a的實(shí)例，因此下面都是打印的是aa；

console.log(a.getName());// aa
console.log(b.getName());// aa

上面的封裝單體模式也可以改成如下結(jié)構(gòu)寫法：

// 單體模式
var Singleton = function(name){
  this.name = name;
};
Singleton.prototype.getName = function(){
  return this.name;
}
// 獲取實(shí)例對(duì)象
var getInstance = (function() {
  var instance = null;
  return function(name) {
    if(!instance) {
      instance = new Singleton(name);
    }
    return instance;
  }
})();
// 測(cè)試單體模式的實(shí)例
var a = getInstance("aa");
var b = getInstance("bb");
// 因?yàn)閱误w模式是只實(shí)例化一次，所以下面的實(shí)例是相等的

console.log(a === b); // true

console.log(a.getName());// aa

console.log(b.getName());// aa

理解使用代理實(shí)現(xiàn)單列模式的好處

比如我現(xiàn)在頁(yè)面上需要?jiǎng)?chuàng)建一個(gè)div的元素，那么我們肯定需要有一個(gè)創(chuàng)建div的函數(shù)，而現(xiàn)在我只需要這個(gè)函數(shù)只負(fù)責(zé)創(chuàng)建div元素，其他的它不想管，也就是想實(shí)現(xiàn)單一職責(zé)原則，就好比淘寶的kissy一樣，一開(kāi)始的時(shí)候他們定義kissy只做一件事，并且把這件事做好，具體的單體模式中的實(shí)例化類的事情交給代理函數(shù)去處理，這樣做的好處是具體的業(yè)務(wù)邏輯分開(kāi)了，代理只管代理的業(yè)務(wù)邏輯，在這里代理的作用是實(shí)例化對(duì)象，并且只實(shí)例化一次; 創(chuàng)建div代碼只管創(chuàng)建div，其他的不管；如下代碼：

// 單體模式
var CreateDiv = function(html) {
  this.html = html;
  this.init();
}
CreateDiv.prototype.init = function(){
  var div = document.createElement("div");
  div.innerHTML = this.html;
  document.body.appendChild(div);
};
// 代理實(shí)現(xiàn)單體模式
var ProxyMode = (function(){
  var instance;
  return function(html) {
    if(!instance) {
      instance = new CreateDiv("我來(lái)測(cè)試下");
    }
    return instance;
  } 
})();
var a = new ProxyMode("aaa");
var b = new ProxyMode("bbb");
console.log(a===b);// true

理解使用單體模式來(lái)實(shí)現(xiàn)彈窗的基本原理

下面我們繼續(xù)來(lái)使用單體模式來(lái)實(shí)現(xiàn)一個(gè)彈窗的demo；我們先不討論使用單體模式來(lái)實(shí)現(xiàn)，我們想下我們平時(shí)是怎么編寫代碼來(lái)實(shí)現(xiàn)彈窗效果的; 比如我們有一個(gè)彈窗，默認(rèn)的情況下肯定是隱藏的，當(dāng)我點(diǎn)擊的時(shí)候，它需要顯示出來(lái)；如下編寫代碼：

// 實(shí)現(xiàn)彈窗
var createWindow = function(){
  var div = document.createElement("div");
  div.innerHTML = "我是彈窗內(nèi)容";
  div.style.display = 'none';
  document.body.appendChild('div');
  return div;
};
document.getElementById("Id").onclick = function(){
  // 點(diǎn)擊后先創(chuàng)建一個(gè)div元素
  var win = createWindow();
  win.style.display = "block";
}

如上的代碼；大家可以看看，有明顯的缺點(diǎn)，比如我點(diǎn)擊一個(gè)元素需要?jiǎng)?chuàng)建一個(gè)div，我點(diǎn)擊第二個(gè)元素又會(huì)創(chuàng)建一次div，我們頻繁的點(diǎn)擊某某元素，他們會(huì)頻繁的創(chuàng)建div的元素，雖然當(dāng)我們點(diǎn)擊關(guān)閉的時(shí)候可以移除彈出代碼，但是呢我們頻繁的創(chuàng)建和刪除并不好，特別對(duì)于性能會(huì)有很大的影響，對(duì)DOM頻繁的操作會(huì)引起重繪等，從而影響性能；因此這是非常不好的習(xí)慣；我們現(xiàn)在可以使用單體模式來(lái)實(shí)現(xiàn)彈窗效果，我們只實(shí)例化一次就可以了；如下代碼：

// 實(shí)現(xiàn)單體模式彈窗
var createWindow = (function(){
  var div;
  return function(){
    if(!div) {
      div = document.createElement("div");
      div.innerHTML = "我是彈窗內(nèi)容";
      div.style.display = 'none';
      document.body.appendChild(div);
    }
    return div;
  }
})();
document.getElementById("Id").onclick = function(){
  // 點(diǎn)擊后先創(chuàng)建一個(gè)div元素
  var win = createWindow();
  win.style.display = "block";
}

理解編寫通用的單體模式

上面的彈窗的代碼雖然完成了使用單體模式創(chuàng)建彈窗效果，但是代碼并不通用，比如上面是完成彈窗的代碼，假如我們以后需要在頁(yè)面中一個(gè)iframe呢？我們是不是需要重新寫一套創(chuàng)建iframe的代碼呢？比如如下創(chuàng)建iframe：

var createIframe = (function(){
  var iframe;
  return function(){
    if(!iframe) {
      iframe = document.createElement("iframe");
      iframe.style.display = 'none';
      document.body.appendChild(iframe);
    }
    return iframe;
  };
})();

我們看到如上代碼，創(chuàng)建div的代碼和創(chuàng)建iframe代碼很類似，我們現(xiàn)在可以考慮把通用的代碼分離出來(lái)，使代碼變成完全抽象，我們現(xiàn)在可以編寫一套代碼封裝在getInstance函數(shù)內(nèi)，如下代碼：

var getInstance = function(fn) {
  var result;
  return function(){
    return result || (result = fn.call(this,arguments));
  }
};

如上代碼：我們使用一個(gè)參數(shù)fn傳遞進(jìn)去，如果有result這個(gè)實(shí)例的話，直接返回，否則的話，當(dāng)前的getInstance函數(shù)調(diào)用fn這個(gè)函數(shù)，是this指針指向與這個(gè)fn這個(gè)函數(shù)；之后返回被保存在result里面；現(xiàn)在我們可以傳遞一個(gè)函數(shù)進(jìn)去，不管他是創(chuàng)建div也好，還是創(chuàng)建iframe也好，總之如果是這種的話，都可以使用getInstance來(lái)獲取他們的實(shí)例對(duì)象；

如下測(cè)試創(chuàng)建iframe和創(chuàng)建div的代碼如下：

// 創(chuàng)建div
var createWindow = function(){
  var div = document.createElement("div");
  div.innerHTML = "我是彈窗內(nèi)容";
  div.style.display = 'none';
  document.body.appendChild(div);
  return div;
};
// 創(chuàng)建iframe
var createIframe = function(){
  var iframe = document.createElement("iframe");
  document.body.appendChild(iframe);
  return iframe;
};
// 獲取實(shí)例的封裝代碼
var getInstance = function(fn) {
  var result;
  return function(){
    return result || (result = fn.call(this,arguments));
  }
};
// 測(cè)試創(chuàng)建div
var createSingleDiv = getInstance(createWindow);
document.getElementById("Id").onclick = function(){
  var win = createSingleDiv();
  win.style.display = "block";
};
// 測(cè)試創(chuàng)建iframe
var createSingleIframe = getInstance(createIframe);
document.getElementById("Id").onclick = function(){
  var win = createSingleIframe();
  win.src = "http://www.jb51.com";
};

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: