深入理解JavaScript设计模式之单例模式

什么是单例模式

单例模式（Singleton Pattern）就像‘独生子女’，确保某个类在整个系统中只有一个实例，并提供一个全局访问点。简单来说，一个类一辈子只有一个孩子。在 JavaScript 编程世界中，例如 Web 应用中的登录窗口，无论你点击多少次登录按钮，只会弹出一次。

为什么需要单例模式

想象一下，你是DR钻戒的老板。我们推出一款特殊的钻戒——“单例钻戒”。这款钻戒一生只能购买一次，每位顾客终身仅能拥有一枚。这正是单例模式（Singleton Pattern）的生动写照。

常见应用场景包括

1. 浏览器中的任务管理器或标签页管理：保证只有一个全局管理器在运行。
2. 通知中心 / 消息中心：统一处理应用内的消息推送和响应。
3. 侧边栏 / 弹窗组件：页面中始终只显示一个实例，避免重复创建。
4. 全局配置文件管理：读取并维护一份全局配置，供整个应用使用。
5. 如Vue的Vuex，React的Context或Redux）和组件生命周期管理机制。

通过单例模式，我们可以有效地控制资源的使用，减少重复对象的创建，提升系统性能与稳定性。

单例模式实现

透明单例模式实现

      var Singleton = function (name) {this.name = name;};Singleton.prototype.getName = function () {alert(this.name);};Singleton.getInstance = (function () {var instance = null;return function (name) {if (!instance) {instance = new Singleton(name);}return instance;};})();var a = Singleton.getInstance( 'sven1' ); var b = Singleton.getInstance( 'sven2' ); alert ( a === b ); // true

上面的代码中是一个简单实现单例模式的方式，通过调用Singleton.getInstance()来获取Singketon类的唯一实例，实现很简单，但是有一个缺点，降低了类的“透明性”。
通常情况下，使用一个类的时候，习惯用new ClassName()的方式来新建一个对象，但是Singleton类并不是通过new直接创建实例的，而是通过Singleton.getInstance()这个静态方法来获取唯一的实力，这就必须要求使用这个类的人必须知道它是一个单例模式，并且要记住不能用new来创建对象，必须使用Singleton.getInstance()来创建对象，这种写法会让类的使用变得不够直观和不透明，增加了使用上的认知负担，很容易导致吴用。

不透明单例模式

 var CreateDiv = (function () {var instance;var CreateDiv = function (html) {if (instance) {return instance;}this.html = html;this.init();return (instance = this);};CreateDiv.prototype.init = function () {var div = document.createElement("div");div.innerHTML = this.html;document.body.appendChild(div);};return CreateDiv;})();var a = new CreateDiv("sven1");var b = new CreateDiv("sven2");console.log("a:", a);console.log("b:", b);console.log(a === b); 

在上一步骤中，我们实现了一个不透明的单例模式，即用户必须通过 Singleton.getInstance() 的方式来获取实例，而不是使用常见的 new 方式创建对象。这种方式虽然实现了单例的效果，但不够直观，降低了类的“透明性”。

为了改进这一点，我们可以尝试实现一个透明的单例模式。所谓“透明”，是指用户在使用时可以像使用普通类一样，直接通过 new CreateDiv() 的方式来创建实例，而无需关心这是一个单例类。
我们通过一个自执行的闭包函数来实现这个目标。在这个闭包中，我们将实例变量（如 instance）封装为“私有变量”，使其不会被外部轻易访问或修改，并且在整个页面不刷新的情况下，始终只存在一个实例。

例如，我们定义了一个 CreateDiv 类，它在被 new 调用时会检查是否已经存在实例，如果存在，则返回已有的实例，从而保证了全局唯一性。整个过程对使用者是透明的，使用方式和普通类完全一致，这样一来，既保留了单例的核心特性，又提升了使用的直观性和代码的可维护性。

