RxJS 入门笔记

RxJS -- The ReactiveX library for JavaScript

1.什么是RxJS传送门

• 一组可用来处理非同步或事件的JavaScript函数库
• 非同步（Ajax/XHR/fetch API、Service Worker/Node Stream、setTimeout/setInterval、Promise）
• 事件（各种DOM事件、CSS动画事件、HTML5 Geolocation/WebSockets）

2.RXJS的核心概念

• Observable(可观察对象): 代表未来即将产生的事件资料（被观察的物件）
• Observer（观察者）: 代表一个用来接收观察结果的物件（收到的就是事件资料）; 观察者物件就是一 个物件包含3个含有回呼函式的属性(next, error, complete)
• Operators(操作符)：必须拥有纯函数(pure functions)特性，无副作用; 必须用来处理一系列的事件资料集合; 常见的运算子包含map, filter, concat, flatMap, switchMap...
• Subject(主体物件): 如同EventEmitter一样，主要用来广播收到的事件资料给多位Observer(观察者)
• Schedulers(调度器): 用来集中管理和调度多重事件之间的资料，以控制事件并发情况

3.体验RxJS的运作方式

rxjs.interval(500) // 创建Observable => 0.5s输出一个数字
    .pipe(rxjs.operators.take(4)) // 过滤运算符(表示取前四位)
    .subscribe(console.log) // 观察者Observer
// 输出：0 1 2 3

4.RxJS的运作方式

• 建立可观察的Observable对象

var click$ = rxjs.fromEvent(document, 'click')

• 建立观察者物件（Observer）

var observer = { next: (x) => console.log(x) }

• 建立订阅物件（订阅Observable对象，并传入Observer观察者物件）

var subs$ = click$.subscribe(observer)

• 取消订阅Subscription物件

subs$.unsubscribe()

# 简化写法
# 建立可观察的Observable对象
var click$ = rxjs.fromEvent(document, 'click')
# 建立订阅物件（订阅Observable对象，并自动建立观察者物件）
var subs$ = click$.subscribe(x => console.log(x))
# 取消订阅Subscription物件
subs$.unsubscribe()

5.RxJS如何通过运算符过滤资料

var click$ = rxjs.fromEvent(document, 'click');
// 套用filter运算符
const { filter } = rxjs.operators;
click$ = click$.pipe(filter((x) => x.clientX < 100));
var subs$ = click$.subscribe((x) => console.log(x));
subs$.unsubscribe();

6.RxJS主题物件(Subject)的用法

//  建立主题物件(Subject), 之后靠这个主题物件进行广播
var subject = new rxjs.Subject()
//  建立可观察的Observable物件
var click$ = rxjs.fromEvent(document, 'click')
//  设定最多取得两个事件资料就将Observable物件设置为完成状态
click$ = click$.pipe(take(2))
//  最后再由subject去建立Observer观察者物件
var subs1$ = subject.subscribe((x) => console.log(x.clientX))
var subs2$ = subject.subscribe((x) => console.log(x.clientX))
//  取消订阅Subscription物件
subs1$.unsubscribe()
subs2$.unsubscribe()