javascript如何实现观察者模式_如何编写

观察者模式定义对象间一对多依赖关系，当被观察者状态改变时通知所有观察者更新；核心为Subject（维护列表并提供订阅/退订/通知方法）与Observer（响应变化的函数或含update方法的对象）。

观察者模式（Observer Pattern）在 JavaScript 中非常常用，本质是定义对象间的一对多依赖关系，当一个对象状态改变时，所有依赖它的对象都会得到通知并自动更新。它天然契合 JS 的事件机制，实现起来简洁灵活。

核心结构：Subject（被观察者） + Observer（观察者）

关键角色有两个：

• Subject：维护观察者列表，提供 subscribe（添加）、unsubscribe（移除）、notify（广播）方法；
• Observer：通常是一个函数或含 update 方法的对象，负责响应变化。

基础手写实现（函数式风格）

用闭包封装状态，避免暴露内部数组：

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

  subscribe(observer) {
    if (typeof observer === 'function') {
      this.observers.push(observer);
      return () => this.unsubscribe(observer); // 返回取消订阅函数
    }
  }

  unsubscribe(observer) {
    const index = this.observers.indexOf(observer);
    if (index > -1) this.observers.splice(index, 1);
  }

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

// 使用示例
const subject = new Subject();

const handler1 = (msg) => console.log('收到：', msg);
const handler2 = (msg) => alert('弹窗提醒：' + msg);

const unsubscribe1 = subject.subscribe(handler1);
subject.subscribe(handler2);

subject.notify('系统上线了！'); // 两个都触发

unsubscribe1(); // 取消 handler1
subject.notify('新版本发布'); // 只有 handler2 触发

登录后复制

增强版：支持事件类型与解耦（类似 EventEmitter）

真实项目中常需按“事件名”分类通知，避免全量广播：

标签： vue react javascript java js go