javascript设计模式有哪些_如何实现单例或观察者模式？_网络技术

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

发布时间 - 2025-12-27 00:00:00 点击率：次

JavaScript常用设计模式包括单例、观察者、工厂、策略等，其中单例确保全局唯一实例，常通过静态属性或模块导出实现；观察者模式实现一对多依赖通知，发布-订阅则进一步解耦为事件中心通信。

JavaScript 中常用的设计模式有单例模式、观察者模式、工厂模式、策略模式、代理模式、装饰器模式、发布-订阅模式、状态模式、命令模式等。其中单例和观察者（或其变体“发布-订阅”）在实际开发中出现频率高，实现也相对轻量。

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

核心是控制实例的创建时机与访问方式，避免重复初始化。JS 中没有类的严格封装，常用闭包或静态属性 + 条件判断来实现。

常见写法（ES6 Class + 静态实例）：

class Logger {
  constructor() {
    if (Logger.instance) {
      return Logger.instance;
    }
    this.logs = [];
    Logger.instance = this;
  }

  log(msg) {
    this.logs.push(`[${Date.now()}] ${msg}`);
  }
}

// 使用
const a = new Logger();
const b = new Logger();
console.log(a === b); // true

更稳妥的方式是用私有静态变量（ES2025+）或模块级闭包隐藏实例：

模块导出一个已创建的对象，天然单例（推荐，简单可靠）
用 Symbol 或 WeakMap 存储私有实例，防止外部篡改构造函数
注意：new 操作符配合 return 对象会跳过原型链，需手动绑定或改用工厂函数

观察者模式：对象间一对多依赖，被观察者变化时通知所有观察者

典型结构包含 Subject（目标）和 Observer（观察者）。JS 中常简化为：Subject 管理回调队列，提供 subscribe / unsubscribe / notify 方法。

class Subject {
  constructor() {
    this.observers = [];
  }

  subscribe(observer) {
    if (typeof observer === 'function') {
      this.observers.push(observer);
    }
  }

  unsubscribe(observer) {
    this.observers = this.observers.filter(fn => fn !== observer);
  }

  notify(data) {
    this.observers.forEach(observer => observer(data));
  }
}

// 使用
const subject = new Subject();
subject.subscribe(msg => console.log('A:', msg));
subject.subscribe(msg => console.log('B:', msg));
subject.notify('Hello'); // A: Hello, B: Hello

实际项目中，更常见的是“发布-订阅”（Pub/Sub）——解耦更彻底，通过事件中心通信，不直接持有观察者引用：

用对象存储事件名 → 回调数组映射（如 { click: [fn1, fn2], load: [fn3] }）
支持通配符、once、优先级等可扩展能力（如 EventEmitter）
Vue 的 $on/$emit、Node.js 的 EventEmitter 都是该思想的体现

什么时候选哪种？

单例适合全局唯一状态管理（如配置中心、日志器、缓存实例）；观察者适合松耦合通信（如 UI 更新、跨组件通知）；发布-订阅更适合大型系统中模块间解耦。

基本上就这些。不复杂但容易忽略细节，比如单例的构造拦截是否健壮、观察者是否及时取消订阅防内存泄漏。

# vue # javascript # es6 # java # js # node.js # node

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：建站主机关联域名后，如何优化SEO提升搜索引擎排名？

下一篇：如何设置登录超时自动退出

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：建站主机关联域名后，如何优化SEO提升搜索引擎排名？

下一篇：如何设置登录超时自动退出