21.9.9。驴子鼻子上的胡萝卜便是一种最高的智慧。

[alian926]

rxjs

Reactive Extensions（Rx）

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

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

如：网络请求，setTimeout,service worker, Promise, dom事件，css动画

异步常见的问题

• 竞态条件（Race Condition)
• 内存泄漏 （Memory Leak)
• 状态复杂 （Complex State)
• 异常处理 （Exception Handling)

竞态条件： 例如发送Request获取数据列表，然后又立即发送了另一个，这时候第一个和第二个Request的先后顺序可能会影响结果展示。

内存泄漏：例如一些事件监听注册，在相关组件卸载时没有移除。

复杂状态：例如有一部付费用户才能播放的影片，先获取影片资料，在播放时候验证使用者权限，而使用者播下播放后又立即取消。

异常捕获，try/catch可以轻松的捕获同步的异常，对于非同步的复杂行为，就很复杂。

核心概念

• Observable 可观察对象
  • 代表一组未来即将产生的事件对象
• Observer 观察者
  • 代表一个用来接受 观察 结果 的对象
  • 拥有三个属性 next ,error, complete
• Subscription 订阅
  • 代表正在执行 Observable/Observer的执行个体，可以用来取消订阅
• Operators 操作符
  • 必须拥有函数编程中说定义的纯函数特性（无副作用）
  • 主要用来处理一些列的事件对象集合
  • 常见的操作符包含map,filter,concat,flatrMap,switchMap...
• Subject 主体
  • 如同EventEmitter一样，主要用来广播收到的事件对象给多个Observer
• Schedulers 调度器
  • 用来几种管理与调度多重事件之间的资料，控制事件并发

例子

vanilla js

var handler = (e) => {
    console.log(e);
    document.body.removeEventListener('click', handler); // 結束監聽
}

// 註冊監聽
document.body.addEventListener('click', handler);

rxjs

Rx.observable
    .fromEvent(document.body, 'click')
    .take(1)
    .subsribe(console.log)