使用惰性单例进行性能优化

单例模式的定义是保证一个类仅有一个实例，并提供一个访问他的全局访问点。说明白点就是这个类只会被创建一次不会随着你的多次点击而被多次创建。
惰性单利指的是在需要的时候才创建对象实例。这种技术在实际开发中非常有用，下面会有一个例子
实现一个单例模式并不复杂，无非是用一个变量来标志当前是否为一个类来创建过对象。
试想一下,当我们单机登陆按钮的时候，页面中间会出现一个悬浮框，而这个悬浮框是唯一的，无论单击多少次登陆按钮，这个浮窗都只会创建一次，那么这个登陆浮窗就适合用单例模式创建。
第一种方式就是页面加载的时候创建好，点击登陆的时候让他显示，代码如下

<html>
  <body>
    <button id="loginBtn">登陆</button>
  </body>
</html>
<script>
           var login = (function(){
                var oDiv = document.createElement('div');
                oDiv.innerHTML = '我是登陆窗口';
                oDiv.style.display = 'block';
                    document.body.appendChild(oDiv);
               return oDiv
           })()
           document.getElementById('loginBtn').onclick = function(){
             login.style.display = 'block';
           }
</script>

这种方式有一个问题也许我就是单纯的看看网页根本就不需要登陆，一开始就创建好很有可能浪费一些dom节点。下面我们来修改一下代码

<html>
  <body>
    <button id="loginBtn">登陆</button>
  </body>
</html>
<script>
           var createLogin = function(){
                var oDiv = document.createElement('div');
                oDiv.innerHTML = '我是登陆窗口';
                oDiv.style.display = 'none';
                    document.body.appendChild(oDiv);
               return oDiv
           }
           document.getElementById('loginBtn').onclick = function(){
                     var login = createLogin()
             login.style.display = 'block';
           }
</script>

上面的写法虽然避免了初始化的时候加载dom，但同时也带来了一个新的问题就是每次点击的时候都会创建一次节点明显是不合理的。
这时我们就可以通过单例模式来继续改进和优化，通过一个变量来判断是否创建过登陆窗口

<html>
  <body>
    <button id="loginBtn">登陆</button>
  </body>
</html>
<script>
       var createLogin = function(){
            var oDiv ;
            if(!oDiv ){
               oDiv = document.createElement('div');
               oDiv.innerHTML = '我是登陆窗口';
               oDiv.style.display = 'none';
               document.body.appendChild(oDiv);
              }
              return oDiv
        }
       document.getElementById('loginBtn').onclick = function(){
         var login = createLogin()
         login.style.display = 'block';
       }
</script>

上面就是一个惰性单例的典型应用，当然上面的代码仍然违反了‘单一职责’的原则，假如我们要创建一个h标签是不是意味着我们要把上面的标签，复制一边。有兴趣的话，大家可以试着想办法继续优化

使用惰性单例进行性能优化

推荐阅读更多精彩内容