Observable 主題事件監聽器

Question

我正在研究 Observables 及其與 EventEmitter 的差異，然后偶然發現了 Subjects （我可以看到 Angulars EventEmitter 基於關閉）。

似乎 Observable 是單播與多播的主題（然后 EE 只是一個主題，它將 .next 包裝在發射中以提供正確的接口）。

Observables 似乎很容易實現

class Observable {
    constructor(subscribe) {
        this._subscribe = subscribe;
    }

    subscribe(next, complete, error) {
        const observer = new Observer(next, complete, error);

        // return way to unsubscribe
        return this._subscribe(observer);
    }

}

Observer只是一個包裝器，它添加了一些嘗試捕獲和監控 isComplete，因此它可以清理並停止觀察。

對於我想出的一個主題：

class Subject {
    subscribers = new Set();

    constructor() {
        this.observable = new Observable(observer => {
            this.observer = observer;
        });

        this.observable.subscribe((...args) => {
            this.subscribers.forEach(sub => sub(...args))
        });
    }

    subscribe(subscriber) {
        this.subscribers.add(subscriber);
    }

    emit(...args) {
        this.observer.next(...args);
    }
}

哪種合並到一個 EventEmitter 中，它用發射包裹 .next - 但捕獲 Observable 的observe參數似乎是錯誤的 - 就像我剛剛解決了一個解決方案。 從 Observable（單播）生成主題（多播）的更好方法是什么？

我嘗試查看 RXJS，但我看不到它的subscribers數組是如何填充的：/

Answer 1

我認為您也可以通過使用調試器更好地理解。 打開一個 StackBlitz RxJS 項目，創建最簡單的例子（取決於你試圖理解的內容），然后放置一些斷點。 AFAIK，使用 StackBlitz，您可以調試 TypeScript 文件，這看起來很棒。

---

首先， Subject類擴展了Observable ：

export class Subject<T> extends Observable<T> implements SubscriptionLike { /* ... */ }

現在讓我們檢查Observable類。

它有著名的pipe方法：

pipe(...operations: OperatorFunction<any, any>[]): Observable<any> {
  return operations.length ? pipeFromArray(operations)(this) : this;
}

其中pipeFromArray定義如下：

export function pipeFromArray<T, R>(fns: Array<UnaryFunction<T, R>>): UnaryFunction<T, R> {
  if (fns.length === 0) {
    return identity as UnaryFunction<any, any>;
  }

  if (fns.length === 1) {
    return fns[0];
  }

  return function piped(input: T): R {
    return fns.reduce((prev: any, fn: UnaryFunction<T, R>) => fn(prev), input as any);
  };
}

在澄清上述代碼段中發生的事情之前，了解運算符是很重要的。 運算符是一個函數，它返回另一個函數，該函數的單個參數是Observable<T>並且其返回類型是Observable<R> 。 有時， T和R可以相同（例如，當使用filter() 、 debounceTime() ... 時）。

例如， map 定義如下：

export function map<T, R>(project: (value: T, index: number) => R, thisArg?: any): OperatorFunction<T, R> {
  return operate((source, subscriber) => {
    // The index of the value from the source. Used with projection.
    let index = 0;
    // Subscribe to the source, all errors and completions are sent along
    // to the consumer.
    source.subscribe(
      new OperatorSubscriber(subscriber, (value: T) => {
        // Call the projection function with the appropriate this context,
        // and send the resulting value to the consumer.
        subscriber.next(project.call(thisArg, value, index++));
      })
    );
  });
}

export function operate<T, R>(
  init: (liftedSource: Observable<T>, subscriber: Subscriber<R>) => (() => void) | void
): OperatorFunction<T, R> {
  return (source: Observable<T>) => {
    if (hasLift(source)) {
      return source.lift(function (this: Subscriber<R>, liftedSource: Observable<T>) {
        try {
          return init(liftedSource, this);
        } catch (err) {
          this.error(err);
        }
      });
    }
    throw new TypeError('Unable to lift unknown Observable type');
  };
}

所以， operate會返回一個函數。 注意它的參數： source: Observable<T> 。 返回類型派生自Subscriber<R> 。

Observable.lift只是創建了一個新的Observable 。 這就像在喜歡的列表中創建節點。

protected lift<R>(operator?: Operator<T, R>): Observable<R> {
  const observable = new Observable<R>();
  
  // it's important to keep track of the source !
  observable.source = this;
  observable.operator = operator;
  return observable;
}

因此，運算符（如map ）將返回一個函數。 調用該函數的是pipeFromArray函數：

export function pipeFromArray<T, R>(fns: Array<UnaryFunction<T, R>>): UnaryFunction<T, R> {
  if (fns.length === 0) {
    return identity as UnaryFunction<any, any>;
  }

  if (fns.length === 1) {
    return fns[0];
  }

  return function piped(input: T): R {
    // here the functions returned by the operators are being called
    return fns.reduce((prev: any, fn: UnaryFunction<T, R>) => fn(prev), input as any);
  };
}

