Question

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

让我头脑发热的一件事就是为什么我会在JavaScript中使用Rx时使用Rx。

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

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

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 - way

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')是一个可观察的。这意味着，您可以随时订阅和取消订阅，并且您有一个可以使用的运营商列表。虽然document.addEventListener('click', callback)是回调。

例如，您想要将用户点击退出3秒钟，并且只想听取4次点击。使用RxJ，你可以很容易地做到这一点。

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

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

Rx.Observable.fromEvent（文档，＆＃39;点击＆＃39;）与。 document.addEventListener（＆＃39;点击＆＃39;，回调）

2 个答案: