惰性单例

惰性单例指的是在需要的时候才创建对象实例。惰性单例是单例模式的重点，这种技术在实 际开发中非常有用。实际上在 2-实现.md 中就使用过这种技术，instance 实例对象总是在我们调 用 Singleton.getInstance 的时候才被创建，而不是在页面加载好的时候就创建。不过这是基于 “类”的单例模式，前面说过，基于“类”的单例模式在 JavaScript 中并不适用。

点击头像，出现登录浮窗。

第一种解决方案是在页面加载完成的时候便创建好这个 div 浮窗，这个浮窗一开始肯定是隐 藏状态的，当用户点击登录按钮的时候，它才开始显示。这种方式有一个问题，也许我们根本不需 要进行登录操作，因为登录浮窗总是一开始就被创建好，那么很有可能将白白浪费一些 DOM 节点。

第二种解决方案是用户点击登录按钮的时候才开始创建该浮窗，虽然现在达到了惰性的目的，但失去 了单例的效果。当我们每次点击登录按钮的时候，都会创建一个新的登录浮窗 div。虽然我们可以在 点击浮窗上的关闭按钮时把这个浮窗从页面中删除掉，但这样频繁地创建和删除节点明显是不合理 的，也是不必要的。我们可以用一个变量来判断是否已经创建过登录浮窗，

var createLoginLayer = (function () {
  var div

  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'
};

还存在一些问题。第一是这段代码仍违反单一职责原则，创建对象和管理单例的逻辑都放在 createLoginLayer 中。第二是如果需要创建页面中唯一的 iframe 或 script 标签，需要把 createLoginLayer 函数几乎照抄一遍。