[[416951]]

本文轉載自微信公眾號「DYBOY」，作者DYBOY。轉載本文請聯系DYBOY公眾號。

單例模式是非常常用的一種設計模式，工作中我們會用到例如彈窗、音頻管理、消息管理中心、公共工具函數類等在應用中只需要單個實例的場景，這些都和單例模式密不可分。

單例模式，很常用也非常重要，將單例模式應用于程序開發設計，可減少重復代碼，提升程序效率，同時單例的唯一性也使得數據流更加清晰，便于維護管理。

一、什么是單例模式

單例模式(Singleton Pattern)保證一個類只有一個實例，并提供一個訪問它的全局訪問點。

是不是瞬間想到了 JavaScript 中的全局變量 window、localStorage，它們在全局中提供了訪問點，并且只有唯一實例。

在一些多線程編程語言中，單例模式會涉及到同步鎖的問題，而 JavaScript 是單線程運行的，因此可以暫時忽略線程安全問題。

單例和單身狗類似，直到程序銷毀，整個程序里都找不出第二個和它能夠匹配上的

二、實現單例模式

單例模式從其定義就可以看出，是一個比較簡單的設計模式，其核心思想是保證唯一實例，因此如下簡單實現一個蒙層功能單例類，一步步完善。

2.1 蒙層單例類

現在的工作環境下都是基于 ES6 及以上的開發模式，因此我們直接帶入 class 思想去實現，如果有需要了解相關基礎內容的同學推薦閱讀：《這些JS設計模式的基礎知識點你都會了嗎?》。

蒙層的功能：

• 層級最大，覆蓋瀏覽器可視區域
• 阻止用戶所有點擊事件
• 透明蒙層

因此，該蒙層單例的實現如下：

/** 
 * Mask 蒙層單例 
 */ 
class Mask { 
  static instance: Mask; 
  private isShow: boolean; 
  private maskDom: HTMLDivElement; 
 
  static getInstance() { 
    if (!Mask.instance) { 
      Mask.instance = new Mask(); 
    } 
    return Mask.instance; 
  } 
 
  constructor() { 
    this.isShow = false; 
    this.maskDom = this.init(); 
  } 
 
  /** 
   * 創建蒙層DOM 
   */ 
  private init() { 
    const dom = document.createElement("div"); 
    dom.setAttribute( 
      "style", 
      "z-index: 99999; position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: none; pointer-events: all; user-select: none; cursor: not-allowed;" 
    ); 
    document.body.appendChild(dom); 
    return dom; 
  } 
 
  /** 
   * show 顯示蒙層 
   */ 
  public show() { 
    if (this.isShow) return; 
    this.maskDom.style["display"] = "block"; 
    this.isShow = true; 
  } 
 
  /** 
   * hide 隱藏蒙層 
   */ 
  public hide() { 
    if (!this.isShow) return; 
    this.maskDom.style["display"] = "none"; 
    this.isShow = false; 
  } 
} 
 
// 直接導出實例 
export default Mask.getInstance(); 

使用方式：

import Mask from "./utils/Mask"; 
 
Mask.show(); 
Mask.hide(); 

這種在已開始就創建實例的方式，被稱作“餓漢式單例”，另一種在需要的時候才創建實例的方式被稱作“懶漢式單例”。

因此“餓漢式單例”的缺點就是：類加載時就初始化，浪費內存。

不過在現代借助 Webpack 等打包構建工具，如果沒有使用到這個組件，也不會將這個組件打包進來，另外在 React、Vue 框架按需加載組件的設計實現下，組件也是按需通過網絡下載分包組件文件，然后緩存起來，所以浪費內存這一缺點可忽略。因此，在 JavaScript 中懶漢式和餓漢式的區分不大。

推薦使用導出的時候就導出一個實例，例如：

export default Mask.getInstance(); 

2.2 透明蒙層單例

在上述的導出實例中，只能調用 Mask.getInstance() ，對于其他使用者來說其實已經規避了如何判斷是否是單例類的問題。

另外，如果我們的導出形式是這樣的：

export default Mask; 

那么其他同學在引用這個組件時候，如果不知道是一個單例類，那他就可能會直接 new Mask() 方式使用，那么就會創建多個不同的實例，失去了單例的效果，為了讓單例類使用的時候能像普通類創建對象的寫法一致，在使用的時候和其他普通類一樣，我們把這個處理方式叫做“透明化”。

為此，稍微改動下構造函數中的判斷：

constructor() { 
  if (Mask.instance) { 
    return Mask.instance; 
  } 
  this.isShow = false; 
  this.maskDom = this.init(); 
  return Mask.instance = this; 
} 
 
... 
 
export default Mask; 

使用驗證：

const a = new Mask(); 
a.show(); 
const b = new Mask(); 
b.hide(); 
console.log("是否相等：", a === b); 
// output: 是否相等 true，并且蒙層被隱藏 

如果為了保證類的透明性，使用方式的統一，可以采用在構造函數中預先判斷是否存在實例的方式來實現。

2.3 單例化工具函數

通過上述對單例模式的實現和使用，其實可以想到一個問題，單例模式，只需要保證唯一實例即可，而保證唯一實例的方式，是通過一個變量來判斷當前實例是否已經被創建過，如果已經創建了，則直接返回該實例，否則創建后再返回實例。

那么通用的單例模式，應該將單例化和類的職責拆分開。

講到這，對于前面分享的《從“圖片預加載”認識代理設計模式》中的緩存代理就非常相似了，借助代理模式的思想，用閉包來緩存單例。

單例化緩存工具函數：

export const proxySingleton = (fn) => { 
  let instance; 
  return () => { 
    if (instance) return instance; 
    return instance = new fn(); 
  }; 
}; 

傳入我們之前寫的任意類，類名指向了構造函數

export const singletonMask = proxySingleton(Mask); 

使用的時候：

import { singletonMask } from "./utils/ProxySingleton"; 
 
const a = singletonMask(); 
a.show(); 
const b = singletonMask(); 
b.hide(); 
console.log("是否相等：", a === b); 
// output: 是否相等 true，并且蒙層被隱藏 

這樣我們就將單例化和創建蒙層類職責拆分，遵循單一職責原則。

2.4 ES6 export實例 import單例

舉一反三，是不是在 ES6 中直接 export 一個實例是否就可以看作是單例了吶?

export default new Mask(); 

import 引入是采用的單例(Singleton)模式，多次用 import 引入同一個模塊時，只會引入一次該模塊的實例 —— 《ECMAScript 6 入門》

因此，如果要通用的單例對象，我們可以直接在 export 的時候，就導出實例。

之前我們研究過 EventEmitter3 事件觸發器的原理，為了讓之在全局只有一個實例，我們的使用方法如下：

// ./utils/eventEmitter.ts 
import EventEmitter from 'eventemitter3'; 
 
export default new EventEmitter(); 

這樣導出的 eventEmitter 就是一個單例，唯一，且全局可訪問。

三、總結

單例模式在工作中經常用到，當我們有意識地使用單例管理具有唯一屬性的實例，將會使得程序更容易管理維護。

結合 ES6 的 import 和 export 關鍵詞，單例模式的應用也變得更加簡便。 

在實現單例中，我們有將單例和蒙層類功能拆分開，也有合在一起的，這取決于在你的項目中想要如何設計，如果單例并非是大面積的組件套用，其實還是推薦合在一起，有助于后續在單文件中維護整個功能類。