JavaScript设计模式之单例模式【惰性单例】

在提高开发水平，往中高级前端工程师中，利用设计模式是必不可少的一条道路。掌握设计模式的思想远远比硬套重要，因为设计模式是一种思想，不局限于开发语言。但实际上由于语言的特性不同，往往在实现的时候会有不少差异。
《javascript设计模式文章系列》是参照《JavaScript设计模式与开发事件》以及网络博客结合自身经验总结所写，希望在写下文章分享知识的同时能够加深记忆。

<font color=#002984 size=6 >javascript设计模式之单例模式</font>

如果你学过Java那么你会想到先定义单例类，然后提供getInstance静态方法返回单例对象。但由于javascript是一种无类语言，基于原型！所以在实现上略有不同。但单例模式的核心就是：唯一对象，并且供全局使用。

我们可以利用全局变量来模拟单例模式（就是往window对象中添加属性），但通常不推荐这种做法，因为全局的东西损耗性能，容易污染。优化的方式可自行查询
惰性单例（重中之重）在实际应用中，这种单例模式非常常见且有用。惰性单例也就是说单例对象只有到使用到的时候才创建，相反就是一开始就创建单例对象然后等待使用。
通用惰性单例，在惰性单例的基础下优化，更加遵循职责单一的原则

惰性单例：

==场景==登陆弹窗：在实际开发中，如果使用到需要登陆的功能则自动弹出登陆弹窗提醒用户进行登陆，如果此时用户取消登陆再次点击则又会弹出登陆弹窗。也就是说，登陆弹窗可能会反反复复的多次弹出。

<font color=#002984 size=3 >普通实现方式：</font>
1.先创建登陆div到页面中
2.当点击登陆，显示登陆div
3.当点击取消，隐藏登陆div

    <button id='btnLogin'></button>
   
    <script>
      //自执行函数，创建登陆Pop并返回元素 
      let loginPop = (function () {
        let loginDiv = document.createElement('div');
        loginDiv.style.display = 'none';
        document.body.appendChild(loginDiv);
        // 点击弹窗则取消显示
        loginDiv.onclick = function () {
          loginDiv.style.display = 'none';
        };
        return loginDiv;
      })();
    
      // 点击则显示
      document.getElementById('btnLogin').onclick = function () {
        loginPop.style.display = 'block';
      };
    
    </script>

这样会存在一个问题，不管用户需不需要登陆，这里都创建了登陆div。如何优化？

<!-- 单例方式 -->
<script>

  let createLoginPop = (function () {
    let loginDiv;     // 闭包 ： 该对象常存
    return function () {
      if (!loginDiv) {
        loginDiv = document.createElement('div');
        loginDiv.style.display = 'none';
        document.body.appendChild(loginDiv);
        loginDiv.onclick = function () {
          loginDiv.style.display = 'none';
        };
      }
      return loginDiv；
    }
  })()

  // 在使用的时候才创建登陆div
  document.getElementById('btnLogin').onclick = function () {
    let loginDiv = createLoginPop();
    loginDiv.style.display = 'block';
  }

</script>

但是该案例仍然存在问题：不够通用【违反了单一原则，单例逻辑与创建登陆div在同个函数内】。

假设增加天气Pop，该就得复制粘贴代码了。记住时刻带着理解程序中变与不变的逻辑，将其拆分。
单例的实现逻辑不会变，但单例所创建的是登陆Pop，天气Pop这些是会变化的。

通用惰性单例

<!-- 单例方式 : 通用 -->
<script>

  // 创建登陆Pop 返回创建的元素 
  let createLoginPop = function () {
    let loginDiv = document.createElement('div');
    loginDiv.style.display = 'none';
    document.body.appendChild(loginDiv);
    loginDiv.onclick = function () {
      loginDiv.style.display = 'none';
    };
    return loginDiv;
  }

  // 创建天气Pop 返回创建的元素 
  let createWeatherPop = function () {
    let loginDiv = document.createElement('div');
    loginDiv.style.display = 'none';
    document.body.appendChild(loginDiv);
    loginDiv.onclick = function () {
      loginDiv.style.display = 'none';
    };
    console.log(loginDiv);
    return loginDiv;
  }

  // 单例模式
  let getSingle = function (createElFn) {
    var result;     // 闭包 ： 该对象常存
    return function () {
      return result || (result = createElFn.apply(this, arguments));
    }
  }


  // 这一步很关键，这里一种单例只能调用一次 
  let getLoginPop = getSingle(createLoginPop);
  let getWeatherPop = getSingle(createWeatherPop);


  document.getElementById('btnLogin').onclick = function () {
    // 调用多次仍是同一个对象 
    let loginDiv1 = getLoginPop();
    let loginDiv2 = getLoginPop();
    loginDiv1.style.display = 'block';
    console.log(loginDiv1 === loginDiv2);
  }

  document.getElementById('btnWeather').onclick = function () {
    let weatherDiv = getWeatherPop();
    weatherDiv.style.display = 'block';
  }

</script>

这里可能比较难理解的是闭包的方式。但一定要掌握，因为js中的设计模式很多都离不开闭包，传递函数作为参数的方式去实现。所以认真仔细研究一下。彻彻底底把闭包搞懂。

这篇文章先到这里！！