不依赖完整RXJS库实现兼容Observable的可行性及参考问询

可行性结论 #

RxJS从v5正式版开始就遵循TC39 Observable提案的可互操作规范，完全支持在不引入全量RxJS依赖的前提下，实现和v5到v7+全版本兼容的自定义Observable。
核心兼容逻辑依赖符号互操作约定：所有RxJS版本都会识别带有Symbol.observable（v5早期版本额外兼容@@observable字符串键）方法的对象，只要该方法返回的可订阅结构符合规范，就可以直接被RxJS的所有操作符、订阅逻辑正常消费。

跨版本兼容核心要求 #

要覆盖v5到v7+全版本，只需要满足两个核心条件：

• 你的自定义对象暴露Symbol.observable方法，同时为了兼容v5极早期版本，额外暴露'@@observable'字符串键的方法，两个方法返回同一个可订阅对象
• 返回的可订阅对象的subscribe方法兼容RxJS入参规则：支持传入三个独立回调（next、error、complete），也支持传入带有对应回调属性的观察者对象；调用后返回的订阅对象必须带有unsubscribe方法，可额外增加closed状态属性

最小实现示例 #

以下是适配全版本的最小自定义Observable实现，以封装自定义事件为例：

// 先处理Symbol.observable的兼容
const observableSymbol = typeof Symbol === 'function' && Symbol.observable || '@@observable';

// 自定义可观测对象，封装你的自定义事件逻辑
class CustomEventObservable {
  constructor(eventTarget, eventName) {
    this.eventTarget = eventTarget;
    this.eventName = eventName;
  }

  // 核心互操作方法，供RxJS识别
  [observableSymbol]() {
    return this;
  }

  // 兼容v5早期版本的字符串键实现
  ['@@observable']() {
    return this;
  }

  // 订阅逻辑实现
  subscribe(nextOrObserver, error, complete) {
    // 统一处理两种入参形式
    const observer = typeof nextOrObserver === 'object' ? nextOrObserver : {
      next: nextOrObserver,
      error: error,
      complete: complete
    };

    // 实际的事件监听逻辑
    const eventHandler = (payload) => {
      if (observer.next) observer.next(payload);
    };
    this.eventTarget.addEventListener(this.eventName, eventHandler);

    // 返回符合规范的订阅对象
    return {
      closed: false,
      unsubscribe: () => {
        this.eventTarget.removeEventListener(this.eventName, eventHandler);
        this.closed = true;
      }
    };
  }
}

兼容验证方式 #

你实现的上述自定义对象可以直接和任意版本RxJS混用，无需依赖RxJS本身：

• 可以直接传给RxJS的from方法，不需要额外转换
• 可以直接作为RxJS操作符的输入源，switchMap、mergeMap等操作符都可以直接接收你的自定义Observable
• RxJS的订阅逻辑可以直接调用你实现的subscribe方法，行为和原生RxJS Observable完全一致

注意事项 #

• 不需要实现任何RxJS内置操作符，只要满足上述互操作约定即可，RxJS会自行处理后续的流操作逻辑
• 如果你的场景不需要兼容RxJS v5的alpha/beta早期版本，可以去掉'@@observable'字符串键的实现，仅保留Symbol.observable即可覆盖v5正式版到v7+所有版本
• 错误回调和完成回调的触发逻辑按需实现即可，只要符合「触发error/complete后不再发送next通知」的约定，RxJS侧就可以正常处理

内容的提问来源于stack exchange，提问作者vitaly-t