用简单的代码实现简易的rxjs的filter功能,帮助rxjs新手了解rxjs的操作符的工作原理。

最近学习rxjs,在边学习的过程中边总结，希望可以帮助到大家。

我模仿rxjs的功能自己在编写简介的类rxjs,这样可以加深我对它的使用，也可以让新手更快速入门，先从最简单的observable对象将起。

我们正常使用rxjs如下：

var Rx  =  require("rxjs");//需要npm install rxjs 引入

var observable = Rx.Observable.create((observer)=>{
observer.next(1);
observer.next(2);
observer.next(3);
observer.next(4);
observer.next(5);
observer.next(6);
observer.next(7);
observer.next(8);
observer.next(9);
observer.next(10);
})

observable.subscribe(console.log);

执行结果：1 2 3 4 5 6 7 8 9 10

这个代码等效于如下（自己的翻译，如有问题欢迎纠错）

function Observable(title){
this.title = title;
this.subscribe = (observer)=>{
observer.next(1);
observer.next(2);
observer.next(3);
observer.next(4);
observer.next(5);
observer.next(6);
};
return this;
}
let observable = new Observable("main");

let observer = {

next:console.log

};

observable.subscribe(observer);

到目前为止都是很好理解的吧，如果这段代码也看不懂就得先学习更基础的js了。

如果没有问题就继续往下面看，接下来我大致实现了filter操作符的基本功能,为了简洁我直接用next代替了observer。

代码如下：

function Observable(title){
this.title = title;
this.subscribe = (next)=>{
next(1);
next(2);
next(3);
next(4);
next(5);
next(6);
};
this.filter = (filterFun)=>{
let that = this;
let newObservable = new Observable("filter");
newObservable.subscribe = (next)=>{
let _next = (val)=>{
filterFun(val) ? next(val) : null;
}
that.subscribe(_next);
}
return newObservable;
}
return this;
}
let observable = new Observable("main");
observable.filter(v=>v%2===0).subscribe(console.log);

filter之后只有满足条件的next会触发注册的方法，这个用法和rxjs的用法类似，其他的操作方法类似。