javaScript設(shè)計(jì)模式系列（二）單體模式

ZoomQuiet 發(fā)布于2019-08-21 11:55 / 2584人閱讀

摘要：使用構(gòu)造函數(shù)如果被實(shí)例化過(guò)，就返回實(shí)例化的結(jié)果這種方式比較簡(jiǎn)潔，通過(guò)判斷是否已經(jīng)實(shí)例化過(guò)，但是也沒(méi)啥安全性，如果在外部修改那很可能單例模式就被破壞了。

摘要

單體模式也有人稱為單例模式，是javaScript 中最基本但又最有用的模式之一。

什么是單體

一講到概念第一反應(yīng)就是WTF

其實(shí)單體模式是最常用，也是最有用的一種模式。而我們也會(huì)在項(xiàng)目中不知不覺(jué)的寫一些單體模式，只是我們沒(méi)有意識(shí)到，這也是一種設(shè)計(jì)模式。看一個(gè)簡(jiǎn)單的例子：

var zoom = {
  bird: 10,
  monkey: 10,
  play: function() {},
  eat: function() {}
}

這和我隨手找的一個(gè)對(duì)象有什么區(qū)別，從嚴(yán)格意義上講這確實(shí)不能稱為一個(gè)單體。但我們可以分析一下這個(gè)對(duì)象，其中有兩個(gè)zoom相關(guān)的屬性，和兩個(gè)zoom相關(guān)的方法。實(shí)際上最簡(jiǎn)單的單體就是字面量，它是把一些有一定關(guān)系的方法和屬性組織在一起。

但他違背了面向?qū)ο笤O(shè)計(jì)的一條原則：類可以被擴(kuò)展，但不應(yīng)該被修改。聽(tīng)到這里我們也不需要慌，因?yàn)椋≒ython，Ruby）都允許在定義了類之后對(duì)其修改。

可能你還是不知道單體與普通字面量有什么不同，那就再看一個(gè)例子：

var zoom = function() {
  var bird = 10;
  var monkey = 10;
  this.play = function() {}
  this.eat = function() {}
}
var zoom1 = new zoom();
var zoom2 = new zoom();
console.log(zoom1 === zoom2)//false;

zoom被實(shí)例化兩次，但兩個(gè)實(shí)例明顯不相等。因?yàn)閦oom1,zoom2的指針，并沒(méi)有只向內(nèi)存中的同一地址。這也正好可以引出單體與不同字面量的不同。按傳統(tǒng)定義，單體是一個(gè)只能被實(shí)例化一次，并且可以通過(guò)一個(gè)眾所周知的訪問(wèn)點(diǎn)訪問(wèn)的對(duì)象。后半句簡(jiǎn)單說(shuō)，就是可以全局訪問(wèn)。

總結(jié)一下上面內(nèi)容。單體是一個(gè)用來(lái)劃分命名空間并將一批相關(guān)方法和屬性組織在一起的對(duì)象，如果它可以被實(shí)例化，那么它只能被實(shí)例化一次。

與命名空間的關(guān)系

如果我們的變量都定義在全局中，一不小心別人重新用相同的變量名，定義一個(gè)變量，那我們的代碼就會(huì)出問(wèn)題，而且這種問(wèn)題很難排查。為了避免這種不確定性，我們可以把代碼組織在命名空間中（其實(shí)，就是另一個(gè)對(duì)象中，但這個(gè)對(duì)象，更具有包含性）

var ZoomSpace = {
  otherFunction: function() {}
}
ZoomSpace.zoomUtil = {
  bird: 10,
  monkey: 10,
  play: function() {},
  eat: function() {}
}

這樣如果在全局中重定義了zoomUtil,我們的zoomUtil也不會(huì)受到影響。

使用構(gòu)造函數(shù)

function zoomUtil() {
  //如果被實(shí)例化過(guò)，就返回實(shí)例化的結(jié)果
  if(zoomUtil.unique !== undefined) {
    return zoomUtil.unique;
  }
  var bird = 10;
  var monkey = 10;
  function play() {};
  function eat(){};
  return zoomUtil.unique = this;
}
var zoom1 = new zoomUtil();
var zoom2 = new zoomUtil();
console.log(zoom1 === zoom2)//true

這種方式比較簡(jiǎn)潔，通過(guò)判斷是否已經(jīng)實(shí)例化過(guò)，但是也沒(méi)啥安全性，如果在外部修改zoomUtil.unique 那很可能單例模式就被破壞了。

擁有私有成員的單體 使用下劃線表示

下劃線表示私有成員，是約定俗稱的一種方法，告訴別人不要直接訪問(wèn)私有方法。

使用上面我們已經(jīng)定義好的命名空間：

