资讯专栏INFORMATION COLUMN

RxJS API解析(四)

cheng10 / 2504人阅读

摘要:任何程序设计语言在讲解递归特性时,基本都会举汉诺塔斐波拉契数列的例子。没错,请你对比一下斐波拉契数列和定义的相似之处递归完成后产生值的过程就是的过程。

Rx*(Observable.combineLatest)方法 方法定义

Rx.Observable.combineLatest(...args, [resultSelector])

作用

通过处理函数总是将指定的可观察对象序列最新发射的值合并为一个可观察对象

参数

args (arguments | Array): 一系列可观察对象或可观察对象的数组。

[resultSelector] (Function): 在所有可观察对象都发射值后调用的处理函数

返回值

(Observable): 由传入的可观察序列经过处理函数合并后的结果组成的可观察序列。

宝珠图

Observable.combineLastest()函数,总是合并序列中最新发射的值。宝珠图中的颜色球发射颜色,空白的图形发射待染色图形,处理函数对待染色对象进行染色:总是用户最新发射的颜色或者对最新发射的待染色对象

假设颜色序列仅发射了第一个宝珠浅紫色且后续不再发射,那么结果街将会是一个由浅紫色组成的染色后对象的序列。

使用官方可拖动宝珠图,可以帮助理解,拖动序列中的宝珠,观察输出序列的变化。

实例
var colors = ["紫色","黄色","蓝色","黑色"];
var shapes = ["小星星","圆形","三角形","正方形","心形","五边形"];
var source1 = Rx.Observable.interval(3000)
  .map(()=>colors.pop());
var source2 = Rx.Observable.interval(2000)
  .map(()=>shapes.pop());

var combined = Rx.Observable.combineLatest(source1, source2, function(x, y){
  return x + "的" + y;
}).take(8);

combined.subscribe((shaped)=>console.log(shaped));

实例模拟第一个宝珠图,点击进入可运行实例。其中列1发射颜色值,序列2发射形状。结果输出染色后的形状:

"黑色的五边形"
"黑色的心形"
"蓝色的心形"
"蓝色的正方形"
"蓝色的三角形"
"黄色的三角形"
"黄色的圆形"
"紫色的圆形"

还有一个非常好的实例在前面的文章中,是combineLatest()在缓存数据方面的应用,如果你想深入理解combineLatest()不妨看一下。

题外话

写这个专题的时候,对Rx的抽象能力赞叹不已。

大家通常把编写一个框架的工作称作“造轮子”。
“轮子”是一个针对某一类问题的解决方案,通常是由于反复解决某一个工程问题而产生的。某种程度上,轮子可以一劳永逸,同时轮子的使用可以大大地提高生产的效率(试想想你在使用如Rails这类有 ORM特性框架时的感受)。

Rx似乎从另一个方面而不是实际问题进行抽象——数学,是一个函数式编程模式。从数学而不是工程作为起点,创造的工具的威力_可能_更强大,但是学习成本(使用成本)_可能_会更高。

任何程序设计语言在讲解递归特性时,基本都会举汉诺塔斐波拉契数列的例子。没错,请你对比一下斐波拉契数列combineLatest()定义的相似之处:

def fibo(i):  
   if i==0 or i==1:  
       return 1  
   else:  
       return fibo(i-1)+fibo(i-2) 

Oops!递归完成后产生值的过程就是combineLatest()的过程。

在学习Rx的操作符时,请反复地理解操作符的作用、限制。最好的理解方法是构建一个场景。

combineLatest()中,我们不妨将场景限定为拥有两个可观察对象的可观察序列,并且对象A总是较低频率地发射新值,而对象B比较频繁地发射:

A ----*----------------*---------->
B -----@---@---@---@---@----@----->

那么对象A在实际中可能是什么?缓存后的http请求后的数据、异步获取的配置文件...
对象B自然可以是,与服务器的实时同步、用户上传图片的实时上传、用户在列表中执行的翻页操作...

前面的文章中缓存Github用户的就是上面提到的场景。

剧终

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/78553.html

相关文章

  • RxJS API解析(一)

    摘要:选择后,仅有联通的可观察对象会被观察到。从外部看,所有订阅者仅能观测到这个联通了支流。,其中表示输入流,是操作符,是最后的输出流。截图验证一下当一个流被联通后,其他的流肿么办先记住结论未被选择的流将被调用方法,也就是说,他们被终止了。 起因 在SegmentFault里发布过一篇RxJS的简明教程,很多人反馈对这个主题很是很感兴趣,详见RxJS简明教程。 Rx 是一种编程的思维,而不是...

    姘搁『 评论0 收藏0
  • RxJS API解析(二)

    摘要:当无法匹配时,该对象被默认返回。如果没有明确指定,将返回附加了指定的对象。返回值返回值为经过选择后的可观察对象。题外话键值对,可以对值进行命名。键值对是对象的组成部分,键名可以方便进行查找和比较操作。 Rx* (Observable.case)方法 方法定义 [Rx.Observable.case(selector, sources, [elseSource|scheduler])] ...

    chanthuang 评论0 收藏0
  • RxJS API解析(三)

    摘要:题外话服务可用性是指,服务提供者需要保证服务在任何时间情况下正确地提供。然后服务提供者,会将验证码发送到用户手机。 Rx* (Observable.catch)方法 方法定义 Rx.Observable.catch(...args) 作用 序列中可观察对象因为异常而被终止后,继续订阅序列中的其他可观察对象。 参数 args (Array | arguments): 可观察对象序列。 返...

    banana_pi 评论0 收藏0
  • 【响应式编程的思维艺术】 (5)Angular中Rxjs的应用示例

    摘要:本文是响应式编程第四章构建完整的应用程序这篇文章的学习笔记。涉及的运算符每隔指定时间将流中的数据以数组形式推送出去。中提供了一种叫做异步管道的模板语法,可以直接在的微语法中使用可观测对象示例五一点建议一定要好好读官方文档。 本文是【Rxjs 响应式编程-第四章 构建完整的Web应用程序】这篇文章的学习笔记。示例代码托管在:http://www.github.com/dashnoword...

    shenhualong 评论0 收藏0
  • Rxjs 响应式编程-第二章:序列的深入研究

    摘要:接下来,我们将实现一个真实的应用程序,显示几乎实时发生的地震。得到的由表示,其中包含和的合并元素。如果不同同时传出元素,合并序列中这些元素的顺序是随机的。是操作序列的强大操作符。但是的方法仍在运行,表明取消并不会取消关联的。 Rxjs 响应式编程-第一章:响应式Rxjs 响应式编程-第二章:序列的深入研究Rxjs 响应式编程-第三章: 构建并发程序Rxjs 响应式编程-第四章 构建完整...

    姘搁『 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<