How to implement singleton pattern in JavaScript

This article mainly introduces JavaScript implementation examples of singleton mode and code explanations. Readers in need can follow it for reference.

Traditional singleton pattern

Ensures that a class has only one instance and provides a global access point to access it.

The core idea of ​​implementing a singleton

is nothing more than using a variable to mark whether an object has been created for a certain class. If so, it will be returned directly the next time an instance of the class is obtained. For the objects created before, we will use JavaScript to implement this idea forcibly. Please see the code:

var Singleton = function( name ){
  this.name = name;
};
Singleton.prototype.getName = function(){　　 alert ( this.name );
};
Singleton.getInstance = (function(){ 　　var instance = null;
　　return function( name ){
　　　　　　　　　　if ( !instance ){
　　　　　　　　　　　　instance = new Singleton( name );
　　　　　　　　　　}
　　　　　　　　return instance;　　　　　　 }
})();

We use Singleton.getInstance to obtain the only object of the Singleton class. This is indeed no problem, but js itself There is no concept of class, so it makes no sense for us to implement it with traditional singleton thinking. Such code is smelly and long (actually, I feel uncomfortable looking at it). Below we use JavaScript closures to implement a singleton. Please look at the code:

var Createp = (function(){ 　　　　　　var instance;
　　　　　　var Createp = function( html ){ 　　　　　　　　　　if ( instance ){
　　　　　　　　　　　　return instance; 　　　　　　　　　　}
　　　　　　　　　　this.html = html; this.init();
　　　　　　　　　　return instance = this;
};
Createp.prototype.init = function(){
var p = document.createElement( 'p' );
p.innerHTML = this.html; 
document.body.appendChild( p );
　　　　　　};
　　　　　　return Createp; })();
var a = new Createp( 'sven1' ); var b = new Createp( 'sven2' );
alert ( a === b ); // true

As you can see, we have indeed used closures to implement a singleton, but this code is still highly coupled. Createp The constructor is actually responsible for two things. The first is to create the object and execute the initialization init method, and the second is to ensure that there is only one object. Such code has unclear responsibilities. Now we have to separate these two tasks. The constructor is responsible for constructing the object. As for judging whether to return an existing object or construct a new object and return it, we leave it to another function to complete. In fact, it is to satisfy a programming idea: the single responsibility principle. Such code can be better decoupled. Please look at the following code:

var Createp = function (html) {
    this.html = html;
    this.init();
  };
  Createp.prototype.init = function () {
    var p = document.createElement('p');
    p.innerHTML = this.html;
    document.body.appendChild(p);
  };
  var ProxySingletonCreatep = (function () {
    var instance;
    return function (html) {
      if (!instance) {
        instance = new Createp(html);
      }
      return instance;
    }
  })();
  var a = new ProxySingletonCreatep('sven1');
  var b = new ProxySingletonCreatep('sven2');
  alert(a === b); //true

As you can see, our constructor Createp is now only responsible for constructing objects. As for whether to return existing objects or construct new objects and Return, we leave this matter to the proxy class proxySingletonCreatep. This kind of code looks comfortable (zhuang) and convincing (bi)!

Finally, post a highly abstract singleton pattern code, the essence of lazy singleton!

//单例模式抽象，分离创建对象的函数和判断对象是否已经创建
  var getSingle = function (fn) {
    var result;
    return function () {
      return result || ( result = fn.apply(this, arguments) );
    }
  };

The formal parameter fn is our constructor. We only need to pass in any constructor we need to generate a new lazy singleton. For example, if you pass in the constructor to create a girlfriend and call getSingle(), you can generate a new girlfriend. If you call getSingle() in the future, only the girlfriend you just created will be returned. As for a new girlfriend - she doesn't exist.

Common Singleton Scenarios

When you only need to generate a unique object, such as a page login box, there can only be one login box, then you can use the idea of ​​​​a singleton to implement it , of course, you don’t need to implement it using the singleton idea. The result may be that you have to regenerate and display a login box every time you want to display the login box (consuming performance), or you may accidentally display two login boxes. a login box.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to implement file upload in nodejs express

How to implement a blog management platform in Vue SpringBoot

How to solve the maximum call stack error exceeded in nodejs

There are examples of asynchronous components in Vue

How to implement circular references between components in Vue.js

How to implement animation effects and callback functions

How to use jQuery to operate tables Implementing cell merging

How to implement route parameter passing in vue-router

The above is the detailed content of How to implement singleton pattern in JavaScript. For more information, please follow other related articles on the PHP Chinese website!