RxJS入门学习通过观察序列变化掌握非同步事件处理的利器。 The Reactive Extensions(Rx) Re

通过观察序列变化掌握非同步事件处理的利器。

The Reactive Extensions(Rx)
ReactiveX:
Reactive Programming Streams：事件

Reactive用到的设计样式：

观察者模式
迭代器模式
函数编程与集合等设计样式

主要目的：有效管理非同步环境下的事件资料

什么是RxJS

一组可以用来处理非同步或事件的JS函式库

- 非同步：

- AJAX / XHR（XMLHttpRequest）/ 
- fetch API
- Service Worker / Node Stream
- setTimeout / setInterval
- Promise

- 事件

- 各种DOM事件(click, dclick, keyup, mouseover)
- CSS动画事件
- HTML5Geolocation / WebSockets / Server Send Event

了解RxJS的核心概念

Observable 可观察的物件

- 代表一组未来即将产生的事件资料（被观察的物件）

Observer 观察的物件

- 代表一个用来接收 ‘观察结果’ 的物件（收到的就是事件资料）
- 观察者物件 就是一个物件包括3个含有 回呼函式 的属性（next， error，complete）

Subscription 订阅物件

- 代表正在执行Observable/Observer的执行个体（可用来取消订阅）

Operators 运算子

-  必须拥有函数编程中所定义的纯函数特性（没有副作用的函式）
-  主要用来处理一系列的事件资料集合
-  常见的运算子包含map, filter, concat, flatMap, swithMap,...

Subject 主题物件

-  如同EventEmitter一样，主要用来广播收到的事件资料给多位Observer（观察者）

Schedulers 排程控制器

-  用来集中管理与调度多重事件之间的资料，以控制事件并发情况

RxJS的版本差异

- RxJS4 
- RxJS5 提供更好的执行效能，但API设计过于混乱
- RxJS6 
    -  遵循ECMAScript Observable标进行实作
    -  更清楚的API设计，更好的tree-shaking结果，更模组化的档案结构
    -  提供比前版更清楚的侦错咨询

代码演示

rxjs.interval（500).pipe(rxjs.operators.take(4)).subscribr(console.log)

- rxjs.interval（500） 建立运算子Creation interval是一个Creation的API,建立一个Observable的物件，每500ms送出一个数字 0 1 2 3
- pipe（rxjs.operators.take(4)）过滤运算 Filtering 管道送出一个事件的资料 取四个
- subscribe（）回传订阅物件（Subscription）
- console.log 订阅者（Observer）

透过ES205解构赋值的写法

 const { interval } = rxjs;
 const { take } = rxjs.operators;
 
 interval(500)
  .pipe(take(4))
  .subscribr(console.log)

快速示范RxJs的运作方式

建立可观察的Observable物件

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

建立观察者物件（Observer）

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

建立订阅物件（订阅Observable物件，并传入Observer观察者物件）
```
var subs$ = click$.subscribe（observer);
```
取消订阅Subscription物件
```
subs$.unsubscribe();
```
Observable是一个事件，我必须要去用一个observer去订阅，才会丢出来

简化写法

    clicks$ = rxjs.fromEvent(document, 'click');
    var subs$ = click$.subscribe（(x) => console.log(x)）
    subs$.unsubscribe();

通过运算子过滤资料

    const { filter } = rxjs.operators;
    click$ = click$.pipe(filter(x => x.clientX < 100),
    take(4))
    var subs$ = click$.subscribe（(x) => console.log(x)）
    subs$.unsubscribe();

示范RxJS主体物件（SUbject）的用法

建立主题物件，之后要考这个进行广播
```
va人subject= new rxjs.Subject()；
```

建立可观察物件

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

设定最多取得两个事件资料就将Observable事件设置为完成
```
clicks$ = clicks$.pipe(take(2))
```
设定将clikc$全部交由主体物件进行广播
```
clicks$.subscribe(subject);
```

最后再由subject去建立观察者事件

var subs1$ = subject.subscribe((x) => console.log(x.client);
var subs2$ = subject.subscribe((x) => console.log(x.client);

取消订阅Subscription物件
```
subs1$.unsubscribe();
subs2$.unsubscribe();
```
广播的话，pipe不会重复执行，直接订阅的话会重复执行。click事件只会送一次

弹珠图

rxmarbles.com

reactive.how/

运算子的分类

建立运算子：负责建立一个Observable物件

常用：

from fromEvent fromeventPattern interval of range throwError timer

其他：

ajax bindCallback bindNodeCallback defer generate iif

组合建立运算子：将多个Observable物件组成一个Observable物件

常用：

combineLatest concat forkJoin merge

其他：

race zip partition

转换运算子：负责将Observable传入的资料转换成另一种格式

常用：

concatMap concatMapTo map mapTo mergeMap mergeMapTo switchMap switchMapTo pluck

其他：

buffer bufferCount bufferTime bufferToggle buffer-

过滤运算子：负责将Observable传入的资料过滤掉/筛选掉

常用：

debounce debounceTime distinct filter first/last skip/take throttle throttleTime

其他运算子

组合运算子：负责组合多个Observable

常用：

combineAll concatAll forkJoin mergeAll startWith

其他：

多播运算子：负责Observable广播给多位观察者

常用：

publish publishReplay share

其他：

multi

错误处理运算子：负责处理Observable观察过程中出现的例外错误

常用：

catchError retry(n)（再试n次） retryWhen

工具函式运算子：负责O提供bservable执行过程的工具函式

常用：

tap（把obserable的过程打印出来） delay materialize timeout timeoutWith toArray

其他：

条件式boolean运算子：

常用：

defultEmpty every find findIndex isEmpty

算数与汇总运算子

常用：

count max min

其他：

reduce

RxJS入门学习