Example Analysis of singleton pattern in web Front end

Editor to share with you the example analysis of the singleton pattern in the front end of web, I believe most people do not know much about it, so share this article for your reference. I hope you will gain a lot after reading this article. Let's learn about it together.

Singleton mode (Singleton Pattern)

As the name implies, the maximum number of instances of Class in the singleton pattern is 1. The singleton pattern comes in handy when an object is needed to perform certain tasks throughout the system. In other scenarios, try to avoid the use of singleton mode, because singleton mode will introduce global state, and a healthy system should avoid introducing too much global state.

To implement the singleton pattern, you need to solve the following problems:

How can I be sure that there is only one instance of Class?

How can I easily access the only instance of Class?

How does Class control the instantiation process?

How to limit the number of Class instances to 1?

We generally solve the above problems by implementing the following two points:

Hide the constructor of Class to avoid multiple instantiations

Create / get a unique instance by exposing a getInstance () method

The singleton pattern in Javascript can be implemented in the following ways:

/ / Singleton constructor const FooServiceSingleton = (function () {/ / hidden Class constructor function FooService () {} / / uninitialized singleton object let fooService; return {/ / create / get singleton object function getInstance: function () {if (! fooService) {fooService = new FooService ();} return fooService;}) ()

The key points to be realized are:

Use IIFE to create a local scope and execute it immediately

GetInstance () is a closure that saves the singleton object in the local scope and returns.

We can verify whether the following singleton object is created successfully:

Const fooService1 = FooServiceSingleton.getInstance (); const fooService2 = FooServiceSingleton.getInstance (); console.log (fooService1 = fooService2); / / true

Scenario example

Define namespaces and implement branching methods

Login box

Store in vuex and redux

Advantages

Divide namespaces and reduce global variables

Enhance modularity, organize your code under a global variable name and put it in a single location for easy maintenance

And will only be instantiated once. Simplifies debugging and maintenance of code

Shortcoming

Because the singleton mode provides a single point of access, it may lead to strong coupling between modules.

Which is not conducive to unit testing. You cannot test a class that calls a method from a singleton alone, but only as one with that singleton

Each unit is tested together.

The above is all the content of the article "sample Analysis of Singleton patterns in the web Front end". 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!