虽然很流畅，很有单例的感觉，但是透明的单例模式还是有缺点的：

1. 代码复杂度提高了：为了封装单例逻辑，使用了闭包和自执行函数，让代码变得不容易理解。
2. 构造函数职责不单一：createDiv构造函数不仅要负责创建对象和初始化，还要控制只能有一个单例的逻辑，违反了"单一职责原则"
3. 不容易扩散或者修改：如果我们还想把这个类从“只能创建一个实例”改为“可以创建多个实例”，就必须去修改构造函数内部的逻辑，非常不灵活，虽然这个写法让使用更自然（像普通类一样用 new 创建实例），但实现起来更复杂，维护成本也更高

用代理实现单例模式

var CreateDiv = function (html) {this.html = html;this.init();};CreateDiv.prototype.init = function () {var div = document.createElement("div");div.innerHTML = this.html;document.body.appendChild(div);};var ProxySingletonCreateDiv = (function () {var instance;return function (html) {if (!instance) {instance = new CreateDiv(html);}return instance;};})();var a = new ProxySingletonCreateDiv("sven1");var b = new ProxySingletonCreateDiv("sven2");console.log("a", a);console.log("b", b);console.log(a === b);

上面代码对透明单例模式的代理模式进行了优化，原来的CreateDiv类在构造函数中直接包含了控制单例的逻辑导致职责不清楚，不容易扩展，现在通过引入一个代理类ProxySingletonCreateDiv，将管理单例的逻辑从CreateDiv中抽离出去，让它回归为一个存粹用于创建div元素的普通类，具体来说，CreateDiv只负责创建对象和初始化操作，比如生成div并插入页面，单例的逻辑则有代理函数ProxySingletonCreateDiv来处理，这个代理函数是一个闭包，内部维护了一个唯一的实例，当第一次调用的时候会创建CreativeDiv实力，之后直接返回该实例，这种方法是缓存代理的一种典型应用，让CreateDiv更加的灵活，通用，同时又不丢失单例的特性。

javaScript中的单例模式

上面的集中单例模式实现方式偏向于传统的面向对象的写法，即通过"类"来创建唯一的对象，但是在javaScript中，这种做法也不完全适用，javaScript在es5中是一门无类(class-free)语言，创建对象非常简单，如果只需要一个唯一的对象，没必要先定义一个类再来创建实例，要知道单例模式的核心即可：“确保只有一个实例，并提供全局访问”，最然全局变量具备唯一和全局访问的特性，但是它并不是真正的单例模式，而且存在命名冲突，全局作用域污染，在大型的项目中使用全局作用域尤其危险，为了减少全局变量污染带来的问题，可以采取使用命名空间和使用闭包封装私有变量解决。

使用命名空间

适当的使用命名空间，并不会杜绝全局变量，但是可以减少全局变量的数量，最简单的方法就是对象的字面量的方式解决：

var namespace1 = {a: function () {alert(1);},b: function () {alert(2);},};

把 a 和 b都定义为 namespace1 的属性，这样可以减少变量和全局作用域打交道的机会。

使用闭包封装私有变量

  var user = (function () {var __name = "sven",__age = 29;return {getUserInfo: function () {return __name + "-" + __age;},};})();

将一些变量封装在闭包的内部，只暴露一些接口跟外界通信，用下划线来约定私用变量__name和__age，它们被封装在闭包产生的作用域中，外部变量访问不到这两个变量，这就进行了全局的隔绝污染。

惰性单例

前面了解了单例模式的一些实现方法，接下来学习一下单例模式比较重要的一个知识"惰性单例【Lazy Singleton】"，惰性单例指的是需要的时候才创建实例，而不是在页面加载的时候就提前创建，这种方式更节省资源，实际开发中，以弹窗为例，如果一开始就创建弹窗元素，用户可能根本不需要弹出窗口，这样回造成资源浪费，如果每次点击按钮都创建一个新的弹窗，虽然实现了按需展示，但却失去了单例的唯一性，正确的做法是首次点击创建弹窗，再次点击直接使用已经创建好的弹窗实例，这样就实现了惰性单例，即实现了只创建一次，又坐到了用的时候才创建，兼顾了功能与性能。

