【前端】简单聊聊Rxjs

Rxjs是什么?

RxJS 是一个库,它通过使用 observable 序列来编写异步和基于事件的程序。它提供了一个核心类型 Observable,附属类型 (Observer、 Schedulers、 Subjects) 和受 [Array#extras] 启发的操作符 (map、filter、reduce、every, 等等),这些操作符可以把异步事件作为集合来处理。

可以把 RxJS 当做是用来处理事件的 Lodash。

基本概念

【前端】简单聊聊Rxjs

Observable

Observables 是多个值的惰性推送集合。将它与subscription(订阅)结合起来,就解决了多值推送的问题。

拉取 (Pull) vs. 推送 (Push)

拉取和推送是两种不同的协议,用来描述数据生产者 (Producer)如何与数据消费者 (Consumer)进行通信的。

什么是拉取?
在拉取体系中,由消费者来决定何时从生产者那里接收数据。生产者本身不知道数据是何时交付到消费者手中的。每个 JavaScript 函数都是拉取体系。函数是数据的生产者,调用该函数的代码通过从函数调用中“取出”一个单个返回值来对该函数进行消费。

什么是推送?
在推送体系中,由生产者来决定何时把数据发送给消费者。消费者本身不知道何时会接收到数据。在当今的 JavaScript 世界中,Promises 是最常见的推送体系类型。Promise(生产者) 将一个解析过的值传递给已注册的回调函数(消费者),但不同于函数的是,由 Promise 来决定何时把值“推送”给回调函数

例子

【前端】简单聊聊Rxjs
正如上面的例子,Observable可以用来返回多个值,甚至是多个异步的值。

相关操作

【前端】简单聊聊Rxjs

Observer

观察者是由 Observable 发送的值的消费者。观察者只是一组回调函数的集合,每个回调函数对应一种 Observable 发送的通知类型:next、error 和 complete 。

例如:
【前端】简单聊聊Rxjs

Subscription

Subscription 是表示可清理资源的对象,通常是 Observable 的执行。Subscription 有一个重要的方法,即 unsubscribe,它不需要任何参数,只是用来清理由 Subscription 占用的资源。

例如:
【前端】简单聊聊Rxjs

Operator

操作符是Observable 类型上的方法,如 .map()、.filter()、.merge()等,是允许复杂的异步代码以声明式的方式进行轻松组合的基础代码单元。

操作符本质上是一个纯函数 (pure function),它接收一个 Observable 作为输入,并生成一个新的 Observable 作为输出。

例如:
【前端】简单聊聊Rxjs图中的scan,throttleTime均为操作符。

具体操作符请参考官网:http://reactivex.io/rxjs/manual/overview.html

Subject

RxJS Subject 是一种特殊类型的 Observable,它允许将值多播给多个观察者,所以 Subject 是多播的,而普通的 Observables 是单播的(每个已订阅的观察者都拥有 Observable 的独立执行)。

【前端】简单聊聊Rxjs

Scheduler

调度器控制着何时启动 subscription 和何时发送通知。它由三部分组成:
1、调度器是一种数据结构。 它知道如何根据优先级或其他标准来存储任务和将任务进行排序。
2、调度器是执行上下文。 它表示在何时何地执行任务(举例来说,立即的,或另一种回调函数机制(比如 setTimeout 或 process.nextTick),或动画帧)。
3、调度器有一个(虚拟的)时钟。 调度器功能通过它的 getter 方法 now() 提供了“时间”的概念。在具体调度器上安排的任务将严格遵循该时钟所表示的时间。

【前端】简单聊聊Rxjs

例如:
【前端】简单聊聊Rxjs