本文转载自微信公众号「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();
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51.
- 52.
- 53.
- 54.
使用方式：
import Mask from "./utils/Mask";
Mask.show();
Mask.hide();
- 1.
- 2.
- 3.
- 4.
这种在已开始就创建实例的方式，被称作“饿汉式单例”，另一种在需要的时候才创建实例的方式被称作“懒汉式单例”。
因此“饿汉式单例”的缺点就是：类加载时就初始化，浪费内存。
不过在现代借助 Webpack 等打包构建工具，如果没有使用到这个组件，也不会将这个组件打包进来，另外在 React、Vue 框架按需加载组件的设计实现下，组件也是按需通过网络下载分包组件文件，然后缓存起来，所以浪费内存这一缺点可忽略。因此，在 JavaScript 中懒汉式和饿汉式的区分不大。
推荐使用导出的时候就导出一个实例，例如：
export default Mask.getInstance();
- 1.
2.2 透明蒙层单例
在上述的导出实例中，只能调用 Mask.getInstance() ，对于其他使用者来说其实已经规避了如何判断是否是单例类的问题。
另外，如果我们的导出形式是这样的：
export default Mask;
- 1.
那么其他同学在引用这个组件时候，如果不知道是一个单例类，那他就可能会直接 new Mask() 方式使用，那么就会创建多个不同的实例，失去了单例的效果，为了让单例类使用的时候能像普通类创建对象的写法一致，在使用的时候和其他普通类一样，我们把这个处理方式叫做“透明化”。
为此，稍微改动下构造函数中的判断：
constructor() {
if (Mask.instance) {
return Mask.instance;
}
this.isShow = false;
this.maskDom = this.init();
return Mask.instance = this;
}
...
export default Mask;
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
使用验证：
const a = new Mask();
a.show();
const b = new Mask();
b.hide();
console.log("是否相等：", a === b);
// output: 是否相等 true，并且蒙层被隐藏
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
如果为了保证类的透明性，使用方式的统一，可以采用在构造函数中预先判断是否存在实例的方式来实现。
2.3 单例化工具函数
通过上述对单例模式的实现和使用，其实可以想到一个问题，单例模式，只需要保证唯一实例即可，而保证唯一实例的方式，是通过一个变量来判断当前实例是否已经被创建过，如果已经创建了，则直接返回该实例，否则创建后再返回实例。
那么通用的单例模式，应该将单例化和类的职责拆分开。
讲到这，对于前面分享的《从“图片预加载”认识代理设计模式》中的缓存代理就非常相似了，借助代理模式的思想，用闭包来缓存单例。
单例化缓存工具函数：
export const proxySingleton = (fn) => {
let instance;
return () => {
if (instance) return instance;
return instance = new fn();
};
};
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
传入我们之前写的任意类，类名指向了构造函数
export const singletonMask = proxySingleton(Mask);
- 1.
使用的时候：
import { singletonMask } from "./utils/ProxySingleton";
const a = singletonMask();
a.show();
const b = singletonMask();
b.hide();
console.log("是否相等：", a === b);
// output: 是否相等 true，并且蒙层被隐藏
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
这样我们就将单例化和创建蒙层类职责拆分，遵循单一职责原则。
2.4 ES6 export实例 import单例
举一反三，是不是在 ES6 中直接 export 一个实例是否就可以看作是单例了呐?
export default new Mask();
- 1.
import 引入是采用的单例(Singleton)模式，多次用 import 引入同一个模块时，只会引入一次该模块的实例 —— 《ECMAScript 6 入门》
因此，如果要通用的单例对象，我们可以直接在 export 的时候，就导出实例。
之前我们研究过 EventEmitter3 事件触发器的原理，为了让之在全局只有一个实例，我们的使用方法如下：
// ./utils/eventEmitter.ts
import EventEmitter from 'eventemitter3';
export default new EventEmitter();
- 1.
- 2.
- 3.
- 4.
这样导出的 eventEmitter 就是一个单例，唯一，且全局可访问。
三、总结
单例模式在工作中经常用到，当我们有意识地使用单例管理具有唯一属性的实例，将会使得程序更容易管理维护。
结合 ES6 的 import 和 export 关键词，单例模式的应用也变得更加简便。
在实现单例中，我们有将单例和蒙层类功能拆分开，也有合在一起的，这取决于在你的项目中想要如何设计，如果单例并非是大面积的组件套用，其实还是推荐合在一起，有助于后续在单文件中维护整个功能类。
