初步理解RxJs

时间：2022-06-01 12:34:43

        学习是一个由浅入深的过程，如果能够理解并掌握二八原则(帕累托法则)，那么我们对知识的学习定会事半功倍，甚至事半多倍。

初步理解RxJs

RxJs定义

        RxJS是ReactiveX在JavaScript上的一个派生。ReactiveX是一个应用比较广泛的响应式编程框架，这个框架很好的应用了Observer Pattern(观察者模式)，让异步编程变得简单且清晰

 

理解Observable

        Observable的简单理解是：它是一个可观察对象，可以被订阅；它接收一个函数。(如何深入理解可观察对象请查看链接)

        以上理解可以看出：Observable有一个接收函数的构造器，它也有一个订阅方法。我们尝试定义一个吧。

let observerNumber = 0;  //为了后文说明RxJs的调用实际上就是一些Observable对象的链接。
export class MyObservable {
	//私有函数变量，用于触发订阅逻辑的执行
    _subscribe;

    constructor(subscribe)  {
        this._subscribe = subscribe;
        observerNumber++;
    }

    subscribe(observer) {
    	//这里的注释部分用于处理subscribe接收函数的情景
        // const defaultObserver = {
        //     next: () => { },
        //     error: () => { },
        //     complete: () => { }
        // }
        // if (typeof observer === 'function') {
        //     return this._subscribe({ ...defaultObserver, next: observer });
        // } else {
        //     return this._subscribe({ ...defaultObserver, ...observer });
        // }
        return this._subscribe(observer);
    }

    print() {
        console.log('observerNumber:',observerNumber);
    }
}

        通过上面代码和注解，我们可以看出，Observable的订阅方法接收一个对象，这个对象有三个方法：next，error，complete，但是我们平时的使用中，我们知道这个方法也可以接收一个函数。注释部分的代码就是Observable的订阅方法接收函数的情形。(注意，这里的本质上就是将函数复制到一个defaultObserver，然后启动执行)

        下面我们来尝试调用一下：

const myObservable =new MyObservable(observer=>{
    observer.next(1);
    setTimeout(() => {
        observer.next(2);
        observer.complete();
    }, 1000)
    observer.next(3);
});
const observer = {
    next: x => console.log(x),
    error: err => console.error(err),
    complete: () => console.log('done'),
}
myObservable.subscribe(observer);

初步理解RxJs

可以看出，我这个自定义的Observable对象，起到了官方代码Observable的作用。从定义和执行可以看出，当执行

myObservable.subscribe(observer);这行代码时，实际上是将这个对象传递给被订阅的Observable对象的构造器的参数函数进行执行；也就是说这里的参数Observer实际上是传递给 

初步理解RxJs

看我标注蓝色部门的这个函数，实际上是给这个函数执行，且参数刚好是构造器的参数函数的参数。比如这里执行

observer.next(1);这行代码的时候，实际上执行的是

const observer = {
    next: x => console.log(x),
    error: err => console.error(err),
    complete: () => console.log('done'),
}

上面对象的next方法，这里的参数是1，因此执行控制台打印出1这个值。后面的执行同理按此进行分析。

如果Observable的subscribe方法是一个函数，只需要将这个函数覆盖掉原始对象的next方法就可以啦。感兴趣的可以试着分析一下。

 

总结一下

1、Observable是一个构造器接收函数参数的类。

2、Observable有一个subscribe方法，这个方法可以接收一个函数或者一个对象作为参数，且这个对象一定有三个方法next,error,complete。

3、Observabel执行subscribe方法的时候，启动整个运算，且subscribe方法的参数刚好是Observabel的构造器对应函数的输入参数。

 

 

标签：

相关文章