javascript - 这真的是从事件回调中获取 Rx.Observable 的最佳方式吗？

Question

我想从 datamaps 库中获取事件流，但由于该库在编写时并没有真正考虑到响应式编程，所以我很难将任何发出的事件从它映射到 Observable。到目前为止，我最好的尝试就是这个，但感觉并不那么惯用。这是我能做的最好的，还是我可能缺少一些基本的 RxJs 结构，这些结构会使它更好/更简单/更具可读性？

import Rx from 'rx';
import {EventEmitter} from 'events';
import Datamap from 'datamaps';

const eventEmitter = new EventEmitter();
const mapEvents$ = Rx.Observable.fromEvent(
  eventEmitter,
  'mapEvent'
)
const map = new Datamap({
  element: document.getElementById('map'),
  done: (datamap) => {
    datamap.svg
      .selectAll('.datamaps-subunit')
      .on('mouseover', (o) => {
        eventEmitter.emit('mapEvent', o);
      });
  }
});

Answer 1

看起来您正在使用 EventEmitter 作为事件总线，但我们已经有了 Subjects你可以改用。主题既是观察者又是可观察对象，这意味着您可以对它们调用 onNext 来为它们提供下一个事件，并且您可以在可观察序列上使用运算符。

简单地说，我会把它重写成这样:

import Rx from 'rx';
import Datamap from 'datamaps';

const datamapsSubject = new Rx.Subject();
const map = new Datamap({
  element: document.getElementById('map'),
  done: (datamap) => {
    datamap.svg
      .selectAll('.datamaps-subunit')
      .on('mouseover', (o) => {
        datamapsSubject.onNext(o);
      });
  }
});

如果您需要可以在订阅时构建并在处置/取消订阅时销毁的东西，您还可以考虑 Observable.create , 但看起来您现在只针对一个 div 元素。