每天实现一个Rxjs中的Operator之Observable.create

本文深入探讨了Rxjs的工作原理,通过仿照其源码,实现了简易版的Rxjs。文章详细介绍了如何使用观察者模式创建可观察对象,并通过代码示例展示了Observable.create方法的实现过程。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Rxjs被越来越多的采用,尤其在Angular中。为了更好的理解Rxjs的工作原理。在这里我们会仿照Rxjs的源码,实现一个简易版的Rxjs
我们知道Rxjs的实现是基于观察者模式来实现的,比如:

Observable.create((observer) => {
  observer.next(1);
  observer.next(2);
}).subscribe({next:(value) => console.log(value)});

在这里,我们调用Observable.create创建了一个可观察对象,在该对象上调用subscribe进行订阅。

首先我们对Observable.create方法进行实现。代码如下所示:
Observable.js

import { toSubscribe } from "./toSubscriber";
export class Observable {
  constructor(subscribe) {
    if (subscribe) {
      this._subscribe = subscribe; //回调方法
    }
  }

  static create(subscribe) {
    return new Observable(subscribe);
  }

  subscribe(observerOrNext) {
    const sink = toSubscribe(observerOrNext);
    this._trySubscribe(sink)
  }

  _trySubscribe(sink) {
    return this._subscribe(sink); //调用创建observable时的回调方法,在回调方法中会执行next方法
  }
}

toSubscribe.js:

import { Subscriber } from "./Subscriber";

export function toSubscribe(nextOrObserver) {
  return new Subscriber(nextOrObserver);
}

Subscribe.js:

export class SafeSubscribe {
  constructor(subscriber, observerOrNext) {
    let next;
    let context = this;
    if (typeof observerOrNext === 'function') {
      next = observerOrNext
    } else if (observerOrNext) {
      next = observerOrNext.next;
      context = Object.create(observerOrNext)
    }
    this.context = context;
    this._next = next;
  }

  next(value) {
    this._next.call(this.context, value);
  }
}

export class Subscriber {

  constructor(destinationOrNext) {
    this.destination = new SafeSubscribe(this, destinationOrNext);
  }

  next(value) {
    this._next.call(this, value);
  }

  _next(value) {
    this.destination.next(value);
  }
}

代码地址

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值