preface

Recently, I started to learn design patterns. There are 23 design patterns in total, and there are only a few that are the most practical in the project. Therefore, I began to break through design one by one and learn the idea of design patterns.

What is a singleton pattern

Just hear the name: “singleton” means that there will only be one global instance. So you can’t have the following:

class Person {}

 const p1 = new Person()
 const p2 = new Person()
 console.log(p1 === p2) // false
Copy the code

So in order to implement a singleton, what do you do?

The principle of

Since you can’t have multiple instances, you can determine whether the class has been instantiated the next time you instantiate it, so you do nothing more than determine whether it has been instantiated within the class.

class Person {
  static getInstance() {
    if (!Person.instance) {
      Person.instance = new Person();
    }
    return Person.instance;
  }
}
Copy the code

First of all, we have a static method, which returns an instance of this class, and we want to see if there’s ever been an instance of this class. If there’s ever been an instance of this class, we want to return it. And then we call the test.

const p1 = Person.getInstance();
const p2 = Person.getInstance();
console.log(p1 === p2); // true
Copy the code

This implements a globally unique instance

Application scenarios

Now that you have learned the singleton pattern, what are the scenarios in which this singleton pattern applies? The next step is to implement a global Modal implementation.

  • First write two buttons, respectively control the popover display and hide, other style first not a write
<div id='open'> <div id='close'>Copy the code
  • Implement a Modal class
class Modal { constructor() { this.modal = document.createElement("div"); This.modal.innerhtml = "not logged in yet "; 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"; }}Copy the code
  • Finally, bind the button to a click event
document.getElementById("open").addEventListener("click", () => {
  const modal = Modal.getInstance();
  modal.show();
});
document.getElementById("close").addEventListener("click", () => {
  const modal = Modal.getInstance();
  modal.hide();
});
Copy the code

Analysis of the

The code is posted and then analyzed one by one

  • You define a Modal class that has one constructor in it, and only one modifier constructormodalObject, which is the popover DOM object we’re going to create. So this object will haveinnerHTML,id,styleAnd finally we put the object on the body. And what this constructor is saying is that when we instantiate later we’re going to instantiate an object, which is the DOM of this popover.
  • The second block of code is the static method to recognize the singleton pattern. If there is no yes, a new instance will be generated every time the ‘open’ button is clicked, which runs counter to our singleton pattern.
  • Finally, the show function and the hide function control the display and hiding of the instantiated modal respectively

The last

Analysis to this, in fact, there is nothing good to write, compared to look at the code is very clear, the reason to write this article is to strengthen their impression of the singleton pattern. Because I haven’t learned much about design patterns before, and I don’t know exactly where and how to use them, I write a lot of junk code. The last few days of learning about design patterns have shown how learning about design patterns can make code so superior. Therefore, it is a great honor to see the small volume of Core principles and application practices of JavaScript design patterns by Xiuyan Brother. I’ve learned a lot, and I’ll break down other design patterns one by one.