The definition of singleton pattern is to ensure that a class has only one instance and provide a global access point to access it.

Singleton mode is a common mode. We often only need one object, such as thread pool, global cache and window object.

Simple singleton mode

It's not complicated to implement a singleton mode. It's just to use a variable to mark whether an object has been created for a class. If so, the object created before will be returned directly when the class is acquired next time.

var Singleton = function(name) {
    this.name = name
    this.instance = null
}

Singleton.prototype.getName = function() {
    alert(this.name)
}

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

It is relatively simple to obtain the unique object of Singleton class through Singleton.getInstance, but there is a problem. The user does not know that this is a Singleton class

Single instance mode implemented by agent

Our goal now is to implement a transparent singleton class. When users get objects from this class, they can use it just like other ordinary classes. According to the principle of single responsibility, the createDiv class implements the function, and the proxySingletonCreateDiv class manages the singleton management mode, so as to achieve the composable effect

// Create a generic class
var CreateDiv = function(html){
    this.html = html
    this.init()
}

CreateDiv.prototype.init = function() {
    var div = document.createComment('div')
    div.innerHTML = this.html
    document.body.appendChild(div)
}

//Introduce proxy class
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) // true

Inert singleton mode

Separate the responsibility of creating instance objects from the responsibility of managing singletons. Here is an example of creating a login box

// Single management case
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 landing window'
    div.style.display = 'none'
    document.body.appendChild(div)
    return div
}

var createSingleLoginLayer = getSingle(createLoginLayer)

document.getElementById('loginBtn').onclick = function(){
    var loginLayer = createLoginLayer()
}

Singleton pattern is a simple but very useful technique, especially the lazy singleton technique, which creates an object only when it is appropriate, and until the only one is created. What's more, the responsibility of creating objects and managing singletons is distributed in two different methods, and the combination of the two methods has the power of singleton pattern.