Rx.Observable.fromEvent(document,'click')vs.document.addEventListener('click',callback)

Question

我刚开始学习反应式编程和使用RxJS库.

让我头脑发热的一件事就是为什么我会使用Rx而JavaScript中有事件的概念.

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

那么为什么我会在这种情况下使用observable？

Answer 1

因为你可以很容易地修改,所以将observable与最终的回调地狱与默认的事件监听器结合起来.

比方说,你想听一下drag - 事件(点击鼠标时所有鼠标移动事件)

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与各自的鼠标事件合并,而其他事情保持不变.对于普通事件,您可能花费大约30行左右

Answer 2

基本上，两者都会给出类似的结果，但略有不同。Rx.Observable.fromEvent(document, 'click')是一个可观察的。这意味着您可以随时订阅和取消订阅，并且您有一个可以使用的运营商列表。whiledocument.addEventListener('click', callback)是回调。

举例来说，您希望将用户点击消除 3 秒，并且只想听 4 次点击。使用 RxJs，您可以非常轻松地做到这一点。

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

使用侦听器和回调可以实现相同的功能，但可能并不那么容易。