什么是单例模式

简单点来说，单例模式就是确保某个类只有一个实例，并且最好只被创建过一次。对计算机来说，像打印机，线程池都是经典的单例模式。对于JavaScript所处的前端环境来说，像登录悬浮框，在整个页面中只会有一个，无论用户点击多少次，只会被创建一次。

单例模式实现实例—登录框

单例模式非常好理解，无非是办公室有个打印机，大家一起公用，没必要再每个人单独买一个了。所以按照这样的理解，先写出前端创建悬浮登录框的前端代码：

var createLoginDialog = function(){
    var div = document.createElement('div');
    div.innerHTML='登录悬浮框';
    var closeBtn = document.createElement('button');
    closeBtn.innerHTML = 'X';
    div.appendChild(closeBtn);
    closeBtn.onclick = function(){
        div.style.display='none';
    }
    document.body.appendChild(div);
    return div;
}
document.getElementById('loginBtn').onclick = function(){
    var loginDiv = createLoginDialog();
}

这应该是我们平时写出的“一般”实现单例代码，看起来单例是实现了。但有很大问题，就是每次创建都会新生成一个div，性能损耗不谈，本身也不是真正实现了单例模式。
单例模式的关键实现一是要在需要创建的时候才开始创建，即惰性创建，第二就是只被创建一次，再次使用的时候，不需要重复创建。在其他语言实现中，需要借助静态方法或者其他手段来使代码驻留内存，达到这一目的。JavaScript却不提供，但内存驻留却使我们想到了闭包。
所以再次修改代码，创建一个闭包来实现。

var createLoginDialog = (function(){
        var div;
        return function(){
            if(!div){
                    div = document.createElement('div');
                    div.innerHTML='登录悬浮框';
                    var closeBtn = document.createElement('button');
                    closeBtn.innerHTML = 'X';
                    div.appendChild(closeBtn);
                    closeBtn.onclick = function(){
                        div.style.display='none';
            }
                    document.body.appendChild(div);
            }else{
                        div.style.display='block';
            }
            return div;
        }
})();
document.getElementById('loginBtn').onclick = function(){
        var loginDiv = createLoginDialog();
}

抽象出JavaScript单例模式表达

实际上，对于js单例模式最核心的逻辑就是

var obj;
if(!obj){
    obj = XXX;
}

而对于以上最后写出的创建代码，也不尽完美，因为它违反了设计模式中的单一职原则。即创建对象和管理单例的逻辑都放在一个类的内部。
据此，我们可以剥离出创建单例模式的方法

var getSingleton = function(fn){
            var result;
            return function(){
                return result || (result = fn.apply(this,arguments));
            }
        }

最终在这个方法下实现代码：

var createLoginDialog = function(){
            var div = document.createElement('div');
            div.innerHTML='登录悬浮框';
            var closeBtn = document.createElement('button');
            closeBtn.innerHTML = 'X';
            div.appendChild(closeBtn);
            closeBtn.onclick = function(){
                div.style.display='none';
            }
            document.body.appendChild(div);
            return div;
        }
var getSingleton = function(fn){
            var result;
            return function(){
                return result || (result = fn.apply(this,arguments));
            }
        }
var createSingletonLogin = getSingleton(createLoginDialog);
document.getElementById('loginBtn').onclick = function(){
            var loginDiv = createSingletonLogin();
            loginDiv.style.display = 'block';
}