设计模式-单例模式以及应用场景
单例模式在前端开发过程中非常常见，通俗来说就是某个类只能有一个实例，只能实例化一次，之后所有实例化的操作都是返回之前已经实例化的实例
UML：
实现单例
利用es6实现单例模式：
class Singleton { constructor() { if (!Singleton.instance) { Singleton.instance = this; } return Singleton.instance; } } const single = new Singleton() const single2 = new Singleton() console.log(single === single2); // true 复制代码可以看到single和single2是相等的，因为single2创建实例的时候返回的还是上一次的实例，无论之后调用多少次都是如此
利用闭包实现单例模式：
const singleton = (function () { function Person() {} let singleInstance; return function () { // 第一次实例化时 if (!singleInstance) { singleInstance = new Person() } // 直接返回 return singleInstance; }; })(); const single = singleton(); const single2 = singleton(); console.log(single === single2); // true 复制代码Person需要放在IIFE中，若是放到外面，此时用户是可以直接new Person实例化，并不能很好的控制，放在IIFE中可以防止外部直接实例化
若是此时需要再创建一个类的单例，这样实现的单例模式便需要重新CV一份代码，显然是不符合我们的预期的，因此需要将上述代码进行改造:
function Person() {} /** * constructor： 将需要单例的类 通过参数传递 */ const singleton = function (constructor) { let singleInstance; return function () { // 第一次实例化时 if (!singleInstance) { constructor.apply(this, arguments); Object.setPrototypeOf(this, constructor.prototype); singleInstance = this; } // 直接返回 return singleInstance; }; }; const createPerson = singleton(Person) const p = new createPerson(); const p2 = new createPerson(); console.log(p === p2); // true 复制代码需要注意Object.setPrototypeOf(this, constructor.prototype);,若是不讲this的prototype指向重新指向到constructor，那么通过此进行的实例对象是不能调用constructor.prototype上面的方法的，因为此时this的prototype指向是singleton函数中return的匿名函数
使用Object.setPrototypeOf改变prototype的指向是并不是一件理想的事情
警告: ** 由于现代 JavaScript 引擎优化属性访问所带来的特性的关系，更改对象的
[[Prototype]]在各个*浏览器和 JavaScript 引擎上都是一个很慢的操作。其在更改继承的性能上的影响是微妙而又广泛的，这不仅仅限于obj.__proto__ = ...语句上的时间花费，而且可能会延伸到任何*代码，那些可以访问*任何***[[Prototype]]已被更改的对象的代码。如果你关心性能，你应该避免设置一个对象的[[Prototype]]。相反，你应该使用Object.create()来创建带有你想要的[[Prototype]]的新对象。
终极版本：
主要变动singleton函数，其他代码保持不变
const singleton = function (constructor) { let singleInstance; let singleConstructor = function () { // 第一次实例化时 if (!singleInstance) { constructor.apply(this, arguments); singleInstance = this; } // 直接返回 return singleInstance; }; singleConstructor.prototype = Object.create(constructor.prototype); return singleConstructor; }; 复制代码应用场景
单例模式不仅各种库、框架中十分常见，在日常开发过程使用的非常普遍，还可以帮助我们更优雅的组织代码、编写代码
Vuex
在vuex中，就有单例的使用: 省略一些无关代码
if (!Vue && typeof window !== 'undefined' && window.Vue) { install(window.Vue) } function install (_Vue) { if (Vue && _Vue === Vue) { console.error('[vuex] already installed. Vue.use(Vuex) should be called only once.') return } Vue = _Vue } 复制代码Message组件
在UI组件库中，Message组件是非常常见的，而且都是支持同时多个展示，那么本次利用单例，将其进行修改为同时只能展示一个，下面的案例以Vue为例
首先常见Message组件的内容
main.vue文件内容：
<template> <div v-show="visible">message组件</div> </template> <script type="text/babel"> export default { data() { return { visible: false }; }, methods: { close() { this.visible = false; }, show() { this.visible = true; } } }; </script> 复制代码代码内容非常简单，只有一个变量visible和两个函数，控制组件的展示和隐藏
接下来看如何控制其展示
main.js的内容:
import Vue from "vue"; import Main from "./main.vue"; let MessageConstructor = Vue.extend(Main); class Message { /** * 展示 message组件 */ show() { this.instance.show() } /** * 关闭 message组件 */ close() { this.instance.close() } /** * 单例 */ static getInstance() { if(!this.instance) { let instance = new MessageConstructor(); this.instance = instance; instance.$mount(); document.body.appendChild(instance.$el); } return this.instance } } Message.getInstance().show(); Message.getInstance().close(); 复制代码无论调用show多少次，展示的都是同一个，因为通过单例模式，使用的都是同一个实例
缓存
比如在业务开发过程中，将需要通过接口请求的数据或者一系列操作得到的数据进行缓存，这个数据具备持久性、不变性，否则缓存下来之后会导致出现问题，这个时候就可以利用单例模式将数据进行缓存
作者：Nordon
链接：https://juejin.cn/post/7016150720399278110