JavaScript常见设计模式：单例与观察者实现解析

IT行业相对于一般传统行业，发展更新速度更快，一旦停止了学习，很快就会被行业所淘汰。所以我们需要踏踏实实的不断学习，精进自己的技术，尤其是初学者。今天golang学习网给大家整理了《JavaScript设计模式有哪些？单例与观察者实现方法》，聊聊，我们一起来看看吧！

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

更稳妥的方式是用私有静态变量（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 更新、跨组件通知）；发布-订阅更适合大型系统中模块间解耦。

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

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~