写在前面
当听到有 RsJS 响应式编程这张技术卡时，整个人都兴奋了。前两天还在听别人讲函数式编程，这就有了响应式编程。什么鬼？它和 CSS 的响应式有联系吗？和函数式编程、声明式编程又有什么区别和联系呢？......带着这一系列的问题，开始了我漫长的学习旅程。
首先，鉴于对此一无所知，就先在简书中看看有没有前辈写过的博客，以此来确定我的学习计划，以及 AC。然后，才去看官网文档，按照 5W1H 模式并结合目标导向，进行深入理解。
什么是响应式编程
和面向对象编程和函数式编程一样，响应式编程( Reactive Programming )是一个编程范式，但是与其他编程范式不同的是它是基于数据流和变化传播的。我们经常在程序中这样写:
A = B + C;
将 B 与 C 的和赋给 A。当 B 或 C 的值发生变化时，A 的值并不会发生变化。但是当我运用一种机制，使得当 B 或 C 的值发生变化时，A 的值也发生变化，这样就实现了响应式。由此，它与 CSS 的响应式并没有任何联系。
而响应式编程的目的，就是简化类似的操作；也用于处理嵌套回调的异步事件。
说完响应式编程，该说说今天的正文 RxJS 了。
RxJS
Reactive Extensions for JavaScript
RxJS 是组成异步和事件通过观测序列的基础程序库。它提供了一个核心型、观测（Observer，Schedulers，Subjects）和 Array#extras 操作（map，filter，reduce，every，etc）允许处理异步事件的集合。
主要内容：
-
Observable: 被观察者：代表未来值或事件调用集合的思想。
具体应用中实现Observable分以下几步：- 创建一个Observable
- 订阅
- 执行
- 结束观察活动Disposal
let observable = Rx.Observable.create(function subscribe(observer) {
let id = setInterval(() => {
observer.next('hi ')
}, 1000);
});
// 订阅是通过代码：
observable.subscribe(x => console.log(x));
** Observable真正执行能向外通知三种类型值：**
1. "Next" 通知: 值可以是 Number, String, 一个对象等.
2. "Error"通知: 一种 JavaScript 错误或 exception.
3. "Complete" 通知: 无值事件.
Next 通知是最重要也是最普通的类型：它们代表真正要传输给观察者的实际数据，Error 和 Complete 只能在执行过程中各发生一次，要么错误要么完成。
控制被观察者执行，因为被观察者一旦执行直至其完成或错误，会一直在传递数据。如果观察者想要任意地退出这种无限执行循环，可以使用 dispose 方法，这样能节约资源与内存。
2.Observer: 观察者：是一个回调集合，知道如何通过观察监听值。
一个观察者 Observer 是被观察者传递值的消费者或使用者，观察者是一系列回调，每个回调都对应着被观察者 Observable 三种通知类型。
3.Subscription: 订阅：表示一个可观察到的执行，主要是取消执行。
订阅实际是观察者订阅某个被观察者，代表一种动作，通常是被观察者的执行启动动作，订阅有一个重要方法就是 unsubscribe, 没有任何参数，这会销毁被订阅对象持有的资源。
一个订阅对象必须有一个 unsubscribe() 函数用来释放或取消被观察者执行使用到的资源。
RxJS 除了以上内容外，还有更高阶概念：
Operators: 是一种纯函数，能够使用函数式编程风格处理集合，具体操作有像 map, filter, concat, flatMap 等。
Subject: 等同于事件发射器 EventEmitter, 是对一个事件进行广播到多个观察者的唯一方法。
Schedulers: 是用于控制并发的中心分发器，当计算发生在 setTimeout 或 requestAnimationFrame 时，允许我们来进行协调。
常用方法
-
scan
类似于数组的 reducer 方法。它的参数是一个回调函数。回调函数的返回值将会作为下一次回调函数的参数。
Rx.Observable.prototype.scan(accumulator, [seed])
/* With a seed */
var source = Rx.Observable.range(1, 3)
.reduce(function (acc, x, idx, source) { return acc * x; }, 1)
var subscription = source.subscribe(
function (x) { console.log('Next: %s', x); },
function (err) { console.log('Error: %s', err); },
function () { console.log('Completed'); });
// => Next: 6
// => Completed
/* Without a seed */
var source = Rx.Observable.range(1, 3)
.reduce(function (acc, x, idx, source) { return acc * x; })
var subscription = source.subscribe(
function (x) { console.log('Next: %s', x); },
function (err) { console.log('Error: %s', err); },
function () { console.log('Completed'); });
// => Next: 6
// => Completed
- map
等同于 ES6 高阶函数 map
.map(quote => quote.price)
- merge
将所有的被观察者序列和 Promises 序列合并成一个单一被观察者序列
var source1 = Rx.Observable.interval(100) .timeInterval() .pluck('interval');
var source2 = Rx.Observable.interval(150) .timeInterval() .pluck('interval');
var source = Rx.Observable.merge( source1, source2) .take(5);
- filter
等同于 ES6 高阶函数 filter
.filter(quote => quote.price > 30)
- concat
等同于 ES6 高阶函数 concat，返回一个包含每个给定序列的元素的可观察的序列
var source1 = Rx.Observable.return(42);
var source2 = RSVP.Promise.resolve(56);
var source = Rx.Observable.concat(source1, source2);
- every
确定被观察者序列的所有元素是否都满足某一条件
var source = Rx.Observable.of(1,2,3,4,5)
.every(function (x) { return x < 6; });
- find
等同于 ES6 高阶函数 find
var source = Rx.Observable.from(array)
.find(function (x, i, obs) { return x === 5; });
写在结尾
学到这里，对 RxJS 的了解应该还仅限于理论层面，通过这 demo 可以再深入学习。运行结果如图：
