第2章 RxJS入门

注： 学习程墨老师《深入浅出RxJS》的笔记 。

1、Observable和Observer

Observable就是可以被观察，Observer 就是观察者，连接二者的桥梁就是Observable对象的subscribe函数。
RxJS中的数据流就是Observable对象，Observable实现了下面两种设计模式：

• 观察者模式（Observer Pattern）
• 迭代器模式（Iterator Pattern）

Observable = Publisher + Iterator

Observable和Observer 关系中，Observable主动方，Observer被动方

观察者模式

发布者负责产生事件，它会通知所有注册的观察者，而不关心这些观察者如何处理这些事件。相对的，观察者可以被注册上某个发布者，只管接收到事件后就处理，而不关心这些数据是如何产生的。

在RxJS的世界中，Observable对象就是一个发布者，通过Observable对象的subscribe函数，可以把这个发布者和某个Observer观察者连接起来

image.png

迭代器模式

迭代器是指能够变量一个数据集合的对象。迭代器作用就是提供一个通用的接口，让使用者完全不用关心这个数据集合的具体实现方式。
迭代器另一种容易理解名字叫游标（cursor），就像是一个移动的指针一样，从集合中一个元素移到另一个元素，完成对整个集合的遍历。
在RxJS中，作为迭代器的使用者，并不需要主动去从Observable中“拉”数据，而是只要调用
Observable上的subscribe函数之后，自然就能够收到消息的推送。

创建Observable

const source$ = new Observable(function(observer) {
  let number = 1;
  let timer = setInterval(()=> {
    observer.next(number++);
    if(number > 3){
      clearInterval(timer);
      observer.complete();
    }
  }, 1000);
});

const subscription = source$.subscribe(
  next => console.log(next),
  error => console.log(error),
  complete => console.log(complete),
);

subscription.unsubscribe(); // 退订

假如我们中断这个程序，让它一直运行下去，这个程序也不会消耗更多的内存，因为Observable对象每次只吐一个数据，然后这个数据就被Observer消化处理了，不会存在数据的堆积。

error和complete都是终结态，终结后不会再调用next 。unsubscribe之后断开source$对象和Observer的连接，之后再调用next，Observer都不会再收到消息

image.png

2、Hot Observable 和Cold Observable

Observable对象是一个数据流，可以在一个时间范围内吐出一系列数据。

Hot Observable，错过已经吐出的数据，只需要接受从订阅那一刻开始Observable 产生的数据就行。
Cold Observable，需要获取Observable 之前的产生的数据

3、操作符简介

在RxJS中，组成数据管道的元素就是操作符，每一个操作符都创建一个新的Observable对象，不会对上游的Observable对象做任何修改，这完全符合我们再第一章提到的函数式编程的“数据不可变”要求。

image.png

4、弹珠图

操作符的弹珠图：https://rxmarbles.com/

image.png

image.png

有|表示完结，x表示error。不可能既有符合|又有x符合