[RxJS 学习之旅] 实现简易RxJS

本片文章主要通过实现RxJs一些简单操作符，来进一步了解RxJs

本系列文章

0. 你应该了解的函数实现与组合应用
1. 初识RxJs与搭建仓库
2. RxJs基础概念与使用
3. 操作符篇
4. 简易实现Observable

本篇文章可以学到什么?

1. 深入了解Observable
2. js 基础知识(类、原型)

揭开Observable面纱

Observable 即RxJs世界中的生产者:

1. 它其实是一个构造函数并接收订阅者的参数，
2. 提供实例方法让其可以订阅(forEach)

function Observable(forEach){
   
    this._forEach=forEach
}

⚠️:这里使用forEach代替subscribe,该函数功能如下:

1. 接收参数形式有两种:
   1. onNext、onError,onCompleted函数，
   2. 或者 {onNext(){},onError(){},onCompleted(){}}
2. 调用构造函数并传递如下格式数据{onNext(){},onError(){},onCompleted(){}}

Observable.prototype={
   
    forEach(onNext,onError,onCompleted){
   
        // call is forEach(()=>{},()=>{},..)
        if(typeof onNext==='function'){
   
            return this._forEach({
   
                onNext,
                onError:onError || function(){
   },
                onCompleted:onCompleted|| function(){
   }
            })
        }
        // call is forEach({onNext:()=>{},onError:()=>{}})
        else if(typeof onNext==='object'){
   
            return this._forEach(onNext)
        }else{
   
            Error('无效参数')
        }
    }
}

🌰: 使用如下

const observable=new Observable(subscriber=>{
   
    subscriber.onNext(1);
    setTimeout(()=>{
   
        subscriber.onCompleted()
    },1000)
})
observable.forEach({
   
    onNext(e){
   
        console.log('onNext',e)
    },
    onError(){
   

    },
    onCompleted(){
   
        console.log('completed')
    }
})

实现 fromEvent功能

1. 接收参数dom节点与事件名称
2. 返回 Observable实例
3. 返回的实例提供dispose方法用于取消监听

Observable.fromEvent=function(dom,eventName){
   
    return new Observable(function forEach(observer){
   
        const handler=(e)=>observer.onNext(e)

        dom.addEventListener(eventName,handler)

        // subscription
        return {
   
            dispose:()=>{
   
                dom.removeEventListener(eventName,handler);
                observer.onCompleted()
            }
        }
    })
}