rxjs -- 响应式编程

来源：互联网发布：淘宝网店可以转让吗编辑：程序博客网时间：2024/05/16 15:16

1. 响应式编程

英文原文：In computing, reactive programming is a programming paradigm oriented around data flows and the propagation of change. This means that it should be possible to express static or dynamic data flows with ease in the programming languages used, and that the underlying execution model will automatically propagate changes through the data flow

在计算领域，响应式编程一种面向数据流和变化传播的编程范式。这意味着可以在编程语言中很方便地表达静态或动态的数据流，而相关的计算模型会自动将变化的值通过数据流进行传播。

官方网址
http://reactivex.io/documentation/observable.html

2. 与传统编程比较(入门)

这都说的什么啊？没关系，概念永远是抽象的，我们来举几个例子。比如说在传统的编程中 a=b+c，表示将表达式的结果赋给a，而之后改变b或c 的值不会影响a。但在响应式编程中，a的值会随着b或c的更新而更新。

var a,b=1,c=2;a=b+c;console.error('b='+b);console.error('c='+c);console.error('a='+a);b=3;c=2;console.error('a='+a);/** 结果 *  b=1   c=2   a=3   a=3* */

那么用响应式编程方法写出来就是这个样子，可以看到随着b和c的变化a也会随之变化。

var Rx = require('rx');let b$ =Rx.Observable.from([1,3]);let c$ =Rx.Observable.from([2,2]);let a$ = Rx.Observable.zip(b$,c$,(b,c)=>{   console.error('b='+b);   console.error('c='+c);   return b+c;});a$.subscribe(a=>console.error('a='+a));/*** b=1 c=2 a=3 b=3 c=2 a=5* */

3. Rx的特点

看出来一些不一样的思维方式了吗？响应式编程需要描述数据流，而不是单个点的数据变量，我们需要把数据的每个变化汇聚成一个数据流。如果说传统编程方式是基于离散的点，那么响应式编程就是线。
上面的代码虽然很短，但体现出Rx的一些特点

Lamda表达式，对，就是那个看上去像箭头的东西 => 。你可以把它想象成一个数据流的指向，我们从箭头左方取得数据流，在右方做一系列处理后或者输出成另一个数据流或者做一些其他对于数据的操作。
操作符：这个例子中的 from, zip 都是操作符。Rx中有太多的操作符，从大类上讲分为：创建类操作符、变换类操作符、过滤类操作符、合并类操作符、错误处理类操作符、工具类操作符、条件型操作符、数学和聚集类操作符、连接型操作符等等。

4. Rx再体验

<!DOCTYPE html><html lang="en"><head>   <meta charset="UTF-8">   <title>测试fromEvent</title></head><body><input id="inputText" type="text"/><script src="https://unpkg.com/@reactivex/rxjs@5.0.0-beta.7/dist/global/Rx.umd.js"></script><script>   let inps = document.getElementById('inputText');   let input$ = Rx.Observable.fromEvent(inps,'keyup');   input$.subscribe(input => console.log(input.target.value))</script></body></html>

这几行代码很简单：首先我们得到HTML中id为inputText的输入框对象，然后定义一个观察者对象将inputText这个输入框的keyup事件转换成一个数据流，最后订阅这个数据流并在console中输出我们接收到的input事件的值。我们从这个例子中可以观察到几个现象：

1.数据流：你每次在输入框中输入时都会有新的数据被推送过来。本例中，你会发现连续输入“1，2，3，4”，在console的输出是“1，12，123，1234”，也就是说每次keyup事件我们都得到了完整的输入框中的值。而且这个数据流是无限的，只要我们不停止订阅，它就会一直在那里待命。2.我们观察的是todo上发生的keyup这个事件，那如果我一直按着某个键不放会怎么样呢？你的猜测是对的，一直按着的时候，数据流没有更新，直到你抬起按键为止（你看到截图里面有2条一模一样的含有多个5的数据是因为我用的Surface Pro截图时的快捷键也被截获了，但由于是控制键所以文字内容没有改变）

