在前端领域，RxJS 是一个非常受欢迎的响应式编程框架。而其中的 Subject 则是扮演着非常重要的角色。在前端大厂的面试中，掌握 RxJS 和 Subject 的使用场景及原理，是一个非常有优势的表现。
Subject 是什么？
RxJS 中的 Subject 是一种特殊的观察者，可以同时充当可观察对象和观察者的角色。可以理解为一个订阅发布器，在它的内部可以通过 next(value) 来发送消息，然后广播给所有订阅者。
Subject 具有以下三种类型：
- BehaviorSubject：具有默认值的 Subject，不管有没有订阅者，都一定会发出初始值；
- ReplaySubject：不管是何时订阅，都会接收到 Subject 发出的全部消息，可以设置缓存区；
- AsyncSubject：只会在 Subject 完结时发送最后一个消息，通常用在无法预测何时结束的场景下。
Subject 的使用场景
单点登录功能
当我们在一个系统中完成登录之后，其他系统也需要同步登录。这时候，我们可以使用 Subject 来实现单点登录功能。假设我们有以下场景：
-- -------------------- ---- -------
-- ----------
------- -
-- -------------
------------------------------------- -- -
-----------------------------
---
-
-- ----------
------- ------------------ -------------
------- ----------- - ------
------- -
-- ------
---------------------- - ---------------------------------------------- -- -
---------------- - -------
---
-这样，我们在 System1 中完成登录之后，可以广播消息到 Subject 中。然后，System2 订阅该登录信息，就可以获取到最新的登录状态，并进行同步登录了。
表单联动
在前端开发中，很多时候需要进行表单联动。比如，A 表单中选择了某个选项后，B 表单需要按照这个选项进行数据的填充。这个时候，Subject 也可以派上用场。
-- -------------------- ---- ------- ----- ------------ - --- ------------------ -- -- - -- ---------------------------- -- - -- -- - ------- - -- --- -- -- - -- ---------------------------------- -- - -- -- - ------- - -- ---
这样，当 A 表单选择了某个选项时，就会发送消息到 Subject 中，然后 B 表单就可以接收到更新数据了。
多模块数据传递
在 Angular 框架中，模块化是一个重要的开发方式。而当一个模块需要和另一个模块进行数据的共享时，也可以使用 Subject 实现多模块的数据传递。
-- -------------------- ---- -------
-- ----------
------ ----- ------- -
------ -------------- - --- ------------------
-- ----------- ------- -
----------------- ------- -
--------------------------------
-
-
-- ----------
------ ----- ------- -
------------------- -------- -------- --
------------ -
------------------------------------------- -- -
-- --- ------- ----
---
-
-这样，我们就可以通过 Subject 实现不同模块之间的数据传递了。
Subject 的原理
Subject 的原理可以通过以下三个函数来理解：
next(value)：向订阅者推送数据；subscribe(observer)：订阅者订阅 Subject，可以收到推送的数据；unsubscribe()：将该订阅者从 Subject 中移除。
当 Subject 发布一个消息时，它会迭代浏览器端所有的订阅者，并向每个订阅者发送消息。具有连级处理能力的 Subject 实现也常常用于处理交互式的 Observable 集。
总结
通过学习 Subject 的使用场景及原理，我们可以掌握 RxJS 响应式编程框架的核心概念。在实际应用开发中，灵活使用 Subject，可以有效提升我们开发的效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64eac308f6b2d6eab358dc2e