从一个对象订阅多个事件的 RxJs 最佳实践答案

【问题标题】：RxJs best practices for subscribing to multiple events from an object从一个对象订阅多个事件的 RxJs 最佳实践
【发布时间】：2017-06-08 18:52:55
【问题描述】：

我是 RxJs 的新手，我有一个应该是可观察的对象：其他代码需要能够监听该对象可以发出的几个自定义事件。例如，如果我有这个：

class MyObject {

  constructor() {
    this.arr = [];
  }

  addOne(value) {
    this.arr.push(value);
    // fire event ITEM_ADDED
  }

  removeLast() {
    this.arr.splice(-1, 1);
    // fire event ITEM_REMOVED
  }
}

我希望其他代码做这样的事情：

const myObj = new MyObject();
myObj.on('ITEM_ADDED', () => console.log('item added!'));
myObj.on('ITEM_REMOVED', () => console.log('item removed!'));

我不知道在这个用例中使用 RxJs 是否有意义，或者只是自己实现一个可观察对象（就像我在使用 RxJs 之前所做的那样）。我试图让 MyObject 扩展 Observable 但我没有找到触发事件的方法。

【问题讨论】：

标签： javascript rxjs

【解决方案1】：

一种方法是使用主题，例如。

class MyObject {
    eventStream = new Rx.Subject();
    constructor() {
        this.arr = [];
    }

    addOne(value) {
        this.arr.push(value);
        this.eventStream.next('ITEM_ADDED')
    }

    removeLast() {
        this.arr.splice(-1, 1);
        this.eventStream.next('ITEM_REMOVED')
    }
}

myObject.eventStream
.filter(event => event === 'ITEM_ADDED')
.subscribe(() => console.log('Item added'))

myObject.eventStream
.filter(event => event === 'ITEM_REMOVED')
.subscribe(() => console.log('Item removed'))

【讨论】：