<html><head><style>.modal {position: fixed;width: 200px;height: 200px;line-height: 200px;text-align: center;left: 50%;top: 50%;transform: translate(-50%, -50%);background: goldenrod;}</style></head><body><button id="open">打开</button><button id="close">关闭</button><script>const Moda = (function () {let instance = null;return function () {if (!instance) {instance = document.createElement("div");instance.innerHTML = "模态框";instance.className = "modal";instance.style.display = "none";document.body.appendChild(instance);}return instance;};})();document.getElementById("open").onclick = function () {// 创建一个模态框const modal = Moda();modal.style.display = "block";};document.getElementById("close").onclick = function () {// 删除模态框const modal = Moda();modal.style.display = "none";};</script></body>
</html>

通用的惰性单例

我们知道了什么是惰性单例和如何实现惰性单例，但是不难发现，普通的惰性单例还是违反了单一职责原则，创建对象和管理单例的逻辑都放在了Moda内部，如果我们下次需要创建页面唯一的iframe或者script或者更多类型的标签，就必须如法炮制创建更多的Moda函数，几乎照抄一遍，针对这种方法需要将不变的部分隔离出来，创建div，iframe，img逻辑其实可以完全抽象出来【使用一个变量标志是否创建过，如果创建过则下次直接返回这个已经常见好的对象】。

return function () {if (!instance) {instance = document.createElement("div");...    }return instance;};

接下来就把如何管理单例的逻辑抽离出来，这些逻辑封装在getSingle函数内部，创建对象的方法fn被当成参数动态传入getSingle函数。

var getSingle = function( fn ){ var result; return function(){ return result || ( result = fn .apply(this, arguments ) ); } 
}; 

接下来将用于创建登录浮窗的方法用参数 fn 的形式传入 getSingle，我们不仅可以传入Mode，还能传入 ModeScript、ModeIframe、ModeXhr 等。之后再让getSingle返回一个新的函数，并且用一个变量 result 来保存fn 的计算结果。result 变量因为身在闭包中，它永远不会被销毁。在将来的请求，如果 result 已经被赋值，那么它将返回这个值。

<html><head><style>.modal {position: fixed;width: 200px;height: 200px;line-height: 200px;text-align: center;left: 50%;top: 50%;transform: translate(-50%, -50%);background: goldenrod;}</style></head><body><button id="open">打开</button><button id="close">关闭</button><script>let getSingle = function (fn) {let result;return function () {return result || (result = fn.apply(this, arguments));};};let ModelDiv = function () {let div = document.createElement("div");div.innerHTML = "模态框";div.className = "modal";div.style.display = "none";document.body.appendChild(div);return div;};let ModelIframe = function () {let iframe = document.createElement("iframe");iframe.style.display = "none";document.body.appendChild(iframe);return iframe;};var createSingleLoginLayer = getSingle(ModelDiv);var createSingleLoginLayer2 = getSingle(ModelIframe);document.getElementById("open").onclick = function () {// 创建一个模态框const modal = createSingleLoginLayer();const ModelIframe1 = createSingleLoginLayer2();modal.style.display = "block";ModelIframe1.style.display = "block";};document.getElementById("close").onclick = function () {// 删除模态框const modal = createSingleLoginLayer();const ModelIframe2 = createSingleLoginLayer2();modal.style.display = "none";ModelIframe2.style.display = "none";};</script></body>
</html>

结语

设计模式不是“炫技”，而是"沉淀"，希望我们通过阅读和学习《JavaScript设计模式》和实践中，在显示业务需求开发中写出更具有可维护性，可扩展性的代码。

致敬—— 《JavaScript设计模式》· 曾探