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

最新推荐文章于 2025-05-23 18:08:31 发布

原创最新推荐文章于 2025-05-23 18:08:31 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

RXJS 专栏收录该内容

10 篇文章

订阅专栏

本文深入探讨了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);
  }
}

代码地址