EventTarget 自定义事件模拟 Observable 模式

不使用 RxJS，基于 Node.js 的 EventTarget 实现简易的 Observable，支持 map、filter、pipe 操作。 · 难度：入门 · +10XP

EventTarget 自定义事件模拟 Observable 模式

Node.js 15+ 内置了 EventTarget 和 Event 类，使得我们可以用标准浏览器 API 进行事件编程。本教程将 EventTarget 扩展为可链式调用的流式事件处理，通过自定义 CustomEvent 传递数据，实现类似 RxJS 的 map、filter 操作。核心思想是利用事件派发和监听器的组合创建数据管道。

class ObservableEventTarget extends EventTarget {
  pipe(...operations) {
    let source = this;
    for (const op of operations) {
      source = op(source);
    }
    return source;
  }
}
function map(transform) {
  return (source) => {
    const target = new ObservableEventTarget();
    source.addEventListener('data', (e) => {
      target.dispatchEvent(new CustomEvent('data', {
        detail: transform(e.detail)
      }));
    });
    return target;
  };
}
// 使用
const source = new ObservableEventTarget();
const pipeline = source.pipe(map(x => x * 2));
pipeline.addEventListener('data', (e) => console.log(e.detail));
source.dispatchEvent(new CustomEvent('data', { detail: 21 })); // 输出 42