RXJS入门

主要目的

当我们介绍引入一个概念时，我们应该都会问，这个东西是用来干嘛的，作用是什么，那么同样的，RXJS也是一样，它是用来干嘛的呢？

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

这句话是什么意思呢？这里举个栗子：假如你按顺序发出去12345这五个事件，那么你接收的时候一定是按顺序接收么？答案是不一定的，也就是所谓的异步。
这个时候我们就可以使用rxjs，来进行有效的管理事件资料的顺序

定义

一组可用来处理非同步或事件的js函数库
非同步：

• AJAX/XHR
• Service Worker
• setTimeout
• Promise

事件

• 各式DOM事件
• css动画事件
• websockets等

核心名词

Observable： 可观察物件，代表着未来即将产生的事件资料，相当于流的起点
Observer： 观察者，用来接收观察结果的物件，在观察这个东西的执行行为
Subscription： 订阅事件资料的行为，代表在监听observable，可以取消observer的监听，这样observer就不会去监听observable了
Operators： 在observer监听时对事件资料进行相关操作的操作符
Subject： 主体物件，其实就是相当于一个喇叭，将一个observable发送给多个observer，它自己既是observable又是observer

大白话环节： 有一根水管，我往里面开始倒水，这个水就是observable，我自己就是observer，开始观察这个水的流动，水管外有一个盖子，它很神奇，可以插在水管中间，这个盖子，当我把它拿出来的时候，水就开始流动，放在管子中间，水就停止流动，这个盖子就相当于subscription。水流着流着我想往水里加点东西，或者过滤一下水又或者做点别的操作，这就相当于operators。此时我有个放大镜，我能通过这个放大镜看见这个水的流动，这时候小明小红observer走了过来，那我把放大镜给他们看，他们也就能看见水的流动。这个放大镜就相当于subject

举例

var subscription = Rx.Observable.interval(500).take(4).subscribe(function (x) { console.log(x) });

阐述： Observable就是我们上面说的观察对象，我们每隔500毫秒去发送一个数字，发送四次，我们订阅这个观察对象(假如不订阅，那么即使有观察对象也是没用的)，将值打印在控制台上

举例2

//建立可观察的Observable物件
var click$ = rxjs.fromEvent(document, 'click');
//建立观察者物件（observer）
var observer = {next: (x) => console.log(x) };
//建立订阅物件
var subs$ = click$.subscribe(observer);
//取消订阅
subs$.unsubscribe();

举例3

//建立主体物件
var subject = new rxjs.Subject();
//建立可观察observable
var click$ = rxjs.fromEvent(document,'click');
//设定最多取得两个事件资料就将observable设为完成
click$ = click.pipe(take(2));
//设定将click$全部交由subject进行广播
click$.subscribe(subject);
//最后再由subject去建立observable物件
var subs1$ = subject.subscribe((x) => console.log(x.client));
var subs2$ = subject.subscribe((x) => console.log(x.client));
//取消订阅subscription物件
subs1$.unsubscribe();
subs2$.unsubscribe();