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

在提高开发水平，往中高级前端工程师中，利用设计模式是必不可少的一条道路。掌握设计模式的思想远远比硬套重要，因为设计模式是一种思想，不局限于开发语言。但实际上由于语言的特性不同，往往在实现的时候会有不少差异。

《javascript设计模式文章系列》是参照《JavaScript设计模式与开发事件》以及网络博客结合自身经验总结所写，希望在写下文章分享知识的同时能够加深记忆。

javascript设计模式之单例模式

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

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

惰性单例：

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

普通实现方式：

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中的设计模式很多都离不开闭包，传递函数作为参数的方式去实现。所以认真仔细研究一下。彻彻底底把闭包搞懂。

这篇文章先到这里！！