js design patterns: what is singleton pattern? Introduction to js singleton mode

This article brings you content about js design patterns: What is the singleton pattern? The introduction of js singleton mode has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

What is the singleton pattern

Definition: 1. There is only one instance. 2. Can be accessed globally

Main solution:A globally used class is frequently created and destroyed.

When to use js singleton mode: When you want to control the number of instances and save system resources.

How to solve: Determine whether the system already has this singleton, if so, return it, if not, create it.

Advantages of js singleton mode: 1. There is only one instance in the memory, which reduces memory overhead, especially when instances are frequently created and destroyed (such as managing the homepage page cache). 2. Avoid multiple occupation of resources (such as file writing operations).

Disadvantages of singleton mode: No interface, no inheritance, conflicts with the single responsibility principle. A class should only care about the internal logic, not how to instantiate it outside.

js singleton mode usage scenarios: 1. Global cache. 2. Pop-up window

Implement js singleton mode:

const singleton = function(name) {
    this.name = name
    this.instance = null
}

singleton.prototype.getName = function() {
    console.log(this.name)
}

singleton.getInstance = function(name) {
    if (!this.instance) { // 关键语句
        this.instance = new singleton(name)
    }
    return this.instance
}

// test
const a = singleton.getInstance('a') // 通过 getInstance 来获取实例
const b = singleton.getInstance('b')
console.log(a === b)

Singleton mode in JavaScript

Because JavaScript is a classless language, and in JS Global objects meet two conditions of the singleton pattern. Many times we treat the global object as a singleton mode to use

var obj = {}

Practice of the pop-up box layer

One way to implement the pop-up box is to first create the pop-up box and then hide it, so If it is a child, some unnecessary DOM overhead will be wasted. We can create it when we need the pop-up box, and combine it with the singleton mode to achieve only one instance, thus saving some DOM overhead. The following is part of the code for the login box:

//弹框层的实践
const createLoginLayer = function() {
    const myDiv = document.createElement('div')
    myDiv.innerHTML = '登入浮框'
    // myDiv.style.display = 'none'
    document.body.appendChild(myDiv);
    return myDiv
}

//使单例模式和创建弹框代码解耦
const getSingle = function(fn) {
  let result = null;
  return function() {
      if(!result){
          result = fn.apply(this, arguments);
      }
    return result;
  }
}

const createSingleLoginLayer = getSingle(createLoginLayer)

document.getElementById('loginBtn').onclick = function() {
    createSingleLoginLayer()
}

Related recommendations:

Detailed Explanation of the Constructor Pattern of JS Design Pattern

php Design pattern, design pattern

php design pattern singleton pattern code, php design pattern

The above is the detailed content of js design patterns: what is singleton pattern? Introduction to js singleton mode. For more information, please follow other related articles on the PHP Chinese website!