结果演示

如果观察的足够仔细的话，你会发现console中输出的值其实是 input.target.value，我们观察的对象其实是id为todo的这个对象上发生的keyup事件（Rx.Observable.fromEvent(todo, ‘keyup’)）。那么其实在订阅的代码段中的input其实是keyup事件才对。好，我们看看到底是什么，将 console.log(input.target.value) 改写成 console.log(input)，看看会怎样呢？是的，我们得到的确实是KeyboardEvent

console

4.1. filter（filter-map类似ES5数组新增API,不明白可以参照的ES5的更新。）

过滤出 keyCode=32 的事件，keyCode是Ascii码，那么这就是要把空格滤出来

let inps = document.getElementById('inputText');let input$ = Rx.Observable.fromEvent(inps,'keyup');input$.filter(ev=>ev.keyCode===32).subscribe(input => console.log(input.target.value))

结果我们看到了，按123456789都没有反应，直到按了空格
console

4.2. map

你可能一直在奇怪，我们最终只对输入框的值有兴趣，能不能数据流只传值过来呢？当然可以，使用map这个变换类操作符就可以完成这个转换了

let inps = document.getElementById('inputText');let input$ = Rx.Observable.fromEvent(inps,'keyup');input$  .map(ev=>ev.target.value)  .subscribe(value=>console.log(value));

map这个操作符做的事情就是允许你对原数据流中的每一个元素应用一个函数，然后返回并形成一个新的数据流，这个数据流中的每一个元素都是原来的数据流中的元素应用函数后的值。比如下面的例子，对于原数据流中的每个数应用一个函数10*x，也就是扩大了10倍，形成一个新的数据流。
show

5. 常见操作

5.1. pluck

最常见的两个操作符我们上面已经了解了，我们继续再来认识新的操作符。类似 .map(ev=>ev.target.value) 的场景太多了，以至于rxjs团队搞出来一个专门的操作符来应对，这个操作符就是 pluck。这个操作符专业从事从一系列嵌套的属性种把值提取出来形成新的流。比如上面的例子可以改写成下面的代码，效果是一样的。那么如果其中某个属性为空怎么办？这个操作符负责返回一个 undefined 作为值加入流中。

let inps = document.getElementById('inputText');let input$ = Rx.Observable.fromEvent(inps,'keyup');input$.pluck('target', 'value').subscribe(value=>console.log(value));

console

5.2. mapto

输入框再加一个按钮

<body><input id="inputText" type="text"/><button id="addBtn">Add</button><script src="https://unpkg.com/@reactivex/rxjs@5.0.0-beta.7/dist/global/Rx.umd.js"></script></body>

在Javascript中我们同样方法得到按钮的DOM对象以及声明对此按钮点击事件的观察者：

<script>   let inps = document.getElementById('inputText');   let addBtn = document.getElementById('addBtn');   let buttonClick$ = Rx.Observable.fromEvent(addBtn,'click')   .mapTo('clicked')   .subscribe(value=>console.log(value));</script>

由于点击事件没有什么可见的值，所以我们利用一个操作符叫 mapTo 把对应的每次点击转换成字符 clicked。其实它也是一个 map 的简化操作。

mapTo操作符将每次点击转换成一个
console

6. 合并类操作符

6.1. combineLatest

既然现在我们已经有了两个流，应该试验一下合并类操作符了，先来试试 combineLatest，我们合并了按钮点击事件的数据流和文本框输入事件的数据流，并且返回一个对象，这个对象有两个属性，第一个是按钮事件数据流的值，第二个是文本输入事件数据流的值。也就是说应该是类似 { ev: ‘clicked’, input: ‘1’} 这样的结构。

那看看结果如何，在文本输入框输入1，没反应，再输入2，还是没反应

console

那我们点击一下按钮试试，这回有结果了，但有点没明白为什么是12，输入的数据流应该是： 1，12，… 但那个1怎么丢了呢？

console

再来文本框输入3，4看看，这回倒是都出来了

console

