rxjs Observable 相对于 DOM 事件有什么优点？

Question

我一直在研究 rxjs 和反应式编程，但有些东西我还不太明白。例如，我想获取keyup简单输入上的事件结果，映射它，并将映射结果设置为另一个div内容：

const root = $('#root'),
      input = root.find('#some-input'),
      result = root.find('#result');

使用 rxjs，我可以这样做：

const keyupObs = fromEvent(input, 'keyup');
const mapper = keyupObs.pipe(
    map(e => $(e.target)),
    tap(t => result.html(t.val()))
).subscribe(t => console.log(t));

使用 jquery 驱动的事件，我可以编写：

input.on('keyup', e => result.html($(e.currentTarget).val()));

这是更少的代码，对于像我这样的初学者来说，似乎与我使用 rxjs 编写的代码没有太大区别。那么使用 rxjs 的主要优点是什么？为什么我应该使用它而不是 DOM 驱动事件（在本例中使用 jQuery）？

Answer 1

\n

1. 这里的主要好处是，如果您将 DOM 事件公开为可观察对象，则可以使用 rxjs 运算符，即过滤、切换、组合或反跳更容易。

\n

2. 您可以通过订阅和取消订阅更好地控制何时开始和停止收听。只要正确取消订阅，您还可以更轻松地防止内存泄漏。

\n

3. 出于多种原因，DOM 上的抽象层很有帮助。例如，如果您的应用程序的上下文发生了变化，您的应用程序更加可移植，或者如果 DOM 接口发生了变化，rx 应该尽力让您免受影响。您还可以更好地避免跨浏览器问题。虽然理论上 jquery 也应该处理这个问题，但根据我的经验，jquery 是在假设你\xe2\x80\x99re 在类似浏览器的环境中运行的，而 rxjs 则不然。

\n

\n