什么是 RxJS？
RxJS 是 ReactiveX 的 JavaScript 版本，它提供了一种基于流的响应式编程范式。流是由事件组成，例如鼠标点击、HTTP 请求等。RxJS 可以方便地对这些事件进行处理并进行数据流的转换、组合和过滤。
Angular 默认使用 RxJS 来完成诸如 HTTP 请求、路由器事件等异步任务。RxJS 在 Angular 中也作为 Angular 的核心库之一。
Best Practice
在 Angular 应用中使用 RxJS，我们需要遵循一些 Best Practice：
不要将 RxJS 中的所有东西都导入
由于 RxJS 提供了太多的操作符和工具，当我们不加思索地导入整个库时，可能会导致项目的体积大大增加。为了避免这种情况发生，我们应该根据需求选择导入必要的模块。
一些常用的模块如下：
Observable：可观察对象，用于处理数据流；Subscription：订阅对象，用于取消已经发起的订阅；Subject：主题对象，可以用于创建事件流，并提供对其主题的控制；BehaviorSubject：行为主题对象，可以在初始时间点提供一个默认值，也称为回放主题；ReplaySubject：重放主题对象，可以接收到之前发出的所有事件，可以设置一个时间长度；of：以参数列表的形式生成一个可观察对象。
在导入运算符时，我们也应该只导入项目中需要的运算符，而不是全都导入。
使用 pipe
RxJS 的 pipe 方法用于把 observable 处理流放在一起，以便进行操作。我们应该优先使用 pipe 来代替在每个操作符之间使用点符号。
pipe 对象可以接收任意数量的操作符作为参数，并按照声明的顺序进行处理：
-- -------------------- ---- -------
------ - -- - ---- -------
------ - ---- ------ - ---- -----------------
----- -- --
------
----- -- - - ---
-------- -- - - --
-
------------ -- ---------------- -- -- -使用 lettable 操作符
RxJS 的 lettable 操作符提供了一种更好的可组合性，他们可以直接导入并使用，而不必订阅至实例方法之中。使用 lettable 操作符时，你甚至可以将其应用于普通的函数。
我们可以通过 import 'rxjs/add/operator/map' 来将 map 操作符的功能导入和注册。
但是，我们应该使用 import { map } from 'rxjs/operators' 来导入一个特定的操作符，他们支持更好的树摇（Tree-shaking）和更可读的代码。
-- -------------------- ---- -------
------ - -- - ---- -------
------ - ---- ------ - ---- -----------------
----- -- --
------
----- -- - - ---
-------- -- - - --
-
------------ -- ---------------- -- -- -避免 Subscription 嵌套
在 RxJS 中，我们通常需要在代码中创建订阅，以便能够订阅响应式的数据流。在实践中，我们通常会发现使用嵌套订阅的代码会特别难以管理。当嵌套订阅变得深层时，这种情况会变得更加严重。
例如下面这个订阅模式是不可取的：
-- -------------------- ---- -------
------ - -- - ---- -------
----- -- --
-------------- -- -
----- -- --
------------ -- -
------- ---- ----
------------ -- ---------------- -- ----
---
---我们可以使用 mergeMap 操作符来替代嵌套订阅的模式，可以更加简洁和清晰地访问层级。mergeMap 操作符在嵌套的情况下将数据扁平化，也可以将多次 HTTP 请求等数据源扁平化。
-- -------------------- ---- -------
------ - -- - ---- -------
------ - -------- - ---- -----------------
----- -- --
------
----------- -- ----- -- ----
----------- -- ------- ---- -----
-
-------------- -- ------------------使用 AsyncPipe
Angular 的 AsyncPipe 是一个内置的管道，用于接收一个 observable 或 promise，可以自动订阅和取消订阅该 observable 或 promise，并以安全的方式在模板中处理它们。
我们可以在模板中使用 AsyncPipe，而不必在组件类中订阅它。这减少了 subscribe 方法的使用，使代码更加简单。
<p>{{data$ | async}}</p>使用 Subjects 来发布事件
在 Angular 中，我们通常使用 EventEmitter 来发布和订阅事件。但是，它们只能在组件之间使用，当我们需要跨组件通信时，我们需要使用 alternative。
在这种情况下，我们可以使用 RxJS 的 Subject 来实现这个功能。当你希望使用服从响应式编程规则的事件来替代基于指令的事件时，Subject 非常实用。它确保每个组件都能够以响应式的方式访问事件。
例如，如果您在 navbar.component.ts 中想要发布一个项目被选择的事件，则可以使用 Subjects 发布该事件。
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ------- - ---- -------
-------------
------ ----- ------------- -
------- ------------------- - --- ------------------
------------- - ----------------------------------------
---------------- -------- ---- -
------------------------------------
-
-使用这个服务，我们可以在 navbar.component.html 中订阅并发布该事件：
<div class="nav-item" *ngFor="let item of items" (click)="onItemClick(item)">{{item}}</div>-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ------------- - ---- -------------------
------------
--------- -------------
--------- -
---- ------------
---- -------------------- ---------
---- ------------------
---- ---------------- ----------- ---- -- ------ ------------------------------------------
------
------
--
---------- ---------------------------
---------- ---------------
--
------ ----- --------------- ---------- ------ -
----- - -------- -------- -----------
------------------- -------------- -------------- --
---------- --
----------------- ------- -
------------------------------------
-
-在其他组件中，我们可以在 ngOnInit 方法中订阅此事件：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ------------- - ---- -------------------
------------
--------- -----------
--------- -
---- -------------
-------------------------
-- ------------------------------------- --- ------------
------
--
---------- ------------------------
--
------ ----- ------------- ---------- ------ -
------------- -------
------------------- -------------- -------------- --
---------- -
----------------------------------------------- -- -
----------------- - -----
---
-
-像这样，我们可以通过 Subjects 来发布和订阅事件。
结论
以上是在 Angular 应用中使用 RxJS 的 Best Practice。当你学习和使用 RxJS 时，应该尝试这些技术方法，以提高代码的可读性和可维护性。
RxJS 在 Angular 中非常重要，它提供了一个功能强大的库，用于在应用程序中处理异步数据。学习并正确使用 RxJS 不仅可以提高你的开发速度，还可以提高你的代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671a05609babaf620fa08a2e