在 Angular 应用中使用 RxJS 的 Best Practice

什么是 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 方法的使用,使代码更加简单。

---------- - -----------

使用 Subjects 来发布事件

在 Angular 中,我们通常使用 EventEmitter 来发布和订阅事件。但是,它们只能在组件之间使用,当我们需要跨组件通信时,我们需要使用 alternative。

在这种情况下,我们可以使用 RxJS 的 Subject 来实现这个功能。当你希望使用服从响应式编程规则的事件来替代基于指令的事件时,Subject 非常实用。它确保每个组件都能够以响应式的方式访问事件。

例如,如果您在 navbar.component.ts 中想要发布一个项目被选择的事件,则可以使用 Subjects 发布该事件。

------ - ---------- - ---- ----------------
------ - ------- - ---- -------

-------------
------ ----- ------------- -
  ------- ------------------- - --- ------------------
  ------------- - ----------------------------------------

  ---------------- -------- ---- -
    ------------------------------------
  -
-

使用这个服务,我们可以在 navbar.component.html 中订阅并发布该事件:

---- ---------------- ----------- ---- -- ------ ------------------------------------------
------ - ---------- ------ - ---- ----------------
------ - ------------- - ---- -------------------

------------
  --------- -------------
  --------- -
    ---- ------------
      ---- -------------------- ---------
      ---- ------------------
        ---- ---------------- ----------- ---- -- ------ ------------------------------------------
      ------
    ------
  --
  ---------- ---------------------------
  ---------- ---------------
--
------ ----- --------------- ---------- ------ -
  ----- - -------- -------- -----------

  ------------------- -------------- -------------- --

  ---------- --

  ----------------- ------- -
    ------------------------------------
  -
-

在其他组件中,我们可以在 ngOnInit 方法中订阅此事件:

------ - ---------- ------ - ---- ----------------
------ - ------------- - ---- -------------------

------------
  --------- -----------
  --------- -
    ---- -------------
      -------------------------
      -- ------------------------------------- --- ------------
    ------
  --
  ---------- ------------------------
--
------ ----- ------------- ---------- ------ -
  ------------- -------

  ------------------- -------------- -------------- --

  ---------- -
    ----------------------------------------------- -- -
      ----------------- - -----
    ---
  -
-

像这样,我们可以通过 Subjects 来发布和订阅事件。

结论

以上是在 Angular 应用中使用 RxJS 的 Best Practice。当你学习和使用 RxJS 时,应该尝试这些技术方法,以提高代码的可读性和可维护性。

RxJS 在 Angular 中非常重要,它提供了一个功能强大的库,用于在应用程序中处理异步数据。学习并正确使用 RxJS 不仅可以提高你的开发速度,还可以提高你的代码质量。

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/671a05609babaf620fa08a2e