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.
  });

偵聽器和回調可以實現相同的功能，但可能並非如此簡單。