单例模式

保证一个类仅有一个实例，并提供一个访问它的全局访问点

• 用代理实现单例模式
  思路：先创建一个普通的类；再写一个代理函数，用来返回普通类的实例化，但是需要一个变量来标记是否是单例。

// 1.创建一个普通的类
var CreateDiv = function( html ){
    this.html = html;
};
/*
 2.写一个代理函数
 这个函数是个立即执行的匿名函数，会形成一个闭包
*/
var ProxySingletonCreateDiv = (function(){
    // 2-1 标记变量
    var instance;
    return function( html ){
        if ( !instance ){
            // 2-2 原始类的实例化
            instance = new CreateDiv( html ); 
        }
        return instance;
    }
})();

var a = new ProxySingletonCreateDiv( 'sven1' );
var b = new ProxySingletonCreateDiv( 'sven2' );
alert ( a === b ); // true

• js 中的单例模式
  上面的方法是比较传统的单例模式。在js中，没有类的概念，有一种天生的单例模式，就是全局变量。
  var a = {} a是一个全局变量，可以全局自由访问，并且可以是独一无二的。满足单例的核心，所以，全局变量是单例。
  不过，全局变量有缺点：可以被覆盖，会造成命名空间污染。
  在ES6中let 和 const 可以解决命名冲突。

• 惰性单例
  不是在页面加载好的时候就创建，而是按需创建。常用应用场景：登录浮窗。

方案一：
先创建好浮窗，设置display = "none";点击登录按钮 设置 display = "block"
缺点：如果用户进入页面没有登录行为，就浪费加载DOM节点。
方案二
点击登录按钮，在创建浮窗。
缺点：如果用户多次点击，就会创建多个浮窗，还需要一个关闭按钮，来删除浮窗。这样频繁创建和删除节点，很耗性能，也没有必要。
方案三
使用单例模式

/*
单例模式的创建分两步：
1 标记标量
2 返回原始类的实例化或原始函数
*/
var createLoginLayer = (function(){
    // 1 标记变量
    var div;
    // 2 返回原始函数
    return function(){
        if ( !div ){
            div = document.createElement( 'div' );
            div.innerHTML = '我是登录浮窗';
            div.style.display = 'none';
            document.body.appendChild( div );
        }
        return div;
    }
})();

document.getElementById( 'loginBtn' ).onclick = function(){
    var loginLayer = createLoginLayer();
    loginLayer.style.display = 'block';
};

以上方法，还有更好的改进方法，使其变得更加通用 P68