Shulou(Shulou.com)06/03 Report--

This article mainly shows you "how to achieve singleton pattern in JavaScript", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to achieve singleton pattern in JavaScript" this article.

Foreword:

Design patterns are very important in our programming!

Design patterns (Design pattern) represent best practices and are often adopted by experienced object-oriented software developers. Design pattern is the solution to the general problems faced by software developers in the process of software development. These solutions are summed up by many software developers after a long period of trial and error.

Recently, I have been learning design patterns. Would you like to roll them together?

1. What is a design pattern

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

Summing up the previous experience and reasonably applying it to a certain scene can solve practical problems.

2. Five design principles of design pattern (SOLID)

S-single responsibility principle

That is, a program can only do one thing well.

O-Open and closed principle

Expandable, open and closed to modification

L-Richter permutation principle

The subclass can override the parent class and can appear where the parent class appears

I-interface independence principle

Keep the interface single and independent

D-dependency-induced principle

The usage method only focuses on the interface, not on the implementation of the concrete class.

3. Why do you need design patterns?

Readability

The use of design patterns can improve the readability of our code and the efficiency of subsequent development.

Extensibility

Using design patterns to decouple the code can well enhance the yi modification and expansibility of the code.

Reusability

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

Reliability.

The use of design patterns can increase the robustness of the system and make code writing truly engineering.

4. Singleton mode

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

Another multi-instance pattern, which constructs multiple different instances from one class, is the multi-instance pattern.

The most essential difference between singleton model and multi-case model is the number of instances.

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

Application scenarios: content that can be cached, such as login pop-up windows.

I think it's a place where if you can use it two or more times in your project, you can try this, which can reduce a lot of code.

Take a look at this pseudo code:

Const creatLoginLayer = () = > {const div = document.createElement ("div"); div.innerHtml = "login float"; div.style.display = "none"; document.body.appendChild (div); return div;}; document.getElementById ("loginBtn"). Onclick = () = > {const loginLayer = creatLoginLayer (); loginLayer.style.display = "block";}

The function of creatLoginLayer is to create a login float window and add nodes to the body. The following is a click event of the login button. Clicking the login button will create a login float window and change the display from none to block to display it.

There's nothing wrong with this logic, but let's think about how to execute this code every time you click the login button. What if there are a lot of places in a project? There are only a few lines above us, what if it is hundreds or even tens of thousands? Whether it is a great loss of performance, at this time, our singleton model came in handy.

After using singleton mode:

Const getSingle = (fn) = > {let result; return (... rest) = > {return result | | (result = fn.apply (this.rest));};}; const creatLoginLayer = () = > {const div = document.createElement ("div"); div.innerHtml = "login float"; 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";}

As you can see, a getSingle function has been added, and there is a concept of closure. As long as the result variable is referenced all the time, it will not be destroyed, which acts as a cache. The parameter of the function is a function. If result is null or undefined, execute the following logic. Assign the return value of the incoming function, that is, the div, to result, so that the following function can be executed once. Result has a value when it is called next time. So it just goes back, and it doesn't execute the logic behind.

These are all the contents of the article "how to implement the singleton pattern in JavaScript". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.