这真的是从事件回调中获取 Rx.Observable 的最佳方式吗?
Is this really the best way to get a Rx.Observable from an event callback?
我想从 datamaps 库中获取事件流,但由于该库并不是真正用响应式编程编写的,所以我很难将任何发出的事件从它映射到 Observable。到目前为止,我最好的尝试就是这个,但感觉并不那么惯用。这是我能做的最好的,还是我可能缺少一些基本的 RxJs 结构,这将使这个 better/simpler/more 可读?
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);
});
}
});
看起来您正在使用 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);
});
}
});
如果您需要可以在订阅时构建并在 disposal/unsubscription 时销毁的东西,您也可以考虑 Observable.create,但看起来您只针对那个 div 元素现在。
我想从 datamaps 库中获取事件流,但由于该库并不是真正用响应式编程编写的,所以我很难将任何发出的事件从它映射到 Observable。到目前为止,我最好的尝试就是这个,但感觉并不那么惯用。这是我能做的最好的,还是我可能缺少一些基本的 RxJs 结构,这将使这个 better/simpler/more 可读?
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);
});
}
});
看起来您正在使用 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);
});
}
});
如果您需要可以在订阅时构建并在 disposal/unsubscription 时销毁的东西,您也可以考虑 Observable.create,但看起来您只针对那个 div 元素现在。