javascript - Rx.Observable.fromEvent(document， 'click')与document.addEventListener ('click'，回调)

我刚刚开始学习响应式(Reactive)编程并使用RxJS库。

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

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

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

最佳答案

因为您可以轻松进行修改，所以将可观察到的对象与默认事件监听器结合在一起，最终会以某种回调 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行左右

关于javascript - Rx.Observable.fromEvent(document， 'click')与document.addEventListener ('click'，回调)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48199697/