concept

The singleton pattern is defined to ensure that a class has only one instance and provide a global access point to access it. The most common example is the configuration classes of some projects.

The first time you use the constructor of a class, you create an instance, and subsequent calls to the constructor return only that instance

Simple implementation

Create a singleton object class.

    var Singleton = function( name ){
     this.name = name;
     this.instance = null;
    };
    Singleton.prototype.getName = function(){
     alert ( this.name );
    };
Copy the code

Ensure that only one object exists

    Singleton.getInstance = function( name ){
         if(!this.instance ){
             this.instance = new Singleton( name );
         }
         return this.instance;
    };
    var a = Singleton.getInstance( 'sven1' );
    var b = Singleton.getInstance( 'sven2' );
    alert ( a === b ); // true 
Copy the code

Transparent singleton pattern

Our goal now is to implement a “transparent” singleton class from which users can create objects just like any other normal class. In the following example, we will use the CreateDiv singleton class, which is responsible for creating a unique DIV node on the page, as follows:

var CreateDiv = (function(){
     var instance;
     var CreateDiv = function( html ){
         if ( instance ){
             return instance;
         }
         this.html = html;
         this.init();
         return instance = this;
 };
 CreateDiv.prototype.init = function(){
     var div = document.createElement( 'div' );
         div.innerHTML = this.html;
         document.body.appendChild( div );
     };
     returnCreateDiv; }) ();var a = new CreateDiv( 'sven1' );
var b = new CreateDiv( 'sven2' );
alert ( a === b ); // true 
Copy the code

The proxy implements the singleton pattern

We have now moved the logic responsible for managing the singleton into the proxySingletonCreateDiv class. This makes CreateDiv a generic class, which is combined with proxySingletonCreateDiv to achieve singleton effect.

var CreateDiv = function( html ){
     this.html = html;
     this.init();
};
CreateDiv.prototype.init = function(){
     var div = document.createElement( 'div' );
     div.innerHTML = this.html;
     document.body.appendChild( div );
};
// Introduce proxySingletonCreateDiv:
var ProxySingletonCreateDiv = (function(){
     var instance;
     return function( html ){
         if ( !instance ){
             instance = new CreateDiv( html );
         }
         return instance;
     }
})();
var a = new ProxySingletonCreateDiv( 'sven1' );
var b = new ProxySingletonCreateDiv( 'sven2' );
alert ( a === b ); 
Copy the code

Inert singleton

Lazy singletons are instances of objects that are created only when needed. For example, the login pop-up box in qq

Since JS is a classless speech, creating an instance is not that difficult, but you still need to be aware of the fact that global objects are prone to contamination

    1. Using namespaces
    1. Use closures to encapsulate private variables

Generic lazy singleton

A generic lazy singleton is essentially a separation of the logic for managing and creating singleton objects

Take creating web page QQ login pop-up as an example

Create object logic

var getSingle = function( fn ){
     var result;
     return function(){
         return result || ( result = fn .apply(this.arguments)); }};var createLoginLayer = function(){
 var div = document.createElement( 'div' );
 div.innerHTML = 'I'm logging in to the floating window.';
 div.style.display = 'none';
 document.body.appendChild( div );
 return div;
};
Copy the code

The management logic

var createSingleLoginLayer = getSingle( createLoginLayer );
    document.getElementById( 'loginBtn' ).onclick = function(){
         var loginLayer = createSingleLoginLayer();
         loginLayer.style.display = 'block';
}; 
Copy the code

The last

This article introduces three cases of proxy patterns in JS design patterns. If you find this article useful, you may wish to give it a thumbs up.