javascript - Rx.Observable.fromEvent(document, 'click') 对比。 document.addEventListener ('click'，回调)

Question

我刚开始学习响应式编程和使用 RxJS 库。

让我头晕目眩的一件事是，当 JavaScript 中有事件的概念时，我为什么要使用 Rx。

例如，Rx.Observable.fromEvent(document, 'click') 之间的差异是什么？和 document.addEventListener('click', callback) .两者都在处理 click异步事件。

那么在这种情况下我为什么要使用 observables 呢？

Answer 1

因为你可以很容易地修改，将 observables 与默认的事件监听器组合起来，你最终会陷入一种回调 hell 。

假设您想收听拖动事件(单击鼠标时的所有鼠标移动事件)

let mouseDown = false;
document.addEventListener('mousedown', (ev) => mouseDown = true);
document.addEventListener('mouseup', (ev) => mouseDown = false);
document.addEventListener('mousemove', (ev) => {
   if(mouseDown) {
      // do something with it
   }
}

您已经必须使用一些状态来管理它，但这还不错。所以现在扩展它以获得阻力的距离。

let mouseDown = false;
let startPoint;
document.addEventListener('mousedown', (ev) => { 
   mouseDown = true;
   startpoint = ev.clientX
});

document.addEventListener('mouseup', (ev) => mouseDown = false);
document.addEventListener('mousemove', (ev) => {
   if(mouseDown) {
      let distance = ev.clientX - startPoint;
      // do something with it
   }
}

所以另一个状态变量，你可以看到回调正在接管。这是一个非常简单的例子。
这是 rxjs - 方式

let down$ = fromEvent(document, 'mousedown')
let up$ = fromEvent(document, 'mouseup')
let move$ = fromEvent(document, 'mousemove')

let drag$ = down$.pipe(
  switchMap(start => move$.pipe(
                        map(move => move.clientX - start.clientX),
                        takeUntil(up$)
                     )
            )
  )

没有状态进化，所有部分都可以重复使用，看起来很容易。现在想象一下添加触摸支持。使用 rxjs，它只是将 touchevents 与它们各自的 mouseevents 合并，其他事情保持不变。对于普通事件，您可能会花费 30 行左右