设计模式之单例模式
单例模式的基本概念
单例模式是一种保证一个类仅有一个实例，并提供一个全局访问点的设计模式，它还有些许其他的叫法，比如说懒汉模式、单子模式等。那么这种设计模式解决了一个什么事情呢？我们来看下这样一段代码
function Foo() {}
const s1 = new Foo();
const s2 = new Foo();
console.log(s1 === s2); // false
从结果上看，每通过构造函数创建一个对象，就会新开辟一片内存去存储，所以两个对象的值是不相等，而我们要做的事情是，让它每次创建出来的结果都是同一个，那这就是单例模式，运用到现实生活中的场景，比如说全局状态、前端页面中的模态框等等。下面跟着单例模式的实现，我们来一步一步地改造它。
单例模式的实现
随着 ECMAScript 标准的更新换代，最开始我们是通过函数+全局变量，或者函数加闭包的形式去实现单例模式，到后来 ES6 中有了 Class 的语法，我们可以用 Class 去写单例，所以本文通过三种方式介绍单例模式的实现。
全局变量 + 函数
function Singleton() {}
Singleton.getInstance = function () {
if (!window.instance) {
window.instance = new Singleton();
}
return window.instance;
};
const s1 = Singleton.getInstance();
const s2 = Singleton.getInstance();
console.log(s1 === s2); // true
这里思考下这样写有什么不好的吗？有的。例如程序员李雷在全局变量上挂载了一个 instance 属性，程序员韩梅梅也在全局变量 windows 上挂载了一个 instance 属性。他们互相都不告诉对方自己在 windows 上挂载了一个 instance 属性，那么这个时候是不是就会产生冲突呢？所以这样子写，不好。
函数+闭包
function Singleton() {}
Singleton.getInstance = (function () {
let instance = null;
return function () {
if (!instance) {
instance = new Singleton();
}
return instance;
};
})();
const s1 = Singleton.getInstance();
const s2 = Singleton.getInstance();
console.log(s1 === s2); // true
ES 中面向对象的 Class
class Singleton {
static getInstance() {
if (!Singleton.instance) {
Singleton.instance = new Singleton();
}
return Singleton.instance;
}
}
const s1 = Singleton.getInstance();
const s2 = Singleton.getInstance();
console.log(s1 === s2); // true
单例模式的应用
单例模式作为最简单的设计模式之一，在软件开发中应用也很广泛，下面笔者结合自己的经历，主要从前端和后端分别举一个例子来介绍设计模式的应用。
单例模式在前端的应用
前面我们说了模态框，比如说，你页面有个登录按钮，点击后会弹出一个登录框，这里每次点击登录都重新弹一个新的模态框，显然是不必要的，因为他们内容是一样的，所以我们期望把它缓存下来，核心代码如下：
class Modal {
static getInstance() {
if (!Modal.instance) {
Modal.instance = new Modal();
Modal.instance.createElement();
}
return Modal.instance;
}
createElement() {
this.div = document.createElement('div');
this.div.id = 'modal';
this.div.innerHTML = '全局模态框';
this.div.style.display = 'none';
document.body.appendChild(this.div);
}
open() {
this.div.style.display = 'block';
}
close() {
this.div.style.display = 'none';
}
}
document.getElementById('BtnOpen').addEventListener('click', () => {
const modal = Modal.getInstance();
modal.open();
});
document.getElementById('BtnClose').addEventListener('click', () => {
const modal = Modal.getInstance();
modal.close();
});
具体的 demo 地址：https://zhengjiangtao.cn/show/design-mode/singleton.html
单例模式在后端的应用
这个是笔者在通过 nodejs 做微信开发的时候，借助单例模式的思想优化相关的业务代码的实践所得，就是不能每次前端这边来一个请求，或者别的地方引用或者使用到封装的微信接口 API，就重新创建一个新的，那么数据量上去了，这边开销是会很大的，比如百万、千万等等，所以我们期望把它缓存下来，然后用到直接取就好了。
// 创建一个微信公众号相关的API类
class WechatOfficalAccountApi {
constructor(appId, appSecret, token) {
// code...
}
}
// 单例模式的实现
const createWechatOfficalAccountApi = (function (appId, appSecret, token) {
let instance = null;
return function () {
if (!instance) {
instance = new WechatOfficalAccountApi(appId, appSecret, token);
}
return instance;
};
})();
考虑到微信公众号的类另有用途，所以就没有都封装到类里面，而是单独抛出一个函数去做这件事，大家想一下这样写好不好啊？是的，不好。问题就在于，比如说我创建了一个单例对象实例是去处理公众号”江涛学编程“的相关业务的，后来迫于生计，老板决定卖艺，又搞了个”江涛学音乐“，那么这个时候你这个单例就歇菜了，因为它只有一个实现例的全局访问点，而 appid 每个微信公众号都是不同的。
考虑到楼上这个场景，其实不能简单地去像楼上去设计单例模式。我想到一个例子，就好比水产养殖这个专业，海王他就知道，单纯地在池子里养草鱼，草鱼会有点孤单，它会不会不快乐呢？它会不会绝食呢？于是它把龙虾也放了进来，这样子至少显得不那么孤单，可以聊聊天，龙虾你今天吃什么？草鱼你今天吃什么？池子里充满了欢声笑语，哦，我明白了，我也给咱微信 API 接口造一个池子，开干。
// 创建一个连接池
const wechatOfficalAccountApiPool = {};
// 创建一个微信公众号相关的API类
class WechatOfficalAccountApi {
constructor(appId, appSecret, token) {
// code...
}
}
// 单例模式的实现
function createWechatOfficalAccountApi(appId, appSecret, token) {
let instance = wechatOfficalAccountApiPool[appId];
if (!instance) {
instance = new WechatOfficalAccountApi(appId, appSecret, token);
wechatOfficalAccountApiPool[appId] = instance;
}
if (instance.appSecret !== appSecret || instance.token !== token) {
throw new Error(
`createWechatOfficalAccountApi(${appId}, ${appSecret}, ${token}): ` +
`conflict with existing one: (${instance.appId}, ${instance.appSecret}, ${instance.token})`
);
}
return instance;
}
为了更健壮鲁棒一点，我们已知微信的 appid 是唯一的，就以它作为 key 来搞，这样子的话就可以处理多个业务场景了，比如老板开了好多个媒体号，有“江涛学编程”，”江涛学音乐“，”江涛去旅行“等等，根据不同的业务场景和用途，就可以在最基础的通用性强的微信接口 API 上去扩展实现对应的业务场景的功能。
参考文献
维基百科 - 设计模式：https://zh.wikipedia.org/wiki/%E5%8D%95%E4%BE%8B%E6%A8%A1%E5%BC%8F
原文地址：https://zhengjiangtao.cn/coding/singleton.html