最近学习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的用法类似,其他的操作方法类似。