摘录于：https://mp.weixin.qq.com/s/illfwfPNbpf62zZcOxEBDQ
Reactive Extension for JavaScript
有各种语言的实现，如 RxJava，RxPy，RxGo 等等...，其中的 Rx 是指 Reactive Extension，指响应式编程（Reactive Programming）这种编程范式在 JavaScript 的一种实现。
什么是 Reactive Programming？
响应式编程（Reactive Programming）是融合了观察者模式、迭代器模式与函数式编程三者最优秀的观点，从而诞生的一种新的编程范式，是一种以异步数据流（Async Data Stream）为中心的编程范式。
关于流 Stream 我们会在后续进行讲解。
这里可能会引出如下几个疑问？
- 什么是观察者模式、迭代器模式？
- 什么是主动式（Proactive），什么是响应式（Reactive）？
- 什么是命令式（Imperactive）、什么是函数式（Functional/Declaractive）、什么是响应式（Reactive）？
观察者模式与迭代器模式
观察者模式定了一个对象之间的一对多的依赖关系，当目标对象 Subject 更新时，所有依赖此 Subject 的 Observer 都会收到更新。
举个例子🌰
import { fromEvent } from "rxjs";
// 创建一个监听 document click 事件的 Observable
let Observable = fromEvent(document, "click");
// 通过 Observable.subscribe 时，接收一个 Observer 回调，当有点击事件（click）发生时
// 则调用传入的回调函数，即 Observer 会收到更新
let subscription = Observable.subscribe((e) => {
console.log("dom clicked");
});
let subscription2 = Observable.subscribe((e) => {
console.log("dom clicked");
});
let subscription3 = Observable.subscribe((e) => {
console.log("dom clicked");
});
上述代码，当点击 DOM 时，三个 observer (回调函数）都会收到通知，然后打印 dom clicked 语句。
迭代器模式是指提供一种方法顺序访问一个聚合对象中各个元素，而不需要暴露该对象的具体表示，常见的为部署 Symbol.iterator 属性，调用对应 Symbol.iterator 的方法返回一个迭代器对象，然后就可以以统一的方式进行遍历：
let arr = ['a', 'b', 'c'];
let iterator = arr[Symbol.iterator]( "Symbol.iterator")
iterator.next(); // { value: 'a', done: false }
iterator.next(); // { value: 'b', done: false }
iterator.next(); // { value: 'c', done: false }
iterator.next(); // { value: undefined, done: true }
对应的 RxJS 里面就是 Observable 可观察对象，也就是我们后续将引出的 Stream 流的概念，每个 Stream/Observable 其实可以看作是一个数组，然后支持数组相关的各种操作、变换等，变成另外一个 Stream/Observable，拿 RxJS 举例：
import { fromEvent, map } from "rxjs";
// 创建一个监听 document click 事件的 Observable
let subscription = fromEvent(document, "click")
.pipe(map(e => e.target)
.subscribe(value => {
console.log('click: ', value);
});
fromEvent(document, "click") 会声明一个 Observable 对象，同时也创建了一个 Stream，类似下面的图片：
fromEvent(document, "click") 创建的 Observable 对应着上面的带有箭头的线，这条线就是一个 Stream 流，上面的一个个 ev 就是每次点击之后产生的事件，随着时间推移，不断的产生事件，在这个线上不断的流动下去 -- 之所以为 Stream，而这个 Stream 其实也可以看作是一个 “数组”，上面的一个个事件即为 “数组” 的元素，我们可以对这个 “数组”进行遍历，以统一的方式如 map/filter 等进行遍历，所以也叫融合了迭代器模式，而在 RxJS 中，通过这种 “迭代器” 模式，我们可以方便的对一个 Stream 进行变换，如 map 操作效果如下图所示：
map 将一个 Stream 变换为另外一个 Stream
而最后通过 subscribe 生成了 observer 观察者，当有事件发生时，observer 的回调函数会调用，打印 Log，即融合了观察者模式。
那么函数式是如何应用在 RxJS 里面的呢？细心地同学可能发现了，RxJS 其实提供了大量的 Operators，如 map、filter、scan 等，以 函数式/声明式 的方式来操作 Stream，且操作之后生成一个新 Stream，不会突变原 Stream，此为融合了函数式编程思想。
主动式与响应式
Proactive（主动式）：即主动轮询，不停的去问需求方以期完成任务，常见的有设置一个定时器，不断的去给服务器发请求询问是否有新的内容产生。
Reactive（响应式）：即有事件发生时，通知我完成任务，常见的有 DOM 事件的监听与触发、WebSocket 等
举个例子🌰
完成目标：如平台中的上课通知，如果服务端收到新的课程开始通知，对应的客户端需要展示这些上课通知。
通过主动式的方式我们会写出如下代码：
setInterval(async function () {
try {
const classroomNotification = await fetch('https://xxx');
// 后续操作
} catch(err) {}
, 3000)
上述代码每隔 3S 去发一次请求，问一下服务端，现在数据有没有更新，有就把数据给我。
通过响应式的方式去实现上述逻辑可能是如下：
const socket = new WebSocket("ws://xxx");
socket.addEventListener('open', function() { // 连接成功，可以开始通讯 });
socket.addEventListener('message', function () {
// 收到服务端传来的数据，修改前端数据，展示在前端
})
命令式与函数式
命令式：你命令机器去做事情（how），得到你想要的（what）
声明式：你告诉机器你需要什么（what），让机器想出如何去做（how）
举个例子🌰
完成目标：拿到一个数组中的每项数字或包含数字的字符串，获得这些数字乘以 2 之后相加的结果。
如果完成上述目标，我们用命令式的方式会写出如下代码：
const source = [1, 5, 9, 3, 'hi', 'tb', 456, '11', 'yoyoyo'];
let total = 0;
for (let i = 0; i < source.length; i++) {
let num = parseInt(source[i], 10);
if (!isNaN(num)) {
total += num * 2;
}
}
即一步步的告知计算机要做什么（how），如遍历数组，对每一项进行 parseInt 操作，判断如果不是 NaN 时就相加，最后得到相加的结果（what）。
通过函数式或者声明式的方式，我们会写出如下代码：
const source = [1, 5, 9, 3, 'hi', 'tb', 456, '11', 'yoyoyo'];
let total = source
.map(x => parseInt(x, 10))
.filter(x => !isNaN(x))
.map(x => x * 2)
.reduce((total, value) => total + value )
上面的代码则是告知机器我想要什么（what），如我想要对数据进行映射（map）、过滤（filter）、再映射（map）、最后进行聚合（reduce）得到结果，由计算机自己想出如何进行 map、filter、reduce 等操作，我不需要关心 map、filter、reduce 底层的实现细节。
