JavaScript 设计模式：单例模式的原理与实战

前言

设计模式在编程实践中占据着至关重要的地位。

设计模式（Design pattern）代表了行业内的最佳实践，通常被经验丰富的面向对象软件开发人员所采纳。它是针对软件开发过程中常见问题的通用解决方案，这些方案源于众多开发者长期试验与经验的总结。

近期正在深入研习设计模式，欢迎同行们共同探讨与交流。

1、什么是设计模式

在软件设计流程中，针对特定问题提出的简洁且优雅的解决方案。

将过往经验进行总结，并合理应用于具体场景，从而有效解决实际问题。

2、设计模式五大设计原则（SOLID）

S-单一职责原则

即一个程序模块只负责做好一件事。

O-开放封闭原则

对扩展开放，对修改封闭。

L-里氏置换原则

子类对象能够覆盖父类对象，并能在父类出现的任何地方使用。

I-接口独立原则

保持接口的单一性与独立性。

D-依赖倒置原则

高层模块不应依赖低层模块，二者都应依赖抽象；抽象不应依赖细节，细节应依赖抽象。简单来说，即使用方法只关注接口而不关注具体类的实现。

3、为什么需要设计模式？

易读性

采用设计模式能够显著提升代码的可读性，进而提高后续开发的效率。

可拓展性

设计模式有助于代码解耦，从而增强代码的可修改性与拓展性。

复用性

利用设计模式可以复用已有的成熟解决方案，避免重复造轮子。

可靠性

应用设计模式能增加系统的健壮性，使代码编写更加符合工程化标准。

4、单例模式

定义：唯一且全局访问。其核心是保证一个类仅有一个实例，并提供一个访问该实例的全局访问点。

另一种多例模式，通过一个类构造出多个不同的实例，这被称为多例模式。

单例模式与多例模式最本质的区别在于实例的数量。

单例模式确保永远只有一个实例，该实例可以被缓存并复用。

应用场景：适用于那些需要被缓存的内容，例如登录弹窗。

如果在项目中某个功能模块会被调用两次或更多次，都可以尝试使用单例模式，这能显著减少冗余代码。

参考以下伪代码逻辑：

const creatLoginLayer = () => {
    const div = document.createElement("div");
    div.innerHtml = "登录浮窗";
    div.style.display = "none";
    document.body.appendChild(div);
    return div;
};

document.getElementById("loginBtn").onclick = () => {
    const loginLayer = creatLoginLayer();
    loginLayer.style.display = "block";
};

creatLoginLayer函数的作用是创建一个登录浮窗并将节点添加到body上。下方代码处理登录按钮的点击事件，点击后创建登录浮窗，并将display属性从none修改为block，从而将其显示出来。

该逻辑本身没有错误，但需考虑性能问题：每次点击登录按钮都会执行这些代码。若项目中多处涉及此类操作，如前所述短短几行代码，在成百上千次调用中会严重损耗性能。此时，单例模式便发挥作用。

应用单例模式后的代码如下：

const getSingle = (fn) => {
    let result;
    return (...rest) =>{
        return result || (result = fn.apply(this.rest));
    };
};

const creatLoginLayer = () => {
    const div = document.createElement("div");
    div.innerHtml = "登录浮窗";
    div.style.display = "none";
    document.body.appendChild(div);
    return div;
};

const createSingleLoginLayer = getSingle(createLoginLayer);

document.getElementById("loginBtn").onclick = () => {
    const loginLayer = createSingleLoginLayer();
    loginLayer.style.display = "block";
};

可以看到，代码中增加了一个getSingle函数。这里涉及闭包概念，result变量只要存在引用便不会被销毁，起到了缓存作用。该函数的参数是一个function，如果result为null或undefined，则执行后续逻辑，将传入函数的返回值（即该div元素）赋给result。这样，后续函数只需执行一次；下次调用时，由于result已有值，直接返回缓存结果，不再执行后续逻辑。

至此，关于JavaScript中设计模式之单例模式的介绍结束。如需了解更多JavaScript中的单例模式内容，请搜索本站过往文章或继续浏览相关文章，感谢大家的支持！