RxJS 是一个在前端开发中非常热门的 JavaScript 库，它提供了一系列的函数和操作符，使得处理异步事件流变得更加容易和直观。而 Subjects 是 RxJS 中一个非常重要的概念，它可以作为一个事件源（Observable）和一个订阅者（Observer），可以被用来处理多种复杂的异步场景。
Subject 的定义和类型
在 RxJS 中，Subject 是一种特殊的 Observable，它可以被多个 Observer 订阅，并且可以通过 next() 方法来推送新的值。与普通的 Observable 不同的是，Subject 可以像 EventEmitter 一样向订阅者广播值。
Subject 的类型分为四种：BehaviorSubject、ReplaySubject、AsyncSubject 和 Subject。
- BehaviorSubject: BehaviorSubject 会在订阅时向订阅者发送一个初始值，之后会将其它的值传递给订阅者。
- ReplaySubject: ReplaySubject 会记录下所有的值并在订阅时将它们全部传递给新的订阅者。
- AsyncSubject: AsyncSubject 只会在事件流结束时向订阅者传递最后一个值。
- Subject: 普通的 Subject 只会向订阅者传递新值，没有缓存功能。
Subject 的用途
Subject 的用途非常广泛，特别适合处理需要在多个地方使用同一个事件源的场景。比如，在多个组件之间共享数据，或者在一个组件中同时监听多个事件源等等。
共享数据
在 Angular 应用中，可以使用 Service 来实现多个组件之间的数据共享。但是，如果多个组件需要共享的数据不是来自一个 Service，而是来自多个异步事件源，那么就可以使用 Subject 来处理这种情况。
例如，现在有两个异步请求，一个是获取用户信息，一个是获取用户的购物车信息。在两个请求都返回之后，需要将两个信息整合在一起并在多个组件之间共享。使用 Subject 的代码如下：
-- -------------------- ---- -------
----- ----- - ----------------------------
----- ----- - ----------------------------
----- --------- - --- ----------------------------
----- --------- - --- ----------------------------
--------------- ------------
----------- ------ -- -
---------------------
---------------------
--
--------------
------ - ---------- --------- --以上代码中，userInfo$ 和 cartInfo$ 都是 BehaviorSubject，做为每个获取异步数据的 Subject，记录下初始值，并在 forkJoin 中订阅两个请求，等待两个请求都返回 results。然后通过 Subject 的 next() 方法将数据广播出去。其他组件只需要订阅对应的 Subject，就可以在数据更新时获得最新的信息。
监听多个事件源
有时候需要同时监听多个事件源，例如一个输入框的值在变化时需要同时更新多个组件中的数据。这时候，可以将多个事件源的事件合并成一个 Observable 对象，然后在订阅时使用 Subject 广播值。
-- -------------------- ---- ------- ----- ------- - ----------------- --------- ----- ------- - ----------------- --------- ----- ------- - ----------------- --------- -------------- -------- -------------- ----------- ------ -- ------------- -- ------------------------- ------------ -- ------------ - --- ----------------- ----------------- -- - -------------------------- ---
以上代码中，使用了 RxJS 中的 merge() 函数将多个 Observable 合并成一个，然后再对这个 Observable 进行处理，最终使用 Subject 广播值。
总结
Subject 是 RxJS 中一个非常重要的概念，特别适合处理多个异步事件源的场景。通过 BehaviorSubject、ReplaySubject、AsyncSubject 和 Subject 四种类型，可以应对各种复杂的异步操作。
在实际开发中，我们可以通过 Subject 来实现多个组件之间的数据共享和多事件源的监听。在制定设计方案之前，一定要充分了解 RxJS 的 Subject 并结合具体场景使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6465c571968c7c53b066e60e