设计模式之单例模式

前端路桥

共 4416字,需浏览 9分钟

 ·

2022-02-24 01:46

单例模式的基本概念

单例模式是一种保证一个类仅有一个实例,并提供一个全局访问点的设计模式,它还有些许其他的叫法,比如说懒汉模式、单子模式等。那么这种设计模式解决了一个什么事情呢?我们来看下这样一段代码

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


浏览 33
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报