ZoomSpace.zoomUtil = {
  bird: 10,
  monkey: 10,
  _runTime: function() {
    return ++this.bird;
  },
  play: function() {
    //return this._runTime(); 盡量不要再共有方法中使用this
    //this很可能因?yàn)榇朔椒ㄊ褂迷趧e的函數(shù)中導(dǎo)致指向window
    return ZoomSpace.zoomUtil._runTime();
  },
  eat: function() {}
}
console.log(ZoomSpace.zoomUtil.play());//11

這種方法的安全性也不好，主要靠人為的約束，但是如果有人非要用我們的私有方法，導(dǎo)致我們刪除或者修改私有方法后，他的程序不能用，只能能跟他說(shuō)no zuo no die。

使用閉包

之前我們的單體都是這樣的：

ZoomSpace.zoomUitl = {};

現(xiàn)在我們用一個(gè)立即執(zhí)行的函數(shù)創(chuàng)建，像這樣：

ZoomSpace.zoomUitl = (function(){
  return {};
})();

以往的做法是把變量和函數(shù)定義在構(gòu)造函數(shù)內(nèi)部。因此，每次生成一個(gè)實(shí)例，所有的方法屬性都會(huì)被再次創(chuàng)建。這樣的做法很低效。而現(xiàn)在的做法我們不必要擔(dān)心定義的屬性過(guò)多，因?yàn)樗粫?huì)被實(shí)例化一次。我們來(lái)改寫上面的例子：

ZoomSpace.zoomUtil = (function(){
  //私有屬性和方法
  var bird = 10;
  var monkey = 10;
  function runTime(){
    return ++bird;//不需要使用this
  };
  function otherFunction(){};
  return {
    play:function(){
      return runTime();
    }
  }
})()
console.log(ZoomSpace.zoomUtil.play());//11

如果你想通過(guò)new的方式來(lái)寫，可以像下面這樣修改：

var ZoomSpace = {};
ZoomSpace.zoomUtil = (function() {
//私有屬性和方法
  var unique; //唯一值
  function zoomUtilConstructor() {
    // 是否被實(shí)例化過(guò)
    if(unique.constructor === zoomUtilConstructor) {    
      //如果實(shí)例化過(guò)，返回已經(jīng)實(shí)例化的對(duì)象
      return unique;
    }
    var bird = 10;
    var monkey = 10;
    function runTime() {
      return ++bird;
    };
    this.play = function(){
      return runTime();
    }
    // 保存實(shí)例化的對(duì)象
    return unique = this;
  }
  // 保存構(gòu)造函數(shù)
  return unique = zoomUtilConstructor;
})()
var zoom1 = new ZoomSpace.zoomUtil();
var zoom2 = new ZoomSpace.zoomUtil();
console.log(zoom1 === zoom2); //true

方法有很多，具體看那種最適合。

總結(jié)

考慮否嚴(yán)格的只需要一個(gè)實(shí)例對(duì)象的類，那么就要考慮使用單體模式。使用數(shù)據(jù)緩存來(lái)存儲(chǔ)該單例，用作判斷單例是否已經(jīng)生成，是單例模式主要的實(shí)現(xiàn)思路。

云服務(wù)器 GPU云服務(wù)器 javascript設(shè)計(jì)模式 javascript命令模式 javascript嚴(yán)格模式 javascript專題系列

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/87296.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

ZoomQuiet

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

#黑五#DediPath：VPS和混合服務(wù)器永久3.5折，獨(dú)立服務(wù)器$39/月起

閱讀 1319·2021-11-24 10:24
基于Vue3最新標(biāo)準(zhǔn)，實(shí)現(xiàn)后臺(tái)前端綜合解決方案MK

閱讀 4160·2021-11-22 15:29
Issues with position fixed & scroll（移動(dòng)端 fixed

閱讀 1091·2019-08-30 15:53
原生CSS+JS實(shí)現(xiàn)連續(xù)點(diǎn)擊旋轉(zhuǎn)

閱讀 2797·2019-08-30 10:54
一小波DOM騷操作：querySelectorAll和classList

閱讀 1985·2019-08-29 17:26
步步向前之Element-UI

閱讀 1289·2019-08-29 17:08
詳解 CSS 屬性 - 優(yōu)先級(jí)問(wèn)題

閱讀 610·2019-08-28 17:55
Jenkins與Rainbond對(duì)接部署應(yīng)用

閱讀 1585·2019-08-26 14:01

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

javaScript設(shè)計(jì)模式系列（二）單體模式

相關(guān)文章

JavaScript 設(shè)計(jì)模式讀書筆記(四)——單體模式和鏈?zhǔn)秸{(diào)用

微服務(wù)指南走北（二）：微服務(wù)架構(gòu)的進(jìn)程間通信（IPC）