走进JavaScript响应式编程(Reactive Programming)

或许"响应式布局"这个名单你们都听过或者都本身实现过，那么"响应式编程"是什么呢？下面咱们来具体聊一聊。

个人理解

从字面意思上咱们能够大体理解为：全部的事件存在于一条事件总线上，全部的事件均可以看做将来某个时间将要发生的事件流（stream）,当事件总线上的事件执行完后会主动去通知"观察他们的对象"，好比咱们常常用到的settimeout、异步等都属于该范畴。

下面是官方解释：

在某种程度上，这并非什么新东西。事件总线(Event buses)或我们常见的单击事件就是一个异步事件流，你能够观察这个流，也能够基于这个流作一些自定义操做（原文：side effects，反作用，本文皆翻译为自定义操做）。响应式就是基于这种想法。你可以建立全部事物的数据流，而不单单只是单击和悬停事件数据流。 流廉价且无处不在，任何事物均可以看成一个流：变量、用户输入、属性、缓存、数据结构等等。好比，假设你的微博评论就是一个跟单击事件同样的数据流，你可以监听这个流，并作出响应。

补充说明

"响应式编程"采用了“订阅／观察者”设计模式，使订阅者能够将通知主动发送给各订阅者。

RxJs一个响应式编程的实现库

RxJS 是一个库，它经过使用 observable 序列来编写异步和基于事件的程序。它提供了一个核心类型 Observable，附属类型 (Observer、 Schedulers、 Subjects) 和受 [Array#extras] 启发的操做符 (map、filter、reduce、every, 等等)，这些数组操做符能够把异步事件做为集合来处理。

---

如下几个概念是RxJs中比较重要的：

1. Observable (可观察对象): 表示一个概念，这个概念是一个可调用的将来值或事件的集合。
2. Observer (观察者): 一个回调函数的集合，它知道如何去监听由 Observable 提供的值。
3. Subscription (订阅): 表示 Observable 的执行，主要用于取消 Observable 的执行。
4. Operators (操做符): 采用函数式编程风格的纯函数 (pure function)，使用像 map、filter、concat、flatMap 等这样的操做符来处理集合。
5. Subject (主体): 至关于 EventEmitter，而且是将值或事件多路推送给多个 Observer 的惟一方式。
6. Schedulers (调度器): 用来控制并发而且是中央集权的调度员，容许咱们在发生计算时进行协调，例如 setTimeout 或 requestAnimationFrame 或其余。

实例说明

注册事件监听器的常规写法。

var button = document.querySelector('button');
button.addEventListener('click', () => console.log('Clicked!'));

使用 RxJS 的话，建立一个 observable 来代替。

var button = document.querySelector('button');
Rx.Observable.fromEvent(button, 'click')
  .subscribe(() => console.log('Clicked!'));

未完待续...