The ReactiveX library fro JavaScript

Reactive-Extensions (RX)

RxJS 是使用 Observables 的响应式编程的库，它使编写异步或基于回调的代码更容易。

RXJS 介绍

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

非同步

  • AJAX / XHR (XMLHttpRequest) / fetch API
  • Service Worker / Node Stream
  • setTimeout / setInterval
  • Promise

事件

各式 DOM 事件 (click ,dbclick ,keyup ,mousemove … )
css 动画事件 (css3 transitionEnd event)
HTML5 Geolocation (地理地位)/ WebSockets (在单个 TCP 连接上进行全双工通讯的协议) / server Send Event(SSE)

RXJS 的核心概念

Observable 可观察的物件

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

Observer 观察者物件

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

Subsciption 订阅物件

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

Operators 运算子

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

Subject 主体物件

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

Schedulers 排程控制器

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

Rxjs的运作方式

1
2
3
rxjs.interval(500) //建立运算子（creation）
    .pipe(rxjs.operators.take(4)) // 过滤运算子 （Filtering)
    .subscribe(console.log) // 回复订阅物件（Subscription)  观察者（observer）

const { interval } =rxjs;
const { take } =rxjs.operators

interval(5000)
.pipe(take(4))
.subscribe(console.log)