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

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

javascript设计模式之单例模式

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

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

惰性单例：

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

普通实现方式：1.先创建登陆div到页面中2.当点击登陆，显示登陆div3.当点击取消，隐藏登陆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；}})()// 在使用的时候才创建登陆divdocument.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中的设计模式很多都离不开闭包，传递函数作为参数的方式去实现。所以认真仔细研究一下。彻彻底底把闭包搞懂。

这篇文章先到这里！！