RxJS

pardon110發表於2020-07-04
JS

在響應式程式設計中，Observable可能是Promise的後續

ReactiveX = 帶迭代器的觀察者模式 + 用集合的函式程式設計，旨在管理序列事件。

Rxjs 核心

  • Observable 代表可呼叫的預期值或事件集合
  • Observer 一個知曉如何監聽被Observable傳遞值的回撥集合
  • Subscription 決定Observable產值能否被取消
  • Operators 純函式
  • Subject 等價於事件發生器EventEmitter，將事件或值廣播
  • Schedulers 控制併發的中央派發器，可用setTimeout 或 requestAnimationFrame 或其它協調平行計算

解析

與Promise思路相同，一般不是現在能用且可用的,都是基於未來可期的事件程式設計，但Obserable多值可取消可處理。

Observable 看起來像生產者，但只有呼叫subscribe才產值

示例

js

document.addEventListener('click', () => console.log('Clicked!'));

rxjs

import { fromEvent } from 'rxjs';

fromEvent(document, 'click').subscribe(() => console.log('Clicked!'));

flow

js

let count = 0;
let rate = 1000;
let lastClick = Date.now() - rate;
document.addEventListener('click', () => {
  if (Date.now() - lastClick >= rate) {
    console.log(`Clicked ${++count} times`);
    lastClick = Date.now();
  }
});

rxjs

import { fromEvent } from 'rxjs';
import { throttleTime, scan } from 'rxjs/operators';

fromEvent(document, 'click')
  .pipe(
    throttleTime(1000),
    scan(count => count + 1, 0)
  )
  .subscribe(count => console.log(`Clicked ${count} times`));
本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章