什么是 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