RxJS 系列教程-什么是 RxJS?

RxJS 可以解决的问题

  • 我们知道传统的 for,while 对循环体中的异步程序是无法感知的,或者说,它们不会等待异步程序执行完毕再进入下一轮循环。
  • 错误处理是任何程序都要解决的问题,本身就已很复杂的回调函数中再嵌入 try/catch 块吗?如果还想加入重试机制呢?
  • 商业逻辑内嵌在回调函数中,可读性差,复杂度高。现如今流行的组件化编程,即可重用,又可解耦,还方便测试;
  • 闭包是强大的,过度地使用闭包将导致我们不得不谨慎地审视变量的作用域以及其值。再加上共享变量带来的副作用,混杂在 if/else 条件语句和 for 循环中,每天都会有修不完的 bug;
  • 根据事件或耗时操作无响应的时间进行取消操作;
  • 自己实现 throttling 和 debouncing 是很困难的(二者区别见http://www.jianshu.com/p/e91775195608)
  • 众所周知的事件监听带来的内存泄露问题;

RxJS 可以优雅地替代 callback,或者基于 promises 的任何第三方库,使我们可以使用一个编程模型来对待任何数据源(除了远程 http 请求,Node.js 中的 Event
Emitter 也使用的是回调机制)。也就是说,我们可以用 RxJS 来处理读取文件,http 请求,鼠标点击,鼠标移动这些事件。

数据的流动和传播

事件必然伴随着数据的产生,在响应式编程的世界中,我们把任何可以被使用的数据源统称为流(Stream)。我们再来看一下什么是响应式编程模型:

1
2
3
var x = 1;
var y = 2;
var z = x + y; // z = ? x = 2; // z = ?

显而易见,z 第一次出现时的值是 3,当 x 重新被赋值为 2 时,z 的值是多少?显而易见,z 没有变化,因为 a 的变化不会引起 z 的变化。我们可以说这种变化没有被传播开来。因此我们可以说,响应式编程是围绕数据的流动和传播的,某个变量的变化会导致其他变量的变化。RxJS 就是用 Javascript 实现的响应式编程。

RxJS 官网:https://github.com/ReactiveX/rxjs

reactive 官网:http://reactivex.io/

pipeline

pipeline 的中文意思是管道,很形象。在管道里是一个接一个的函数,管道的左边接到 Stream 上,即数据源,数据将会流经管道,并按顺序作为参数传递给每一个函数。管道的右边连接着的是最终使用数据的程序,我们称之为数据消费者。

万物皆 stream

就像面向对象中万物皆对象一样,在 RxJS 中,不管是单个值,字节流还是从 http 请求获取来的值,都是 stream。比如,假设在 RxJS 中我们有叫做 Stream 的数据类型,我们创建了一个单个值的数据源:

1
Stream(2017);

这个时刻,它仅仅是个数据源,什么行为也没有发生,如果想让它运作起来,我们得需要消费者或者叫做观察者。通过消费者的订阅行为,数据源中的数据才开始真正流动起来。因此我们可以知道 stream 这个数据类型是惰性求值的,不像 promises,一旦创建即开始运行。下面看看如果订阅它让它流动起来:

1
2
3
Stream(2017).subscribe((result) => {
console.log(result);
});

subscribe 函数中的箭头函数即消费者,当消费者一接收到数据,stream 就结束了。

有管道的例子:

1
2
3
4
5
6
Stream(1, 2, 3, 4)
.filter((val) => val % 2 === 0)
.map((val) => val * val)
.subscribe((result) => {
console.log(result);
});

filter 和 map 即管道中的函数,它们中的 val 参数即从 stream 中流出的数据。它们一起组成了 pipeline。

RxJS 中的组件

  • 生产者:在 RxJS 中的生产者叫做 Observables。Observables 负责推送事件,但不处理事件;
  • 消费者:在 RxJS 中的消费者叫做 Observer。

数据只会从生产者流向消费者

  • 管道:在 RxJS 中,管道中的一个一个函数叫做 observable
    operators,简称 operators。
  • 时间:我们知道异步程序不容易处理的背后实质就是时间问题,RxJS 是面向异步编程的解决方案,因此时间遍布于 RxJS 中的每一个角落。目前为止,我们只需要了解时间在 RxJS 中不是恒定的,产生事件的快慢与否取决于我们的需求。当然,RxJS 给了我们解决方案。

响应式编程范式与其他编程范式

面向对象编程以状态为中心,函数式编程以行为为中心,而响应式编程则需要我们把数据看做是改变并流动着的。在这里我想说的是,RxJS 可以很好的和其他范式配合起来使用。我们可以用面向对象范式来构建我们的模型,用函数式编程和响应式编程来构建行为和处理事件。

在面向对象编程中,状态是保存在变量或者集合对象里的。而响应式编程中的状态是短暂的、瞬间的,也就是说在 Rx 中是永远不保留状态的。

面向对象编程是典型的命令式编程,而响应式编程则鼓励我们写声明式的程序,也就是表达做什么,而不是表达怎么做。RxJS 从函数式编程中借鉴了这一点。

转载地址

RxJS 系列教程-什么是 RxJS?

http://robin.me/rxjs/rxjs-2/

作者

du1dume

发布于

2017-10-24

更新于

2015-01-01

许可协议

You need to set install_url to use ShareThis. Please set it in _config.yml.
You forgot to set the business or currency_code for Paypal. Please set it in _config.yml.