我们来解释一下combineLatest的机制就会明白了，如下图所示，上面的2条线是2个源数据流（我们分别叫它们源1和源2吧），经过combineLatest操作符后产生了最下面的数据流（我们称它为结果流）。

当源1的数据流发射时，源2没有数据，这时候结果流也不会有数据产生，当源2发射第一个数据（图中A）后，combineLatest操作符做的处理是，把A和源1的最近产生的数据（图中2）组合在一起，形成结果流的第一个数据（图中2A）。当源2产生第二个数据（图中B）时，源1这时没有新的数据产生，那么还是用源1中最新的数据（图中2）和源2中最新的数据（图中B）组合。
也就是说 combineLatest 操作符其实是在组合2个源数据流中选择最新的2个数据进行配对，如果其中一个源之前没有任何数据产生，那么结果流也不会产生数据。

6.2. combineLatest应用

讲到这里，原理是明白了，但什么样的实际需求会需要这个操作符呢？其实有很多，我这里只举一个小例子，现在健身这么热，比如说我们做一个简单的BMI计算器，BMI的计算公式是：体重（公斤）／（身高身高）（米米）。那么我们在页面给出两个输入框和一个用于显示结果的div：

Weight: <input type="number" id="weight"> kg<br/>Height: <input type="number" id="height"> cm<br/>Your BMI is <div id="bmi"></div>

那么在JS中，我们想要达成的结果是只有两个输入框都有值的时候才能开始计算BMI，这时你发现combineLatest的逻辑不要太顺溜啊。

<script>   let weight = document.getElementById('weight');   let height = document.getElementById('height');   let bmi = document.getElementById('bmi');   let weight$ = Rx.Observable   .fromEvent(weight, 'input')   .pluck('target', 'value');   let height$ = Rx.Observable   .fromEvent(height, 'input')   .pluck('target', 'value');   let bmi$ = Rx.Observable   .combineLatest(weight$, height$, (w, h) => w/(h*h/100/100));   bmi$.subscribe(b => bmi.innerHTML=b);</script>

运行结果:

console

6.3. zip操作符

除了 combineLatest ，Rxjs还提供了多个合并类的操作符，我们再试验一个 zip 操作符。 zip 和 combineLatest 非常像，但重要的区别点在于 zip 严格的需要多个源数据流中的每一个的相同顺序的元素配对。
比如说还是上面的例子，zip 要求源1的第一个数据和源2的第一个数据组成一对，产生结果流的第一个数据；源1的第二个数据和源2的第二个数据组成一对，产生结果流的第二个数据。而 combineLatest 不需要等待另一个源数据流产生数据，只要有一个产生，结果流就会产生。

这里写图片描述

zip 这个词在英文中有拉链的意思，记住这个有助于我们理解这个操作符，就像拉链一样，它需要拉链两边的齿一一对应。从效果角度上讲，这个操作符有减缓发射速度的作用，因为它会等待合并序列中最慢的那个。

下面我们还是看个例子，在我写第七章的使用Bing Image API变换背景时，我最开始的想法是取得图片数组后，把这个数组中的元素每隔一段时间发送出去一个，这样组件端就不用关心图片变化的逻辑，只要服务发射一个地址，我就加载就行了。我就是用zip来实现的，我们在这个逻辑中有2个源数据流：基于一个数组生成的数据流以及一个时间间隔数据流。前者的发射速度非常快，后者则速度均匀，我们希望按后者的速度对齐前者，以达到每隔一段时间发射前者的数据的目的。

<script>   let greetings = ['Hello', 'How are you', 'How are you doing'];   let time = 3000;   let item$ = Rx.Observable.from(greetings);   let interval$ = Rx.Observable.interval(time);   Rx.Observable.zip(      item$,      interval$,      (item, index) => {         return {            item: item,            index: index         }      }   )   .subscribe(result =>      console.log(         'item: ' + result.item +         ' index: ' + result.index +         ' at ' + new Date()));</script>

结果
我们看到结果如下图所示，每隔3000毫秒，数组中的欢迎文字被输出一次。

