当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript观察者模式应用与实现

JavaScript观察者模式应用与实现

2026-03-10 13:24:31 0浏览收藏

本文深入浅出地剖析了JavaScript中观察者模式的核心实现——一个不到20行代码却功能完备的EventEmitter，它通过为每个事件名维护回调数组，真正支持多监听、精准移除和业务可扩展性；文章明确指出DOM原生addEventListener无法替代它，因其受限于DOM上下文、缺乏逻辑解耦能力与定制空间，并直击开发中on/off引用不一致、异步emit反模式、滥用场景等高频陷阱，最终强调：精简可靠的同步实现才是工程实践的基石，而何时“不用”事件机制，往往比如何实现更考验架构判断力。

如何实现Javascript的观察者模式_怎样用Javascript构建发布订阅系统？

什么是 `EventEmitter` 的最小可用实现？

JavaScript 本身没有原生的 EventEmitter 类，但用不到 20 行就能写出一个可落地的发布订阅核心。关键不是封装多漂亮，而是能处理 on、emit、off 三个动作，且支持同一事件绑定多个回调。

常见错误是把事件回调存在普通对象里（如 { click: fn }），导致无法支持多次 on('click', fn1) 和 on('click', fn2)；正确做法是为每个事件名维护一个数组。

on(event, callback)：将 callback 推入 this._events[event] || [] 数组
emit(event, ...args)：遍历该事件对应数组，逐个调用 callback(...args)
off(event, callback)：用 Array.prototype.indexOf 找到并 splice 删除指定函数（注意引用必须相同）

class EventEmitter {
  constructor() {
    this._events = Object.create(null);
  }
  on(event, callback) {
    if (!this._events[event]) this._events[event] = [];
    this._events[event].push(callback);
  }
  emit(event, ...args) {
    const cbs = this._events[event];
    if (cbs) cbs.forEach(cb => cb(...args));
  }
  off(event, callback) {
    const cbs = this._events[event];
    if (cbs) {
      const i = cbs.indexOf(callback);
      if (i > -1) cbs.splice(i, 1);
    }
  }
}

为什么不能直接用 `addEventListener` 替代自定义 `EventEmitter`？

addEventListener 只作用于 DOM 元素，而观察者模式常用于纯逻辑解耦：比如状态管理、模块通信、跨组件通知。你没法对一个 class Store 调用 store.addEventListener('change', ...) —— 它根本不是 EventTarget 实例。

另一个现实限制是兼容性：CustomEvent 在 IE 中不支持，而手写 EventEmitter 可以跑在任何 ES5+ 环境；同时，自定义实现能轻松加入调试钩子（如打印每次 emit 的事件名和参数）、防抖控制、异步队列等业务定制逻辑。

DOM 事件只响应用户交互或浏览器生命周期，不适用于数据流驱动场景
EventTarget 不提供 off 的批量取消能力（removeEventListener 必须传入原函数引用）
无法监听“尚未创建的事件名”，而手写实现可提前 on('user:login')，再在任意位置 emit('user:login', user)

如何避免 `off` 失效这个高频坑？

最常踩的坑是：用箭头函数或内联函数绑定事件，然后试图用另一个箭头函数去移除 —— 因为函数引用不同，off 完全不起作用。

例如：emitter.on('data', (x) => console.log(x))，后续写 emitter.off('data', (x) => console.log(x)) 是删不掉的。必须复用同一个函数引用。

把回调声明为具名函数或变量：const handler = (x) => {...}; emitter.on('data', handler); emitter.off('data', handler);
如果必须用匿名函数，可在 on 时返回一个取消函数：const unwatch = emitter.on('data', fn); unwatch();（需改写 on 返回闭包）
支持通配符或正则匹配事件名的高级用法，会进一步增加 off 的复杂度，不建议初版引入