简单模拟实现Rxjs Observable
2024-08-29 21:07:53
1.先定义类型
export type Observer = {
next: (any) => void,
complete?: (any) => void,
}
export interface OnSubscribeAction {
(observer: Observer): void;
}
export interface mapFun {
(x: any): any
}
2.自定义类
export class MyObservable {
private subscribeAction: OnSubscribeAction;
constructor(subscribeAction: OnSubscribeAction) {
this.subscribeAction = subscribeAction;
}
subscribe(observer: Observer) {
return this.subscribeAction(observer)
}
}
3.实例
const onSubscribe: OnSubscribeAction = (observer: Observer) => {
observer.next(1);
observer.next(2);
observer.next(3);
}
const theObserver = {
next: console.log,
}
const source$ = new MyObservable(onSubscribe);
source$.subscribe(theObserver);
结果一次输出1,2,3
4.增加map操作符
export class MyObservable {
private subscribeAction: OnSubscribeAction;
constructor(subscribeAction: OnSubscribeAction) {
this.subscribeAction = subscribeAction;
}
subscribe(observer: Observer) {
return this.subscribeAction(observer)
}
//rxjs 的每个操作符都会返回一个新的Observable
map(fun: mapFun) {
const nextObserver = new MyObservable((observer: Observer) => {
this.subscribe({
next(item){
observer.next(fun(item))
}
})
})
return nextObserver
}
}
5.再次调用
const onSubscribe: OnSubscribeAction = (observer: Observer) => {
observer.next(1);
observer.next(2);
observer.next(3);
}
const theObserver = {
next: console.log,
}
const source$ = MyObservable.create(onSubscribe);
source$.map(x => x * 2).map(x => x + 1).subscribe(theObserver);
结果一次输出3，5，7
=====================================
更进一步把map作为一个单独的函数抽离
export function map(fun: mapFun) {
const nextObserver = new MyObserver((observer: Observer) => {
this.subscribe({
next(item){
observer.next(fun(item))
}
})
})
return nextObserver
}
完整代码如下所示
export type Observer = {
next: (any) => void,
complete?: (any) => void,
}
export interface OnSubscribeAction {
(observer: Observer): void;
}
export interface mapFun {
(x: any): any
}
export function map(fun: mapFun) {
const nextObserver = new MyObservable((observer: Observer) => {
this.subscribe({
next(item){
observer.next(fun(item))
}
})
})
return nextObserver
}
export class MyObservable {
private subscribeAction: OnSubscribeAction;
constructor(subscribeAction: OnSubscribeAction) {
this.subscribeAction = subscribeAction;
}
static create(subscribeAction: OnSubscribeAction) {
return new MyObservable(subscribeAction)
}
subscribe(observer: Observer) {
return this.subscribeAction(observer)
}
}
由于map函数中使用到this，需要用call或者apply或者bind改变其指向，使用示例如下
const onSubscribe: OnSubscribeAction = (observer: Observer) => {
observer.next(1);
observer.next(2);
observer.next(3);
}
const theObserver = {
next: console.log,
}
const source$ = new MyObservable(onSubscribe);
const subScribtion$ = map.call(source$, x => x * 2);
map.call(subScribtion$, x => x + 1).subscribe(theObserver);
输出结果依次为3,5,7
=====================
由于在map函数中需要访问this, 导致map不是一个纯函数。在map中的this指代上一个observable，现在改为通过参数传递的形式把上一个observable传递给下一个observable。
map函数修改如下
export function map(fun: mapFun) {
return function(obs$) {
const nextObserver = new MyObservable((observer: Observer) => {
obs$.subscribe({
next(item){
observer.next(fun(item))
}
})
})
return nextObserver
}
}
同时MyObservable自定义类需要增加一个pipe方法
export class MyObservable {
private subscribeAction: OnSubscribeAction;
constructor(subscribeAction: OnSubscribeAction) {
this.subscribeAction = subscribeAction;
}
subscribe(observer: Observer) {
return this.subscribeAction(observer)
}
pipe(fn: any){
return fn(this);
}
}
最终的调用方式如下
const onSubscribe: OnSubscribeAction = (observer: Observer) => {
observer.next(1);
observer.next(2);
observer.next(3);
}
const theObserver = {
next: console.log,
}
const source$ = new MyObservable(onSubscribe);
source$.pipe(map(x => x*2)).pipe(map(x => x + 1)).subscribe(theObserver)
结果依次输出3,5,7
最新文章
- JS原型链
- IDEA 配置 tomcat的数据源
- JMeter压力测试入门教程[图文]
- BIEE报表开发
- xml小记1
- 各种浏览器(IE,Firefox,Chrome,Opera)COOKIE修改方法[转]
- MATLAB绘 透视图
- PHP实习生面经--两天四面
- Oracle-11g-R2 RAC 环境下 GPnP Profile 文件
- 在C#调用C++的DLL方法（一）生成非托管dll
- ffmpeg用法
- ABP官方文档翻译 6.4 导航
- 前端面试题整理—ES6篇
- JS中常用的Math方法
- 直播协议的选择：RTMP vs. HLS
- [leetcode]438. Find All Anagrams in a String找出所有变位词
- HDU 6318 Swaps and Inversions 思路很巧妙！！！（转换为树状数组或者归并求解逆序数）
- JFreeChart工具类
- BZOJ 3166 HEOI2013 ALO 可持久化trie+st表
- Win10 jdk的安装以及环境变量的配置，及需要注意的坑