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

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);
  }
}

代码地址