前言

最近开始学习设计模式，一共23种设计模式，作为学习且在项目中最实用的也就那么几种，所以一个一个开始攻破设计莫，学的就是设计模式的思想。

什么是单例模式

首先听名字就知道：“单例”说明全局只会有这一个实例。所以不能出现下面这种情况：

class Person {}

 const p1 = new Person()
 const p2 = new Person()
 console.log(p1 === p2) // false
复制代码

所以为了实现单例，应该怎么做呢？

原理

既然不能出现多次实例，那就下一次实例化的时候判断该类是否已经被实例化了，所以无非就是在类中判断是否实例化。

class Person {
  static getInstance() {
    if (!Person.instance) {
      Person.instance = new Person();
    }
    return Person.instance;
  }
}
复制代码

首先这里写了个静态方法，该方法返回的就是这个类的实例，主要是判断是否存在过该类的实例，有就直接返回，没有就 new 一个出来。接着我们调用测试一下。

const p1 = Person.getInstance();
const p2 = Person.getInstance();
console.log(p1 === p2); // true
复制代码

这样就实现了全局唯一实例

应用场景

学习了单例模式，那么这种单例模式应用的场景是怎么样的呢。接下来就来实现一个全局弹窗（Modal）的实现。

• 首先写两个按钮，分别控制弹窗的显示和隐藏，其他样式先就不一一写了

<div id='open'>打开</div>
<div id='close'>关闭</div>
复制代码

• 实现一个Modal类

class Modal {
  constructor() {
    this.modal = document.createElement("div");
    this.modal.innerHTML = "还未登录";
    this.modal.id = "modal";
    this.modal.style.border = "1px solid red";
    this.modal.style.display = "none";
    document.body.appendChild(this.modal);
  }
  static getInstance() {
    if (!Modal.instance) {
      Modal.instance = new Modal();
    }
    return Modal.instance;
  }
  show() {
    this.modal.style.display = "block";
  }
  hide() {
    this.modal.style.display = "none";
  }
}
复制代码

• 最后给按钮绑定点击事件

document.getElementById("open").addEventListener("click", () => {
  const modal = Modal.getInstance();
  modal.show();
});
document.getElementById("close").addEventListener("click", () => {
  const modal = Modal.getInstance();
  modal.hide();
});
复制代码

分析

先贴出了代码，然后再逐个分析

• 定义的Modal类里面有一个构造器，改构造器只有一个modal对象，该对象就是我们要创建的弹窗DOM对象。所以该对象就会有innerHTML、id、style等属性，最后我们把该对象放在body上。而这个构造器就说明我们在后面实例化的时候就会实例出来一个对象，就是这个弹窗的DOM。
• 第二个代码块就是静态方法，来识别单例模式。如果没有这个判断是被，则每次点击‘打开’按钮就会重新生成新的实例，这就与我们的单例模式背道而驰了。
• 最后就是show函数和hide函数，分别控制实例化后的modal 的显示和隐藏

最后

分析到这了，其实也没啥子好写的了，相比看看代码就很明了了，之所以写这篇文章也是在加强自己的对单例模式的印象。因为之前都没怎么学习过设计模式，模模糊糊的也不清楚这些设计模式用在什么地方，该怎么用，导致写的代码很多都很垃圾。而最近几天学习设计模式，就知道了学习设计模式能让代码变得这么高大上。所以这里也很荣幸看到了修言哥的JavaScript 设计模式核心原理与应用实践这本小册。学习了很多，后面还会对其他的设计模式逐个击破。