Javascript如何实现观察者模式_如何管理事件订阅？-js教程-PHP中文网

Javascript如何实现观察者模式_如何管理事件订阅？

夜晨

发布： 2025-12-22 16:30:09

原创

159人浏览过

观察者模式核心是明确发布者与订阅者关系，通过on/emit/off实现事件管理，需注意引用一致以避免内存泄漏，Proxy更适合属性级响应式监听。

javascript如何实现观察者模式_如何管理事件订阅？

JavaScript 中观察者模式的核心是让多个“观察者”（订阅者）能监听某个“被观察者”（发布者）的状态变化，并在变化发生时自动收到通知。它天然适合事件管理，比如 DOM 事件、自定义状态更新、数据流响应等。关键不在于用类或框架，而在于理清“谁发布、谁订阅、如何通知、如何取消”这四个环节。

手动实现一个轻量级观察者类

不需要依赖第三方库，几行代码就能搭出可复用的事件总线：

用 Map 或普通对象存储事件名 → 回调函数数组的映射
on(eventName, callback)：把回调推入对应事件的队列
emit(eventName, ...args)：遍历该事件的所有回调并执行
off(eventName, callback)：从队列中精确移除指定回调（注意引用一致性）

示例：

class EventEmitter {
  constructor() {
    this.events = new Map();
  }
  on(type, fn) {
    if (!this.events.has(type)) this.events.set(type, []);
    this.events.get(type).push(fn);
  }
  emit(type, ...args) {
    const fns = this.events.get(type) || [];
    fns.forEach(fn => fn(...args));
  }
  off(type, fn) {
    const fns = this.events.get(type) || [];
    const i = fns.indexOf(fn);
    if (i > -1) fns.splice(i, 1);
  }
}

登录后复制

避免内存泄漏：正确取消订阅

订阅后不取消，回调函数会一直持有外部作用域引用，导致对象无法被垃圾回收。尤其在组件销毁、页面跳转时容易出问题：

百度AI开放平台

百度提供的综合性AI技术服务平台，汇集了多种AI能力和解决方案

105

查看详情

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

确保 off() 调用时传入与 on() 完全相同的函数引用（不能是箭头函数或匿名函数）
推荐在订阅时保存回调引用，便于后续清理：const handler = () => {...}; em.on('data', handler); em.off('data', handler);
支持一次性订阅（once）：内部 emit 后自动 off，适合只响应首次变化的场景