RxJsSubject詳解

一、RxJsSubject是什麼

RxJsSubject是RxJs中的一種Subject類型，它既是一個Observable對象，又是一個Observer對象。作為Observable對象，它可以被subscribe用來訂閱事件流；作為Observer對象，它可以被next、error、complete等方法使用來向對應的Observable流中傳送數據，將自身作為觀察者加入到事件流中。

RxJsSubject是RxJs中的一個重要類型，使用它可以實現可傳遞數據的多播，可以在多個地方共享同一份數據。它是RxJs中一種比較特殊的Subject類型，它具有很多獨特的功能和使用場景。

二、RxJsSubject的優勢

RxJsSubject有很多優勢，比如：

1、多播功能：可以將同一份數據在多個地方共享；

2、可傳遞性：可以將Subject作為數據源來傳遞數據；

3、可控性：可以通過Subject的next、error、complete等方法來手動控制Observable的流向以及事件的發射順序和時間；

4、便利性：可以在Observable對象訂閱前/後、事件發射前/後、任意場景下使用next、error、complete等方法以及其他Observable的操作符來操作數據，非常方便實用。

三、RxJsSubject的基本使用

下面是一個簡單的RxJsSubject的使用示例：

const subject = new Rx.Subject();

subject.subscribe({
  next: (v) => console.log(`observerA: ${v}`)
});

subject.next(1);
subject.next(2);

subject.subscribe({
  next: (v) => console.log(`observerB: ${v}`)
});

subject.next(3);
subject.next(4);

上面的代碼中，定義了一個Rx.Subject類型的Subject對象，並通過subscribe方法向其訂閱了兩個觀察者，通過next方法向Observable對象中傳送數據。執行結果如下：

observerA: 1
observerA: 2
observerA: 3
observerA: 4
observerB: 3
observerB: 4

從結果可以看出，我們通過Subject共享了兩個觀察者的數據，它們都收到了相同的4條數據。

四、RxJsSubject的高級用法

RxJsSubject有很多高級用法，下面是其中一些：

1、BehaviorSubject

BehaviorSubject是RxJsSubject中的一種，它與普通的Subject的唯一區別是，BehaviorSubject會保存最新的數據，並在新增訂閱時立即將這個最新數據發射給新的訂閱者。我們可以通過BehaviorSubject的構造函數為其設置一個初始值，這個初始值也會在新增訂閱時發射給新的訂閱者。

下面是BehaviorSubject的一個示例：

const subject = new Rx.BehaviorSubject(0);

subject.subscribe({
  next: (v) => console.log(`observerA: ${v}`)
});

subject.next(1);
subject.next(2);

subject.subscribe({
  next: (v) => console.log(`observerB: ${v}`)
});

subject.next(3);

上面的代碼中，我們以0為初始數據創建了一個BehaviorSubject類型的Subject對象，並分別向其新增了兩個觀察者。執行結果如下：

observerA: 0
observerA: 1
observerA: 2
observerB: 2
observerA: 3
observerB: 3

從結果可以看出，在新增觀察者2後，它立即收到了最新數據2。同時，觀察者1和新增觀察者2都收到了5次數據。這也是因為BehaviorSubject會保存最新的數據並在新增訂閱時立即發射給新的訂閱者的原因。

2、ReplaySubject

ReplaySubject是RxJsSubject中的一種，它與普通的Subject的唯一區別是，ReplaySubject會緩存所有的數據並在新增訂閱時立即將緩存的數據發射給新的訂閱者。我們可以通過ReplaySubject的構造函數來為其設置緩存的數據大小。

下面是ReplaySubject的一個示例：

const subject = new Rx.ReplaySubject(2);

subject.subscribe({
  next: (v) => console.log(`observerA: ${v}`)
});

subject.next(1);
subject.next(2);
subject.next(3);
subject.next(4);

subject.subscribe({
  next: (v) => console.log(`observerB: ${v}`)
});

subject.next(5);

上面的代碼中，我們以2為ReplaySubject的緩存大小創建了一個Subject對象，並分別向其新增了兩個觀察者。執行結果如下：

observerA: 1
observerA: 2
observerA: 3
observerA: 4
observerB: 3
observerB: 4
observerB: 5

從結果可以看出，新增觀察者2收到了3條緩存數據，也就是前面的2和3。同時，觀察者1共收到了5條數據。

總結

RxJsSubject是一個非常實用的RxJs類型，它可以幫助我們實現可傳遞數據的多播。我們可以使用不同的Subject類型來實現不同的功能，比如BehaviorSubject和ReplaySubject等。在RxJs中，使用Subject類型非常常見，特別是在多組件之間共享數據時，Subject幾乎是一種必須的類型。