RxJS是微软公司推出的响应式编程的JavaScript库。
对于它的学习,最开始我的理解是把它当成是 能优雅地解决异步问题的lodash。
随着学习的深入,发现它采用了订阅者模式,其中也带有纯函数的思想。
直到在使用了RxJS 6之后才了解其少有人意识到的另一面——流。
什么是流?这里我们不用专业术语来解释,用生活中大家熟悉的的例子来类比,比如“河流”。
河流有什么特点?
至少有两个特点:
有朝向。
水往低处流,河流虽然可能会蜿蜒盘旋,但是朝向是固定的,比如我国的长江和黄河就都是由西往东流。
在RxJS中数据的流向也是固定的,就是从发送者到订阅者。基本都如下面这种形式:
|
|
有分支。
大的河流一般有干流和支流,大大小小的支流汇入干流。
RxJS中的数据则可以通过操作符将数据流进行聚合或拆分。
|
|
RxJS 6 相对于 RxJS 5(这里指5.5以下的版本,因为pipe函数在RxJS 5.5中作为新特性已被引入。) 来说不仅修改了一部分操作符的名称,同时做了一个较大的改动,引入了管道(pipe)。这个改动到底有多大?
首先是写法上的变化。
RxJS 5的这种操作符的调用方式有没有一种似曾相识的感觉?
是的,它看上去很像JQuery那种意大利面条式的链式调用
而RxJS 6和Gulp的写法有些像,想想Gulp是什么?基于流的构建工具!
|
|
这种写法上的变化就带来了用法上的变化,以前的固定“河流”可以通过“管道”(pipe)来控制形成灵活的“水流”。
下面举个例子来更加形象地阐述加入管道之后流的灵活性。
现在有一个这样的业务场景:
点击按钮之后发送一个请求,让服务端开始执行任务,然后轮询发送请求查询任务执行状态,根据不同状态进行不同操作。有3种状态”controlling”——继续轮询, “stop”——停止轮询,”finish”——停止轮询,并进行后续操作。
不考虑判断条件,伪代码是下面这样子:
|
|
这段代码有一个问题没有解决,根据状态进行相应操作。
先来看看这3种状态对应的操作。
- controlling。继续轮询很好处理,不进行任何操作即可。
- stop。停止轮询的操作符有3个:
take
,需要固定次数,这个次数没法预先确定。takeUntil
,需要创建一个额外的subject来进行停止,应该可以实现,不过代码量比较大。takeWhile
,只需简单的逻辑判断即可,比较合适。 - finish。问题来了,如过我们在管道操作符中判断状态的并停止流的话,那么订阅者将无法收到消息,意味着后续操作无法执行。
解决方法就是把后续操作放到管道中。代码如下:
现在需求变化了,在另一段代码中,我们也要通过查询状态并根据状态进行,但是不再需要开始任务和轮询了。
那么上面的代码查询和操作部分可以利用pipe方法抽取出来。
|
|
总结一下。RxJS比较完整的理解应该是基于流的订阅者模式,而流的灵活性体现在可拆分和聚合,有了pipe管道的加入,流的可复用性增强,因此更容易对代码逻辑进行抽象。
一部由众多技术专家推荐, 帮你成为具有全面能力和全局视野工程师的进阶利器—— 《了不起的JavaScript工程师》出版了! 点击下方链接即刻踏上进阶之路!
- 淘宝:https://detail.tmall.com/item.htm?id=600756390664
- 京东:https://item.jd.com/12562349.html?dist=jd
- 当当:http://product.dangdang.com/27922044.html