JavaScript常见设计模式有哪些？单例与观察者实现方法

本文深入解析了JavaScript中最常用且实用的两大设计模式——单例模式与观察者模式（及其高阶变体发布-订阅模式），不仅清晰阐述了它们的核心思想与典型应用场景，还提供了简洁可靠的ES6+实现方案：单例通过静态实例、模块导出或闭包确保全局唯一性，避免重复初始化；观察者则以Subject管理回调队列实现一对多通知，而发布-订阅进一步解耦为基于事件名的通信机制，广泛应用于Vue、Node.js等主流框架。文章更点明关键实践细节——如单例的构造拦截健壮性、观察者内存泄漏风险及何时选用哪种模式，帮你避开常见坑，真正将设计模式用对、用好。

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

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

• 模块导出一个已创建的对象，天然单例（推荐，简单可靠）
• 用 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 更新、跨组件通知）；发布-订阅更适合大型系统中模块间解耦。

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

以上就是《JavaScript常见设计模式有哪些？单例与观察者实现方法》的详细内容，更多关于的资料请关注golang学习网公众号！