javascript如何实现观察者模式_如何编写-js教程-PHP中文网

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

幻影之瞳

发布： 2025-12-20 17:11:10

原创

695人浏览过

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

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

观察者模式（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）

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

动态WEB网站中的PHP和MySQL：直观的QuickPro指南第2版

动态WEB网站中的PHP和MySQL详细反映实际程序的需求，仔细地探讨外部数据的验证(例如信用卡卡号的格式)、用户登录以及如何使用模板建立网页的标准外观。动态WEB网站中的PHP和MySQL的内容不仅仅是这些。书中还提到如何串联JavaScript与PHP让用户操作时更快、更方便。还有正确处理用户输入错误的方法，让网站看起来更专业。另外还引入大量来自PEAR外挂函数库的强大功能，对常用的、强大的包

525

查看详情

立即学习“Java免费学习笔记（深入）”；

class EventEmitter {
  constructor() {
    this.events = {}; // { 'click': [fn1, fn2], 'data': [...] }
  }

  on(event, listener) {
    if (!this.events[event]) this.events[event] = [];
    this.events[event].push(listener);
    return () => this.off(event, listener);
  }

  off(event, listener) {
    if (!this.events[event]) return;
    const index = this.events[event].indexOf(listener);
    if (index > -1) this.events[event].splice(index, 1);
  }

  emit(event, ...args) {
    const listeners = this.events[event] || [];
    listeners.forEach(fn => fn(...args));
  }
}

// 使用
const ee = new EventEmitter();
ee.on('user:login', (user) => console.log('欢迎', user.name));
ee.on('user:logout', () => console.log('已登出'));

ee.emit('user:login', { name: '张三' });

登录后复制

注意事项与实用建议

手写观察者不难，但几个细节容易踩坑：

避免内存泄漏：务必提供 unsubscribe 或 off，尤其在组件销毁（如 React useEffect cleanup、Vue beforeUnmount）时调用；
监听器执行顺序：JS 中数组遍历是同步且按注册顺序，如需控制顺序，可考虑插入优先级或使用 Map 维护；
错误隔离：单个监听器报错不应阻断其他监听器，可在 notify 内加 try/catch；
不用重复造轮子：复杂场景推荐用成熟库（如 RxJS 的 Observable、或者 mitt、tiny-emitter 等轻量 EventEmitter）。