敲碎时间的人的个人专栏
上一篇

RxJs——操作型

广告
选中文字可对指定文章内容进行评论啦,→和←可快速切换按钮,绿色背景文字可以点击查看评论额。
大纲

我们在使用Observable的时候,常常会涉及到一些操作,比如map(),filter()等,为了理解原理,今天我们在前几节(初步理解RxJs , RxJs——创建型操作 )的基础上,用两种不同的方式实现以上两个函数,希望能给大家提供借鉴。

map代码实现

废话不说,先来实现map

map(fn) {
    return new MyObservable(observer => {
        this.subscribe({
            next: val=> observer.next(fn(val)),
            error: err => observer.error(err),
            complete: () => observer.complete()
        });
    });
}

Filter代码实现

同样的道理,再来实现filter

filter(fn) {
    return new MyObservable(observer => {
        this.subscribe({
            next: val=> fn(val)? observer.next(val): ()=>{},
            error: err => observer.error(err),
            complete: () => observer.complete()
        });
    }) ;
}

代码调用

调用代码如下:

const letObservable = of(1,2,3);
letObservable.map(v=>v*3).filter(v=>v<5)
.subscribe(v=>{
    console.log('value:',v);
});

日志信息

我们分析一下:

1、首先使用of()创建了一个三个元素的letObservable。

2、letObservable调用map后返回一个新的Observable,我这里假设命名为mapObservable。

3、而mapObservable调用filter后同样返回一个新的Observable,同样的道理命名为filterObservable。

4、最后的订阅函数实际上订阅的是filterObservable。当这个函数开始执行的之后,它实际上会执行filterObservable的this.subscribe()方法。

5、filterObservable执行this.subscribe()方法的时候,实际上把这个方法的参数对象

{
    next: val=> fn(val)? observer.next(val): ()=>{},
    error: err => observer.error(err),
    complete: () => observer.complete()
}

当做Observer传递给mapObservable的构造器的函数参数的observer,这里的

next: val=> observer.next(fn(val)),实际上就是fn(val)? observer.next(val): ()=>{},

observer.next ——> fn

同过以上分析我们知道实际上就形成了一种函数的嵌套调用。先执行前面的操作,前面操作的值传递给后面的函数作为参数执行下去,一直到最后打印出结果为止。

以上是第一个结论。

第二个结论就是:

我的这个例子实际上有一个创建型Observable和两个操作型Observable,它们通过链式操作连接在一起,形成一种函数嵌套调用的链式结构,而且还避免了递归,设计真的很巧妙。而且,如果不执行subscribe函数,整个计算就不会开始,先建立计算的结构,需要计算的时候再计算。

版权声明:著作权归作者所有。

X

欢迎加群学习交流

联系我们