Rx.Observable.fromEvent(document, 'click') 与。 document.addEventListener('click', 回调)答案

【问题标题】：Rx.Observable.fromEvent(document, 'click') Vs. document.addEventListener('click', callback)Rx.Observable.fromEvent(document, 'click') 与。 document.addEventListener('click', 回调)
【发布时间】：2018-01-11 04:21:43
【问题描述】：

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

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

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

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

【问题讨论】：

标签： javascript events rxjs reactive-programming

【解决方案1】：

因为您可以轻松地修改，将 observables 与默认事件侦听器组合在一起，最终会陷入回调地狱。

假设您想监听拖动事件（所有鼠标移动事件，同时单击鼠标）

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

【讨论】：

只是 RxJS v6+ 的更新 import { fromEvent } from 'rxjs’; const source = fromEvent(document, 'click’); 来源：learnrxjs.io/operators/creation/fromevent.html

【解决方案2】：

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

例如，您想消除用户点击 3 秒的抖动，并且只想听 4 次点击。使用 RxJs，你可以很容易地做到这一点。

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

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

【讨论】：