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

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

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);
  }
}

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

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

标签： vue react javascript es6 java 回调函数 websocket proxy 作用域