javascript的设计模式有哪些_如何实现单例模式和观察者模式

admin 百科 16
JavaScript常用设计模式包括单例、观察者、工厂、代理等,其中单例确保类唯一实例,适用于配置管理;观察者实现一对多依赖更新,Subject与Observer直接通信,区别于发布-订阅的事件总线解耦。

javascript的设计模式有哪些_如何实现单例模式和观察者模式-第1张图片-佛山资讯网

JavaScript 中常用的设计模式包括单例模式、观察者模式、工厂模式、代理模式、装饰器模式、策略模式、发布-订阅模式(常与观察者混淆但有区别)、命令模式、适配器模式等。其中单例和观察者最常用于前端架构和状态管理。

单例模式:确保一个类只有一个实例

核心是控制构造函数的调用次数,避免重复创建对象。适用于配置管理、全局状态、日志工具、弹窗管理器等场景。

常见实现方式:

  • 闭包 + 静态属性:利用 IIFE 封装私有实例,通过返回的函数暴露唯一入口
  • ES6 Class + 静态实例缓存:在类上挂载 instance 属性,构造前检查是否已存在
  • 模块顶层导出:利用 ES 模块天然单例特性(最简单、推荐)

示例(Class 方式):

立即学习“Java免费学习笔记(深入)”;

class Logger {
  constructor() {
    if (Logger.instance) {
      return Logger.instance;
    }
    this.logs = [];
    Logger.instance = this;
  }
  log(msg) {
    this.logs.push(`[${new Date().toISOString()}] ${msg}`);
  }
}
const logger1 = new Logger();
const logger2 = new Logger();
console.log(logger1 === logger2); // true

登录后复制

观察者模式:定义对象间一对多依赖,当一个对象改变状态,所有依赖者自动更新

典型结构包含 Subject(被观察者)Observer(观察者)。Subject 维护观察者列表,提供添加、移除、通知方法;Observer 实现统一更新接口。

标签: vue react javascript es6 java js 前端 node.js node 工具 proxy 区别

发布评论 0条评论)

还木有评论哦,快来抢沙发吧~