JavaScript設(shè)計(jì)模式之單例模式原理與用法實(shí)例分析

發(fā)布時(shí)間：2020-09-29 07:12:07 來(lái)源：腳本之家閱讀：125 作者：筱葭欄目：web開(kāi)發(fā)

本文實(shí)例講述了JavaScript設(shè)計(jì)模式之單例模式原理與用法。分享給大家供大家參考，具體如下：

單例模式的定義：保證一個(gè)類僅有一個(gè)實(shí)例，并提供一個(gè)訪問(wèn)它的全局訪問(wèn)點(diǎn)。

單例模式是一種常用的模式，有些對(duì)象只需要一個(gè)，如線程池、全局緩存、瀏覽器中的window對(duì)象等，這時(shí)候可以用到單例模式。

單例模式典型的應(yīng)用場(chǎng)景：?jiǎn)螕舭粹o時(shí)，頁(yè)面中會(huì)出現(xiàn)一個(gè)登陸浮窗，而該登錄浮窗是唯一的，無(wú)論單擊多少次按鈕，這個(gè)浮窗都會(huì)被創(chuàng)建一次，則適合用單例模式創(chuàng)建。

全局變量不是單例模式，但在JavaScript開(kāi)發(fā)中，經(jīng)常會(huì)把全局變量當(dāng)成單例來(lái)使用。

使用var a = {};這種方式創(chuàng)建對(duì)象a時(shí)，對(duì)象a是獨(dú)一無(wú)二的，若變量a被聲明在全局作用域下，則可以在代碼的任何位置使用這個(gè)變量。這顯然滿足單例模式的兩個(gè)條件。

但是全局變量存在很多問(wèn)題，很容易造成命名空間污染，如上面的var a = {};隨時(shí)有可能被覆蓋。

有必要盡量減少全局變量的使用，即使需要，也應(yīng)該把它的污染降到最低。

降低全局變量帶來(lái)的命名污染的幾種方式：

1) 使用命名空間

適當(dāng)?shù)厥褂妹臻g，并不會(huì)杜絕全局變量，但可以減少全局變量的數(shù)量。

把a(bǔ)和b都定義為namespace的屬性，這樣可以減少變量和全局作用域打交道的機(jī)會(huì)：

var namespace = {
 a: function() {
  alert("a");
 },
 b: function() {
  alert("b");
 }
};

動(dòng)態(tài)地創(chuàng)建命名空間：

var obj = {};
obj.namespace = function(name) {
 var tips = name.split('.');
 var cur = obj;
 for (var i in tips) {
  if (!cur[tips[i]])
   cur[tips[i]] = {};
  cur = cur[tips[i]];
 }
};
obj.namespace('name');
obj.namespace('birth.year');
console.dir(obj);

上述代碼等價(jià)于：

var obj = {
 name: {},
 birth: {
  year: {}
 }
};

2) 使用閉包封裝私有變量

var person = (function() {
 var_name = "Alice";
 var _id = 16;
 return {
  getUserInfo: function() {
   return _name + ": " + _id;
  }
 }
})();

使用下劃線來(lái)約定私有變量_name和_age，它們被封裝在閉包產(chǎn)生的作用域中，外部是訪問(wèn)不到這兩個(gè)變量的，這就避免了對(duì)全局的命令污染。

惰性單例模式：

在需要的時(shí)候才創(chuàng)建對(duì)象實(shí)例。

var createBox = (function() {
 var div;
 return function() {
  if (!div) {
   div = document.createElement('div');
   div.innerHTML = '登錄';
   div.style.display = 'none';
   document.body.appendChild(div);
  }
  return div;
 }
})();
document.getElementById('btn').onclick = function() {
 var box = createBox();
 box.style.display = 'block';
};

用變量div來(lái)判斷是否已經(jīng)創(chuàng)建過(guò)浮窗。

通用的惰性單例：

問(wèn)題：上面的惰性單例實(shí)例是違反單一職責(zé)原則的，創(chuàng)建對(duì)象和管理單例的邏輯都放在createBox對(duì)象內(nèi)部。若下次要?jiǎng)?chuàng)建頁(yè)面中唯一的iframe，需要把createBox幾乎照抄一遍。

var createIframe = (function() {
 var iframe;
 return function() {
  if (!iframe) {
   iframe = document.createElement('iframe');
   document.body.appendChild(iframe);
   return iframe;
  }
  return div;
 }
})();

解決：把不變的部分隔離出來(lái)，其實(shí)，管理單例的邏輯可以完全抽象出來(lái)，因?yàn)樗鼈兊倪壿嬍且粯拥模河靡粋€(gè)變量來(lái)標(biāo)記是否創(chuàng)建過(guò)對(duì)象，若是，則在下次直接返回已經(jīng)創(chuàng)建好的對(duì)象。

var createSingle = function(func) {
 var flag;
 return flag || (flag = func.apply(this, arguments));
};
var createBox = function() {
 var div = document.createElement('div');
 div.innerHTML = '登錄';
 div.style.display = 'none';
 document.body.appendChild(div);
 return div;
};
document.getElementById('btn').onclick = function() {
 var box = createBox();
 box.style.display = 'block';
};
var createIframe = createSingle(function() {
 var iframe = document.createElement('iframe');
 document.body.appendChild(iframe);
 return iframe;
});
document.getElementById('btn').onclick = function() {
 var iframe = createIframe();
 iframe.style.display = 'block';
};

單例模式的其他用途：

單例模式的用途遠(yuǎn)不止于創(chuàng)建對(duì)象，比如click事件只需要在第一次渲染頁(yè)面時(shí)綁定一次，顯然運(yùn)用jQuery的one()方法可以實(shí)現(xiàn)。若運(yùn)用createSingle 方法，也很容易實(shí)現(xiàn)：

var createSingle = function(func) {
 var flag;
 return flag || (flag = func.apply(this, arguments));
};
var bindEvent = createSingle(function() {
 document.getElementById(‘div').onclick = function() {
  ...
 };
 return true;
});
var render = function() {
 bindEvent();
};
render();
render();
render();

render()函數(shù)與bindEvent()函數(shù)執(zhí)行了3次，但div實(shí)際上只被綁定了一次。

更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題：《javascript面向?qū)ο笕腴T教程》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

向AI問(wèn)一下細(xì)節(jié)

JavaScript設(shè)計(jì)模式之單例模式原理與用法實(shí)例分析

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