但我们注意到,引入这个转换是为了增强体验,而如果某个用户停留在当前视图时间太长,它的这些信息会变得不准确,比如说,用户停留了一个小时,而它看到的信息还显示:5分钟之前发表了评论,实际时间是一个小时零5分钟以前的事了。
从这个角度看,我们做这个体验增强的事情只做了一半,不准确的信息是不能算作增强体验的。
在没有RxJS的情况下,我们可能会通过一个定时器来做这件事,比如在组件内部:
tick() { this.diff = moment(createAt).fromNow() setTimeout(tick.bind(this), 1000) }
但组件并不一定只有一份实例,这样,整个界面上可能就有很多定时器在同时跑,这是一种浪费。如果要做优化,可以把定时器做成一种服务,把业务上需要周期执行的东西放进去,当作定时任务来跑。
如果使用RxJS,可以很容易做到这件事:
Observable.interval(1000).subscribe(() => { this.diff = moment(createAt).fromNow() })
示例二:对时间轴的操纵
RxJS一个很强大的特点是,它以流的方式来对待数据,因此,可以用一些操作符对整个流上所有的数据进行延时、取样、调整密集度等等。
const timeA$ = Observable.interval(1000) const timeB$ = timeA$.filter(num => { return (num % 2 != 0) && (num % 3 != 0) && (num % 5 != 0) && (num % 7 != 0) }) const timeC$ = timeB$.debounceTime(3000) const timeD$ = timeC$.delay(2000)
示例代码中,我们创建了四个流:
A是由定时器产生的,每秒一个值
B从A里面过滤掉了一些
C在B的基础上,对每两个间距在3秒之内的值进行了处理,只留下后一个值
D把C的结果整体向后平移了2秒
所以结果大致如下:
A: 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
B: 1 11 13 17 19
C: 1 13 19
D: 1 13
示例三:我们来晚了
RxJS还提供了BehaviourSubject和ReplaySubject这样的东西,用于记录数据流上一些比较重要的信息,让那些“我们来晚了”的订阅者们回放之前错过的一切。
ReplaySubject可以指定保留的值的个数,超过的部分会被丢弃。
最近新版《射雕英雄传》比较火,我们来用代码描述其中一个场景。
郭靖和黄蓉一起背书,黄蓉记忆力很好,看了什么,就全部记得;而郭靖属鱼的,记忆只有七秒,始终只记得背诵的最后三个字,两人一起背诵《九阴真经》。
代码实现如下:
const 九阴真经 = '天之道,损有余而补不足' const 黄蓉$ = new ReplaySubject(Number.MAX_VALUE) const 郭靖$ = new ReplaySubject(3) const 读书$ = Observable.from(九阴真经.split('')) 读书$.subscribe(黄蓉$) 读书$.subscribe(郭靖$)
执行之后,我们就可以看到,黄蓉背出了所有字,郭靖只记得“补不足”三个字。
示例四:自动更新的状态树
熟悉Redux的人应该会对这样一套理念不陌生:
当前视图状态 := 之前的状态 + 本次修改的部分
从一个应用启动之后,整个全局状态的变化,就等于初始的状态叠加了之后所有action导致的状态修改结果。
所以这就是一个典型的reduce操作。在RxJS里面,有一个scan操作符可以用来表达这个含义,比如说,我们可以表达这样一个东西:
const action$ = new Subject() const reducer = (state, payload) => { // 把payload叠加到state上返回 } const state$ = action$.scan(reducer) .startWith({})
只需往这个action$里面推action,就能够在state$上获取出当前状态。