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基本上就是上述的两个观念的结合，这个部份在看完以后的文章，会有更深的体悟。

今日小结

今天这篇文章主要是带你们了解为何咱们须要RxJS，以及RxJS的基本介绍。若读者还不太能吸取本文的内容，能够过一段时间后再回来看这篇文章会有更深的体会，或是在下方留言给我！

原文