前端常用的7大设计模式-单例模式

概述

单例模式(Singleton Pattern)是一种创建型设计模式,它确保一个类只有一个实例,并提供一个全局访问点来访问该实例。单例模式通常用于管理全局状态、共享资源或配置对象等场

特点

  1. 唯一实例:确保一个类只有一个实例。
  2. 全局访问:提供一个全局访问点,方便其他代码访问该实例。
  3. 延迟初始化:实例在第一次被请求时才创建,而不是在程序启动时立即创建。

那么单例模式的使用场景都有什么呢?

  • 在 Vue 应用中,Vuex 的 Store 就是单例模式的应用
  • 全局的公共提示框、通知栏等
  • ......

那么单例模式如何实现?

这就是一个简单的单实例实现、下面是实现步骤

1. 使用私有属性来存储modal的状态

2. 使用私有属性来存储实例

3. 使用私有属性来控制constructor 防止外部实例化

4. 外部只能使用getInstance来获取实例

js 复制代码
class PublicModal {

  private state: string = "hide";
  private static instance: PublicModal | null;
  private constructor() {}
  static getInstance(): PublicModal {
    if (this.instance === null) {
      this.instance = new PublicModal();
    }
    return this.instance;
  }
  show() {
    if (this.state === "show") return;
    this.state = "show";
  }
  hide() {
    if (this.state === "hide") return;
    this.state = "hide";
  }
}

const modal1 = PublicModal.getInstance();
const modal2 = PublicModal.getInstance();

那怎么不用class来实现单例模式呢?

我想很多人第一想法应该是用闭包的思想去维护单一实例状态 那么接下来我将使用闭包来实现单例模式

js 复制代码
const Singleton = (function () {
  let instance;
  function createInstance() {
    return {
      data: {
        show: true,
      },
     hideMethod() { 
       if (!this.show) return; 
          this.show = false; 
     },
     showMethod() { 
       if (this.show) return; 
          this.show = true;
     },
  }
  return {
    getInstance() {
      if (!instance) {
        instance = createInstance();
      }
      return instance;
    },
  };
})();

单例模式的优缺点

优点

减少内存开销 由于只有一个实例存在,单例模式可以减少内存占用,特别是在需要频繁创建和销毁对象的场景中

控制实例化过程 单例模式通过私有构造函数和静态方法控制实例化过程,防止外部代码随意创建实例。增强了代码的安全性和可控性。

全局访问点 通过单例模式,可以提供一个全局访问点,方便其他模块或组件访问该实例。 避免了频繁传递实例的麻烦,简化了代码结构

全局唯一实例单例模式确保一个类只有一个实例,避免了重复创建对象,节省了系统资源。适用于需要全局唯一对象的场景,例如公共交互组件、日志记录等

缺点

扩展性差 单例模式的设计初衷是确保一个类只有一个实例,因此难以扩展为多个实例如果需要支持多个实例,单例模式可能不再适用

违反单一职责原则单例类通常既负责业务逻辑,又负责实例管理,这违反了单一职责原则,如果单例类的职责过多,可能导致代码臃肿和难以维护

相关推荐
lijun_xiao20091 小时前
前端最新Vue2+Vue3基础入门到实战项目全套教程
前端
90后的晨仔1 小时前
Pinia 状态管理原理与实战全解析
前端·vue.js
杰克尼1 小时前
JavaWeb_p165部门管理
java·开发语言·前端
90后的晨仔1 小时前
Vue3 状态管理完全指南:从响应式 API 到 Pinia
前端·vue.js
90后的晨仔1 小时前
Vue 内置组件全解析:提升开发效率的五大神器
前端·vue.js
我胡为喜呀1 小时前
Vue3 中的 watch 和 watchEffect:如何优雅地监听数据变化
前端·javascript·vue.js
我登哥MVP2 小时前
Ajax 详解
java·前端·ajax·javaweb
非凡ghost2 小时前
Typora(跨平台MarkDown编辑器) v1.12.2 中文绿色版
前端·windows·智能手机·编辑器·软件需求
馨谙3 小时前
/dev/null 是什么,有什么用途?
前端·chrome
JamSlade3 小时前
流式响应 sse 系统全流程 react + fastapi为例子
前端·react.js·fastapi