Detailed explanation of the steps to implement singleton mode in JS

This time I will bring you a detailed explanation of the steps to implement single case mode in JS. What are the precautions for JS to implement singleton mode. The following is a practical case. Let’s take a look. one time.

Traditional Singleton Pattern

Ensure there is only one instance of a class and provide a global access point to it.

Implementing the core idea of ​​singleton

It is nothing more than using a variable to mark whether an object has been created for a certain class. If so, the next time an instance of the class is obtained, the previously created object will be returned directly. Next, we use JavaScript to To forcefully implement this idea, 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 does not have the concept of a class, so it makes no sense for us to implement it with traditional singleton ideas. Such code It's smelly and long (actually I feel uncomfortable looking at it). Below we use JavaScript's closure to implement a singleton, please see 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's 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. This kind of code can be better decoupled, please see 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 an existing object or construct a new object and return it, we leave this matter to the proxy class proxySingletonCreatep. This kind of code is comfortable to look at. (zhuang) obey (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.

Singleton common 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 singleton idea to implement it. Of course, you don’t have to use the singleton idea to implement it. That will bring 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.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to operate the case conversion of the first letter when Jackson parses a json string

localstorage and sessionstorage How to use

in Vue

The above is the detailed content of Detailed explanation of the steps to implement singleton mode in JS. For more information, please follow other related articles on the PHP Chinese website!