Rx.Observable.fromEvent（document，'click'）与 document.addEventListener（'click'，回调）

Question

我刚刚开始学习反应式编程并使用RxJS库。

让我转头的一件事是，为什么我会在JavaScript中使用事件概念的同时使用Rx。

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

那为什么在这种情况下为什么要使用可观察物呢？

Answer 1

因为您可以轻松进行修改，所以将可观察到的对象与默认事件侦听器结合在一起，最终会以某种回调地狱的形式出现。

假设您要收听拖动事件-事件（单击鼠标时发生的所有鼠标移动事件）

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行左右

Answer 2

基本上，两者都会为您带来相似的结果，但有所不同。 Rx.Observable.fromEvent(document, 'click')是可观察的。 这意味着，您可以随时订阅和取消订阅，并且您可以使用一系列的运营商。 而document.addEventListener('click', callback)位于回调中。

例如，您想在3秒内消除用户的点击，而只想听4次该点击。 使用RxJ，您可以轻松完成此操作。

Rx.Observable.fromEvent(document, 'click')
  .debounce(3000)
  .take(4)
  .subscribe(ev => { 
    // do whatever you want to do.
  });

侦听器和回调可以实现相同的功能，但可能并非如此简单。