Common Design patterns of JavaScript (1) Singleton pattern

Today we will learn about the design pattern commonly used in JavaScript-- singleton pattern

definition

ensures that there is only one instance of a class and provides a global access point to it

means that it is unique and can be accessed globally

singletons correspond to multiple cases. Generally, we create a class that can instantiate many objects, which is multiple cases, while singleton patterns can instantiate only one object. This instance object can be cached and reused.

Application scenario

when you encounter something in development, it feels like it has been reused many times. If you can cache this object and use this instance object each time, instead of recreating one object, you can use singleton mode here.

for example, in front-end page development, our login pop-up window is generally unique, no matter how many clicks, only one login pop-up window will be created. And the pop-up window should be cached, where the rendering efficiency of the page can be improved, so the login pop-up window can be created in singleton mode.

before use

We are going to create a login pop-up window

// Business logic: create a login pop-up window
function createLoginLayer(){
  // create a login pop-up box
  const div = document.createElement("div");
  div.innerHTML = Login pop-up window;
  // set the pop-up window style to invisible
  div.style.display = "none";
  // add a box to the page
  document.body.appendChild(div);
  // return to this login pop-up box
  return div;
};

then bind the click event to the login button, click on it, create a pop-up window, and display it on the page.

// bind the click event to the login button
document.getElementById("loginBtn").onclick = () => {
  // create a login pop-up window
  const loginLayer = createLoginLayer();
  // display the login pop-up window
  loginLayer.style.display = "block";
};

every time you click the login button, a login pop-up window is created, which consumes a lot of resources. Our login pop-up window can be a unique, cached object, and we consider using singleton pattern to ReFactor our code

after use

use closures to implement singleton mode

// accept that the parameter is a function
function getSingle(fn) {
  // define a variable to identify whether this object has been created.
  let result = null;
  // return a function
  return function(...args) {
    // form a closure and cache the result
    if(result == null){
      // if result==null, assign the result of the passed function fn execution to result;. Here, create a login pop-up box.
      result = fn.apply(this, args)
    }
    // return the object result
    return result
  };
};

this code ensures that there is always only one login pop-up window, which means that each time you create a login pop-up window, you directly use the one you created for the first time, rather than creating a new one.

Business Logic: create a login pop-up window

function createLoginLayer(){
  // create a login pop-up box
  const div = document.createElement("div");
  div.innerHTML = Login pop-up window;
  // set the pop-up window style to invisible
  div.style.display = "none";
  // add a box to the page
  document.body.appendChild(div);
  // return to this login pop-up box
  return div;
};

use singleton mode

// getSingle returns a function to create a login pop-up window
const createSingleLoginLayer = getSingle(createLoginLayer);

bind a click event to the login button

document.getElementById("loginBtn").onclick = () => {
  const loginLayer = createSingleLoginLayer();
  loginLayer.style.display = "block";
};