30 天精通 RxJS (01)：认识 RxJS

原作者表示：一名來自台灣的小伙子，熱愛學習新技術，喜歡 JS 與 Functional Programming，熱衷於把困難的技術用簡單的語言闡述，歡迎來到我的文章。

原文

在网页中存取数据都是异步(Async)的，比如说我们想从后端拿到一组数据，要先发送一个请求，然后必须等到数据回來，再执行对这个数据的操作。这就是一个异步的行为，而随着网页需求的复杂化，我们所写的 JavaScript 就有各钟针对异步行为的写法，例如使用 callback 或是 Promise 对象甚至是新的语法糖 async/await —— 但随着应用需求越来越复杂，撰写非同步的代码仍然非常困难。

异步常见的问题

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

Race Condition

当我们对同一个资源同时做多次的异步存取时，就可能发生 Race Condition 的问题。比如说我们发了一个 Request 更新使用者资料，然后我们又立即发送另一个 Request 取得使用者资料，这时第一个 Request 和第二个 Request 先后顺序就会影响到最终接收到的结果不同，这就是 Race Condition。

Memory Leak

Memory Leak 是最常被大家忽略的一点。原因是在传统网站开发中，我们每次跳转都是整个页面重新加载，重新执行 JavaScript，所以不太需要关注内存的问题！但是当我们希望将网站做得像软件时，这件事就变得很重要。例如做 SPA (Single Page Application) 网站时，我们是通过 JavaScript 来达到切换页面的內容，这时如果有对 DOM 注册监听事件，而沒有在适当的时机把监听的事件移除，就有可能造成 Memory Leak。比如说在 A 页面监听 body 的 scroll 事件，但页面切换时，沒有把 scroll 的监听事件移除。

Complex State

当有异步行为时，函数的状态就会变得非常复杂！比如说我们有一个付费用户才能播放的视频，首先可能要先获取这部视频的信息，接着我们要在播放时去验证使用者是否有权限播放，而使用者也有可能再按下播放后又立即按了取消，而这些都是异步执行，这时就有会各种复杂的状态需要处理。

Exception Handling

JavaScript的try/catch可以捕捉同步的异常，但异步的程序就没这么容易，尤其当我们的异步行为很复杂时，这个问题就愈加明显。

各种不同的API

我们除了要面对异步会遇到的各种问题外，还需要烦恼很多不同的API

• DOM Events
• XMLHttpRequest
• Fetch
• WebSockets
• Server Send Events
• Service Worker
• Node Stream
• Timer

上面列的API都是异步的，但他们都有各自的API及写法！如果我们使用RxJS，上面所有的API都可以通过RxJS来处理，就能用同样的API操作（RxJS的API）。

这里我们举一个例子，假如我们想要监听点击事件（click event），但点击一次之后不再监听。

原生JavaScript

var handler = (e) => {
	console.log(e);
	document.body.removeEventListener('click', handler); // 结束监听
}

// 注册监听
document.body.addEventListener('click', handler);
复制代码

使用 Rx

Rx.Observable
	.fromEvent(document.body, 'click') // 注册监听
	.take(1) // 只取一次
	.subscribe(console.log);
复制代码

大致上能看得出来我们在使用RxJS后，不管是针对DOM Event还是上面列的各种API我们都可以通过RxJS的API来做数据操作，示例中用take（n）来设定只取一次，之后就释放內存。

说了这么多，其实就是简单一句话

在面对日益复杂的问题，我们需要一个更好的解决方法。

RxJS 基本介绍

RxJS是一套由 Observable sequences 来组合 异步行为 和 事件基础函数 的Library！

可以把RxJS想成处理异步行为的Lodash。

也可以被称为Functional Reactive Programming，更切确地说是指Functional Programming及Reactive Programming两个编程思想的结合。

RxJS确实是Functional Programming跟Reactive Programming的结合，但能不能称为Functional Reactive Programming（FRP）一直有争议。

Rx在官网上特别指出，有时这会被称为FRP，但这其实是个“误称”。

简单说FRP是操作随着时间连续性改变的数值，而Rx则比较像是操作随着时间发出的离散数值，这个部份读者不用分得太细，因为FRP的定义及解释一直存在着歧异，也有众多大神为此争论，如下

AndréStaltz: Rx著名的推广者，也是RxJS 5主要贡献者之一，同时是Cycle.js的作者。Staltz特别写了一篇文章解释为什么Rx不能说是FRP但他仍然称其为FRP。

Juan Gomez：曾在Netflix工作，目前任职于Fitbit，经常出现在国外演讨会，主要写Android。Juan Gomez在 Droidcon NYC 2015的演讲 中特别提出他坚持称Rx为FRP。

Evan Czaplicki：任职于NoRedInk，Elm的作者。Evan在 StrangeLoop 2014的演讲 中，特别为现在各种FRP的不同解释做分类。

关于Reactive Extension（Rx）

Rx最早是由微软开发的LinQ扩展出来的开源项目，之后主要由社区的工程师贡献，有多种语言支持，也被许多科技公司所采用，如Netflix，Trello，Github，Airbnb…等。

Functional Reactive Programming

Functional Reactive Programming是一种编程思想（programming paradigm），举个例子，像OOP就是一种编程思想，OOP告诉我们要使用对象的方式来思考问题，以及编写程序。而Functional Reactive Programming其实涵盖了Reactive Programming及Functional Programming两种编程思想。

Functional Programming

Functional Programming大部分的人应该多少都有接触过，这也是Rx学习过程中的重点之一，我们之后会花两章的篇幅来细讲Functional Programming。如果要用一句话来总结Functional Programming，那就是 用function来思考我们的问题，以及撰写程序

在下一篇文章会更深入的讲解Functional Programming

Reactive Programming

很多人一谈到Reactive Programming就会直接联想到是在讲RxJS，但实际上Reactive Programming仍是一种编程思想，在不同的场景都有机会遇到，而非只存在于RxJS，尤雨溪（Vue的作者）就曾在twitter对此表达不满！

Reactive Programming简单来说就是 当变量或数据发生变化时，由变量或数据自动告诉我发生变动了

这句话看似简单，其实背后隐含两件事

• 当发生变动=>异步：不知道什么时候会发生变动，反正变动时要跟我说

• 由变量自动告知我=>不用通知我的每一步代码

由于最近很红的Vue.js底层就是用Reactive Programming的概念实现，能很好的举例，让大家理解什么是Reactive Programming！

当我们在使用vue开发时，只要一有绑定的变量发生改变，相关的变量及页面也会跟着变动，而开发者不需要写这其中如何 通知 发生变化的每一步代码，只需要 专注在发生变化时要做什么事 ，这就是典型的Reactive Programming（记得必须是由变量或数据主动告知！）

Vue.js在做two-ways data binding是通过ES5 definedProperty的getter/setter。每当变量发生变动时，就会执行getter/setter从而收集有改动的变量，这也被称为 依赖收集 。

Rx基本上就是上述的两个观念的结合，这个部份在看完之后的文章，会有更深的体悟。