console

这两个操作符应该是Rx中最常用的2个合并类操作符了。其他的操作符大家可以去 http://reactivex.io/documentation/operators.html 查看，注意不是所有的操作符RxJS都有。而且RxJS 5.0 目前整体的趋势是减少不必要的以及冗余的操作符，所以我们只介绍最常用的一些操作符。

7. 创建类操作符

通常来讲，Rx团队不鼓励新手自己从0开始创建Observable，因为状态太复杂，会遗漏一些问题。Rx鼓励的是通过已有的大量创建类转换操作符来去建立Observable。我们其实之前已经见过一些了，包括 from 和 fromEvent。

7.1. from操作符

from 可以支持从数组、类似数组的对象、Promise、iterable 对象或类似Observable的对象（其实这个主要指ES2015中的Observable）来创建一个Observable。
这个操作符应该是可以创建Observable的操作符中最常使用的一个，因为它几乎可以把任何对象转换成Observable。

<script>   var array = [10, 20, 30];   var result$ = Rx.Observable.from(array);   result$.subscribe(x => console.log(x));</script>

结果

console

这里写图片描述

7.2. fromEvent操作符

这个操作符是专门为事件转换成Observable而制作的，非常强大且方便。对于前端来说，这个方法用于处理各种DOM中的事件再方便不过了。

let click$ = Rx.Observable.fromEvent(document, 'click');click$.subscribe(e=>console.log(e));

show

console

7.3. fromEventPattern操作符

我们经常会遇到一些已有的代码，这些代码和类库往往不受我们的控制，无法重构或代价太大。我们需要在这种情况下可以利用Rx的话，就需要大量的可以从原有的代码中可以转换的方法。addXXXHandler和removeXXXHandler就是大家以前经常使用的一种模式，那么在Rx中也提供了对应的方法可以转换，那就是

<body><button>click</button><script src="https://unpkg.com/@reactivex/rxjs@5.0.0-beta.7/dist/global/Rx.umd.js"></script><script>   function addClickHandler (handle) {      document.addEventListener('click',handle,false);   }   function removeClickHandler (handle) {      document.removeEventListener('click',handle,false);   }   let btn = document.getElementsByTagName('button')[0];   let click$ = Rx.Observable.fromEventPattern(addClickHandler,removeClickHandler);   click$.subscribe(e => console.log(e.target));</script></body>

show

点击空白和button分别的输出为：

console

7.4. defer操作符

defer 是直到有订阅者之后才创建Observable，而且它为每个订阅者都会这样做，也就是说其实每个订阅者都是接收到自己的单独数据流序列

show

<body><button>click</button><script src="https://unpkg.com/@reactivex/rxjs@5.0.0-beta.7/dist/global/Rx.umd.js"></script><script>   function doHeavyJob () {      setTimeout(()=>console.log('i need do something'),2000);      return true;   }   Rx.Observable.defer(()=>{      let result = doHeavyJob();      return result?'yes': 'no';   }).subscribe(data => console.log('result:'+data));</script></body>

输出结果为：

console

show

7.5. Interval操作符

Rx提供内建的可以创建和计时器相关的Observable方法，第一个是Interval，它可以在指定时间间隔发送整数的自增长序列。

show

