Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

preface

Design patterns are very important in our programming!

Design patterns represent best practices and are generally adopted by experienced object-oriented software developers. Design pattern is a solution to the common problems faced by software developers during software development. These solutions have been developed by numerous software developers over a long period of trial and error.

I am studying design pattern recently. Will you roll it together?

What are design patterns?

In software design, a concise and elegant solution to a specific problem.

It can solve practical problems by summarizing previous experience and applying it reasonably to a certain scene.

Five Principles of Design (SOLID)

  • S- Single responsibility principle

    A program only does one thing

  • O- Open and closed principle

    Extensible open, closed to modification

  • L- Richter substitution principle

    A subclass can override a parent class and appear where the parent class appears

  • I- Interface independence principle

    Keep interfaces single and separate

  • D- Dependence leads to principle

    Usage methods focus only on the interface and not on the implementation of concrete classes

Why are design patterns needed?

  • legibility

    Using design patterns improves the readability of our code and the efficiency of subsequent development

  • Can expand sex

    Decoupling the code with design patterns can greatly enhance the yi modifiability and extensibility of the code

  • reusability

    Use design patterns to reuse existing solutions without having to do the same work

  • reliability

    Using design patterns increases the robustness of the system and makes code authoring truly engineering

The singleton pattern

Definition: unique & global access. Ensure that a class has only one instance and provide a global access point to access it.

Another multi-example pattern is the multi-example pattern, which constructs multiple different instances from a single class.

The most essential difference between singleton and multi-instance patterns is the number of instances.

The singleton pattern always has only one instance, which can be cached and reused.

Application scenario: Contents that can be cached, such as login pop-ups.

I think it’s a place where if you can use it twice or more in your project, you can try it out and save a lot of code.

Take a look at this pseudocode:

const creatLoginLayer = () = > {
    const div = document.createElement("div");
    div.innerHtml = "Login to floating window";
    div.style.display = "none";
    document.body.appendChild(div);
    return div;
};

document.getElementById("loginBtn").onclick = () = > {
    const loginLayer = creatLoginLayer();
    loginLayer.style.display = "block";
};
Copy the code

CreatLoginLayer creates a login float window and adds the node to the body. Clicking on the login button creates the login float window and changes display from None to block to display it.

This logic is fine, but let’s think about it. Every time you click on the login button, you need to execute this code. What if there are many places in a project that need to be executed? We have just a few lines up here, but what if it’s hundreds or thousands or tens of thousands? This is where our singleton pattern comes in handy.

After using the singleton pattern:

const getSingle = (fn) = > {
    let result;
    return (. rest) = >{
        return result || (result = fn.apply(this.rest));
    };
};

const creatLoginLayer = () = > {
    const div = document.createElement("div");
    div.innerHtml = "Login to floating window";
    div.style.display = "none";
    document.body.appendChild(div);
    return div;
};

const createSingleLoginLayer = getSingle(createLoginLayer);

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

The result variable will not be destroyed as long as it is referenced. It acts as a cache. The argument to the function is function. Assign the return value of the function passed in to result, so the function below will execute once, and the next time result will have a value, so it will return directly, without doing any logic.