掌握Queries设计模式优化Angular开发技巧

Queries 设计模式：优化 Angular 应用开发

在 Angular 应用开发中，高效管理数据并实现流畅的用户界面始终是核心挑战。特别是处理从后端获取数据或根据用户交互动态更新的查询操作时，设计模式的选择直接决定代码的可维护性。Queries 设计模式正是为解决这一问题而生。接下来，我们将深入解析其核心逻辑以及如何在 Angular 中落地实践。

什么是 Queries？

简单来说，Queries 是类的一个属性，由 QueryService.create 工厂方法调用生成。它由两部分构成：一个返回值函数（通常调用某个连接器），以及一个选项对象（用于定义何时重新加载、何时重置状态）。

来看一段代码示例：

protected titleQuery: Query

在这个示例中，我们创建了一个名为 titleQuery 的查询，它通过 userProfileConnector.getTitles() 获取标题数据，并指定了重新加载的触发条件——LanguageSetEvent 事件。也就是说，只要用户切换语言，数据就会自动刷新。

触发条件：reloadOn 和 resetOn

Queries 模式的核心亮点之一，是能够根据特定的可观察流或事件，自动触发数据的重新加载或重置。这两个触发条件分别由 reloadOn 和 resetOn 参数定义，它们接受事件或可观察流作为参数。每当对应的可观察对象发出新值，对应的操作便会执行。

两者关键区别在于：reset 会立即清除查询状态，让数据回归未定义状态；而 reload 则不会立刻清除旧数据，只在加载新数据时更新状态。简言之，reset 是“先清空再重来”，reload 是“无声换新”。

使用 Reload 触发条件

reload 触发条件特别适合处理语言切换、货币变更等场景。设想用户正在浏览页面，突然切换语言——你肯定不希望界面闪烁或出现加载器吧？使用 reload，查询会在后台静默加载新语言的数据，当前值仍显示旧内容，直到 API 返回新响应，UI 才统一更新。整个过程流畅无感，用户体验极佳。

例如，一个多语言电商应用，用户可能随时切换语言设置。一旦触发 LanguageSetEvent，reload 机制就会自动在后台拉取新语言的内容，用户操作完全不受打断。

使用 Reset 触发条件

reset 触发条件更适合应对后端状态发生重大变化的场景。比如 OrderPlacedEvent，表示购物车已完成下单，现在变成空购物车。此时，旧的购物车状态完全失效，最稳妥的方式是将其重置为 undefined，然后重新从 API 加载最新状态（很可能是一个空购物车）。

此外，可组合的商店前端可以通过显示加载指示器来响应这种重置，让用户感知数据正在刷新，避免困惑。

实际应用场景

理论讲完，不如看看具体如何应用。假设我们正在开发一个电商应用，用户可以浏览产品、添加购物车、下单查看详情——这正是 Queries 模式的用武之地。

查询产品列表

我们需要一个查询来获取产品列表，当用户浏览不同类别时，自动刷新数据。

protected productListQuery: Query = this.query.create(
  () => this.productService.getProducts(),
  {
    reloadOn: [CategoryChangeEvent],
  }
);

这里，CategoryChangeEvent 事件一触发，产品列表就会自动重新加载，确保页面实时展示最新商品。

查询购物车

购物车是一个比较特殊的场景，可能在多个事件中发生变化。使用 reset 触发条件来处理会更合适。

protected shoppingCartQuery: Query = this.query.create(
  () => this.cartService.getShoppingCart(),
  {
    resetOn: [OrderPlacedEvent, CartClearedEvent],
  }
);

当 OrderPlacedEvent 或 CartClearedEvent 发生时，购物车查询会被立即重置，状态回归未定义，然后再从 API 获取最新数据。这样，用户看到的总是最准确的购物车状态。