在上面的代碼片段中， fn是operate函數返回的內容：

return (source: Observable<T>) => {
  if (hasLift(source)) { // has `lift` method
    return source.lift(function (this: Subscriber<R>, liftedSource: Observable<T>) {
      try {
        return init(liftedSource, this);
      } catch (err) {
        this.error(err);
      }
    });
  }
  throw new TypeError('Unable to lift unknown Observable type');
};

也許最好也看一個例子。 我建議您自己使用調試器嘗試一下。

const src$ = new Observable(subscriber => {subscriber.next(1), subscriber.complete()});

subscriber => {}回調 fn 將分配給Observable._subscribe屬性。

constructor(subscribe?: (this: Observable<T>, subscriber: Subscriber<T>) => TeardownLogic) {
  if (subscribe) {
    this._subscribe = subscribe;
  }
}

接下來，讓我們嘗試添加一個運算符：

const src2$ = src$.pipe(map(num => num ** 2))

在這種情況下，它將從pipeFromArray調用此塊：

// `pipeFromArray`
if (fns.length === 1) {
  return fns[0];
}

// `Observable.pipe`
pipe(...operations: OperatorFunction<any, any>[]): Observable<any> {
  return operations.length ? pipeFromArray(operations)(this) : this;
}

因此， Observable.pipe將調用(source: Observable<T>) => { ... } ，其中source是src$ Observable 。 通過調用該函數（其結果存儲在src2$ ），它還將調用Observable.lift方法。

return source.lift(function (this: Subscriber<R>, liftedSource: Observable<T>) {
  try {
    return init(liftedSource, this);
  } catch (err) {
    this.error(err);
  }
});

/* ... */

protected lift<R>(operator?: Operator<T, R>): Observable<R> {
  const observable = new Observable<R>();
  observable.source = this;
  observable.operator = operator;
  return observable;
}

此時， src$是一個Observable實例，它的source設置為src$ ， operator設置為function (this: Subscriber<R>, liftedSource: Observable<T>) ... 。

從我的角度來看，這都是關於鏈表的。 創建Observable鏈時（通過添加運算符），列表是從上到下創建的。
當尾節點調用其subscribe方法時，將創建另一個列表，這次是從下到上。 我喜歡稱第一個為Observable list ，第二個為Subscribers list 。

src2$.subscribe(console.log)

這是調用subscribe方法時發生的情況：

const subscriber = isSubscriber(observerOrNext) ? observerOrNext : new SafeSubscriber(observerOrNext, error, complete);
  
  const { operator, source } = this;
  subscriber.add(
    operator
      ? operator.call(subscriber, source)
      : source || config.useDeprecatedSynchronousErrorHandling
      ? this._subscribe(subscriber)
      : this._trySubscribe(subscriber)
  );

  return subscriber;

在這種情況下src2$有一個operator ，所以它會調用它。 operator定義為：

function (this: Subscriber<R>, liftedSource: Observable<T>) {
  try {
    return init(liftedSource, this);
  } catch (err) {
    this.error(err);
  }
}

其中init取決於所使用的運算符。 再一次，這里是map的init

export function map<T, R>(project: (value: T, index: number) => R, thisArg?: any): OperatorFunction<T, R> {
  return operate( /* THIS IS `init()` */(source, subscriber) => {
    
    // The index of the value from the source. Used with projection.
    let index = 0;
    // Subscribe to the source, all errors and completions are sent along
    // to the consumer.
    source.subscribe(
      new OperatorSubscriber(subscriber, (value: T) => {
        // Call the projection function with the appropriate this context,
        // and send the resulting value to the consumer.
        subscriber.next(project.call(thisArg, value, index++));
      })
    );
  });
}

source實際上是src$ 。 當source.subscribe()被調用時，它最終會調用提供給new Observable(subscriber => { ... })的回調。 調用subscriber.next(1)將調用上面的(value: T) => { ... } ，這將調用subscriber.next(project.call(thisArg, value, index++)); （ project - 提供給map的回調）。 最后， subscriber.next指的是console.log 。

回到Subject ，這是調用_subscribe方法時發生的情況：

protected _subscribe(subscriber: Subscriber<T>): Subscription {
  this._throwIfClosed(); // if unsubscribed
  this._checkFinalizedStatuses(subscriber); // `error` or `complete` notifications
  return this._innerSubscribe(subscriber);
}

protected _innerSubscribe(subscriber: Subscriber<any>) {
  const { hasError, isStopped, observers } = this;
  return hasError || isStopped
    ? EMPTY_SUBSCRIPTION
    : (observers.push(subscriber), new Subscription(() => arrRemove(this.observers, subscriber)));
}

因此，這就是Subject's訂閱者列表的填充方式。 通過返回new Subscription(() => arrRemove(this.observers, subscriber)) ，它確保訂閱者取消訂閱（由於complete / error通知或只是subscriber.unsubscribe() ），不活動的訂閱者將從Subject刪除的名單。