响应式js库——rxjs

原文地址：

简介

rxjs 是组合异步以及基于事件的使用可观察者序列的程序类库。它提供一个核心类型，observable，附属类型（observer,schedulers,subjects）并且受到了数组额外操作（map,filter,reduce,every 等等）启发来将异步事件作为集合来处理。

可以理解为 rxjs 就是事件的 loadsh

reactivex 结合了观察者模式，迭代模式以及集合式的函数事编程来满足对管理事件的需求。

rxjs 解决异步事件的管理的基本概念是：

• observable（可观察的）：表示可调用的值或事件的集合
• observer（观察者）：回调的集合，它知道怎么去监听 observable 派送（传递）的值
• subscription（订阅）：表示 observable 的执行，主要的用途取消执行
• operators（操作者）：是一个纯粹的功能，它以一种函数式编程风格来处理集合的操作，就像数组的 map,concat,filter,reduce 等等
• subject（主题）：这个等价于一个事件触发器（eventemitter），只能以多播的方式传递值或事件给多个多个观察者（observers）
• schedulers（调度者）：是控制并发的集中式调度程序，允许我们调节当电脑发生了如 settimeout 或是 requestanimationframe 以及其他的时候

第一个例子

你一般注册的一个事件侦听是这样的：

document.addeventlistener('click', () => console.log('clicked!'));

使用 rxjs 你可以创建一个可观察的对象来替代：

import { fromevent } from 'rxjs';
fromevent(document, 'click').subscribe(() => console.log('clicked!'));

纯粹（purity）

rxjs 之所以强大，是因为它能使用纯函数来生成值。也就是说你的代码很少发生错误。

通常你会新建一个非纯函数，在你的代码片段里面会混乱你自己的状态

let count = 0;
document.addeventlistener('click', () => console.log(`clicked ${++count} times`));

而 rxjs 会隔离你的状态

import { fromevent } from 'rxjs';
import { scan } from 'rxjs/operators';

fromevent(document, 'click')
    .pipe(scan(count => count + 1, 0))
    .subscribe(count => console.log(`click ${count} times`));

scan 操作的工作就像数组的 reduce 一样。它会传递一个值给回调函数。回调函数会返回一个值，并且返回的值将成为下一次回调运行传递的下一个值。

流（flow）

rxjs 有一个完整的操作符，它们都能帮助你通过你的 ovservables 控制事件流。

下面这段代码就是展示你将允许每秒最多一次点击之后，用原生 javascript

let count = 0;
let rate = 1000;
let lastclick = date.now() - rate;
document.addeventlistener('click', () => {
    if(date.now() - lastclick >= rate){
        console.log(`click ${++count} times`);
        lastchild = 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(`click ${count} times`));   

还有其他的流控制像 filter,delay,debouncetime,take,takeutil,distinct,distinctuntilchanged 等等。

值

你可以在你自己的可观察对象之间传递值
这里告诉你怎么在每次点击的时候加当前鼠标的 x 坐标，用 javascript 代码：

let count = 0;
const rate = 1000;
let lastclick = date.now() - rate;
document.addeventlistener('click', event => {
  if (date.now() - lastclick >= rate) {
    count += event.clientx;
    console.log(count);
    lastclick = date.now();
  }
});

用 rxjs：

import { fromevent } from 'rxjs';
import { throttletime, map, scan } from 'rxjs/operators';

fromevent(documeht, 'click')
    .pipe(
        throttletime(1000),
        map(event => event.clientx),
        scan((count, clientx) => count + clientx, 0)
    )
    .subscribe(count => console.log(count));

其他产生值的操作还有 pluck,pairwise,sample 等