前端设计模式之【单例模式】

文章目录

前言

hello world欢迎来到前端的新世界


😜当前文章系列专栏:前端设计模式

🐱‍👓博主在前端领域还有很多知识和技术需要掌握,正在不断努力填补技术短板。(如果出现错误,感谢大家指出)🌹

💖感谢大家支持!您的观看就是作者创作的动力

介绍

单例模式是一种创建型设计模式,它确保一个类只有一个实例,并提供一个全局访问点。这种模式常用于需要全局访问点的情况,比如配置信息、日志记录器、线程池等。

单例模式的案例

日志记录器:在一个系统中只需要一个日志记录器来记录系统的运行日志,这时就可以使用单例模式保证该日志记录器的唯一性。

数据库连接池:在许多应用中都需要对数据库进行操作,为了提高性能和效率,通常会使用数据库连接池。通过单例模式可以确保整个应用程序中只有一个数据库连接池实例。

配置信息类:很多应用程序都需要读取配置信息,比如数据库连接信息、系统参数等。使用单例模式可以确保配置信息类的唯一性,并且方便全局访问。

线程池:在多线程编程环境下,线程池被广泛应用以提高性能和减少资源消耗。通过单例模式可以确保整个应用程序中只有一个线程池实例。

计数器:有时候需要对某个对象进行计数,比如统计网站访问量或者某个资源的使用次数,这时可以使用单例模式确保计数器的唯一性。

实现单例模式

javascript 复制代码
// 单例构造器
const FooServiceSingleton = (function () {
  // 隐藏的Class的构造函数
  function FooService() {}

  // 未初始化的单例对象
  let fooService;

  return {
    // 创建/获取单例对象的函数
    getInstance: function () {
      if (!fooService) {
        fooService = new FooService();
      }
      return fooService;
    }
  }
})();

实现的关键点有:

  • 使用 IIFE创建局部作用域并即时执行;
  • getInstance() 为一个 闭包 ,使用闭包保存局部作用域中的单例对象并返回。
    我们可以验证下单例对象是否创建成功:
javascript 复制代码
const fooService1 = FooServiceSingleton.getInstance();
const fooService2 = FooServiceSingleton.getInstance();

console.log(fooService1 === fooService2); // true

优缺点?

优点

  • 划分命名空间,减少全局变量
  • 增强模块性,把自己的代码组织在一个全局变量名下,放在单一位置,便于维护
  • 且只会实例化一次。简化了代码的调试和维护

缺点

  • 由于单例模式提供的是一种单点访问,所以它有可能导致模块间的强耦合
  • 从而不利于单元测试。无法单独测试一个调用了来自单例的方法的类,而只能把它与那个单例作为一 个单元一起测试

后言

创作不易,要是本文章对广大读者有那么一点点帮助 不妨三连支持一下,您的鼓励就是博主创作的动力

相关推荐
电子科技圈13 分钟前
基于车载SerDes和OpenGMSL协议的SoC设计与验证:行业高频问题解析
设计模式·车载系统·软件构建·设计规范
下家1 小时前
为了脱离前端鄙视链,于是自己写个框架 - React 党看完沉默了
前端·前端框架
zhiyouTech1 小时前
从“被看见“到“被信任“:关于信源评级机制的一点观察
大数据·前端·人工智能
Hashan1 小时前
Vibe Coding 下前后端怎么对接接口?后端不给力的兜底方案
前端·后端·vibecoding
你挚爱的强哥2 小时前
【sgKeyboard】自定义组件:虚拟键盘
前端·javascript·计算机外设
锅里游的鱼吖2 小时前
echarts自定义折线图
前端·javascript·数据库
ClinicTech2 小时前
高速冷冻离心机的温控系统与安全保护逻辑解析
设计模式·架构·健康医疗·设计语言
hunteritself2 小时前
卷卷卷!GPT-6 Sol、Luna 正式发布,OpenAI 开始卷价格了
大数据·前端·人工智能·深度学习·transformer
何何____3 小时前
Vue 全局事件总线详解
前端·javascript·vue.js
涉密IT资质笔记4 小时前
涉密人员脱密期管理规范:期限分级模型、就业限制边界与违规认定标准
java·服务器·前端·网络·数据库