<body><script src="https://unpkg.com/@reactivex/rxjs@5.0.0-beta.7/dist/global/Rx.umd.js"></script><script>   let source = Rx.Observable      .interval(1000)      .take(5);   let subscription =source.subscribe(      function (x) {         console.log('Next:'+x);      },      function (err) {         console.log('Error:'+err);      },      function () {        // completed 状态         console.log('finish');      }   )</script></body>

那么输出是

console

这里大家可能注意到我们没有采用箭头的方式，而是用传统的写法，写了 function(x){…} ，哪种方式其实都可以，箭头方式会更简单。

另一个需要注意的地方是，在subscribe方法中我们多了2个参数：一个处理异常，一个处理完成。Rx认为所有的数据流会有三个状态：next，error和completed。这三个函数就是分别处理这三种状态的，当然如果我们不写某个状态的处理，也就意味着我们认为此状态不需要特别处理。而且有些序列是没有completed状态的，因为是无限序列。本例中，如果我们去掉 .take(3) 那么completed是永远无法触发的。

7.6. Timer

下面我们来看看Timer，一共有2种形式的Timer，一种是指定时间后返回一个序列中只有一个元素（值为0）的Observable。

7.6.1. 第一种

<body><script src="https://unpkg.com/@reactivex/rxjs@5.0.0-beta.7/dist/global/Rx.umd.js"></script><script>   //这里指定一开始的delay时间   //也可以输入一个Date，比如'2017-6-29 13:37:00'   //这样变成了在指定的时间触发   let source = Rx.Observable.timer(new Date('2017-6-29 13:37:00'));   let subscription = source.subscribe(      x=> console.log('Next:'+x),      err=> console.log('Error:'+err),      ()=> console.log('Completed')   )</script></body>

show

输出结果：

console

7.6.2. 第二种

Timer很类似于Interval。除了第一个参数是一开始的延迟时间，第二个参数是间隔时间，也就是说，在一开始的延迟时间后，每隔一段时间就会返回一个整数序列。这个和Interval基本一样除了Timer可以指定什么时间开始（延迟时间）。

<body><script src="https://unpkg.com/@reactivex/rxjs@5.0.0-beta.7/dist/global/Rx.umd.js"></script><script>   //这里指定一开始的delay时间   //也可以输入一个Date，比如'2017-6-29 13:37:00'   //这样变成了在指定的时间触发   let source = Rx.Observable.timer(2000,1000)   .take(3);   let subscription = source.subscribe(      x=> console.log('Next:'+x),      err=> console.log('Error:'+err),      ()=> console.log('Completed')   )</script></body>

show

输出结果：

console

8. 过滤类操作符

几个过滤类操作符：filter，distinct，take和debounce。

8.1. filter

Filter操作只允许数据流中满足其predicate测试的元素发射出去，这个predicate函数接受3个参数：
1. 原始数据流元素
2. 索引，这个是指该元素在源数据流中的位置（从0开始）
3. 源Observable对象
如下的代码将0-5中偶数过滤出来：

<body><script src="https://unpkg.com/@reactivex/rxjs@5.0.0-beta.7/dist/global/Rx.umd.js"></script><script>   let source = Rx.Observable.range(0, 5)   .filter( (x, idx, obs) => x % 2 === 0);   let subscription = source.subscribe(      x => console.log('Next: ' + x),      err => console.log('Error: ' + err),      () => console.log('Completed'));</script></body>

show

输出结果：

console

8.2. debounceTime

对于一些发射频率比较高的数据流，我们有时会想给它安个“整流器”。比如在一个搜索框中，输入一些字符后希望出现一些搜索建议，这是个非常好的功能，很多时候可以减少用户的输入。
但是由于这些搜索建议需要联网完成数据的传递，如果太频繁操作的话，对于用户的数据流量和服务器的性能承载都是有副作用的。所以我们一般希望在用户连续快速输入时不去搜索，而是等待有相对较长的间隔时再去搜索。
下面的代码从输入上做了这样的一个“整流器”，滤掉了间隔时间小于400毫米的输入事件（输入本身不受影响），只有用户出现较明显的停顿时才把输入值发射出来。

<body><input type="text" placeholder="输入"><script src="https://unpkg.com/@reactivex/rxjs@5.0.0-beta.7/dist/global/Rx.umd.js"></script><script> let inp = document.body.children[0]; let input$ =Rx.Observable.fromEvent(inp,'keyup')   input$   .debounceTime(400)   .pluck('target','value')   .subscribe(value=>console.log(value));</script></body>

输出结果：

console

但如果不应用debounceTime，我们得到5条记录

console

其他的过滤类操作符也很有趣，比如Distinct就是可以把重复的元素过滤掉，skip就可以跳过几个元素等等，可以自行研究，这里就不一一举例了。

阅读全文

0 0