Queries 設(shè)計模式：優(yōu)化 Angular 應(yīng)用開發(fā)

在 Angular 應(yīng)用開發(fā)領(lǐng)域，為了更好地管理數(shù)據(jù)和實現(xiàn)高效的用戶界面，我們經(jīng)常需要處理查詢操作。這些查詢操作通常涉及從后端服務(wù)器獲取數(shù)據(jù)或根據(jù)用戶交互獲取數(shù)據(jù)，并將其顯示在應(yīng)用程序的界面上。為了優(yōu)化這一過程，我們可以使用 Queries 設(shè)計模式。本文將詳細(xì)介紹 Queries 設(shè)計模式的核心概念以及如何在 Angular 應(yīng)用中有效地使用它。

什么是 Queries？

Queries 可以被定義為一個類的屬性，通過存儲 QueryService.create 工廠方法調(diào)用的結(jié)果來實現(xiàn)。它們有以下參數(shù)：

• 一個函數(shù)，用于返回查詢的值（通常是對連接器的調(diào)用）。
• 一個選項對象（通常用于指定重新加載和重置的觸發(fā)條件）。

下面是一個示例：

protected titleQuery: Query<Title[]> = this.query.create(
  () => this.userProfileConnector.getTitles(),
  {
    reloadOn: [LanguageSetEvent],
  }
);

在上述示例中，我們創(chuàng)建了一個名為 titleQuery 的查詢，它通過調(diào)用 userProfileConnector.getTitles() 函數(shù)來獲取標(biāo)題數(shù)據(jù)，并指定了一個觸發(fā)重新加載的條件，即 LanguageSetEvent 事件。這意味著每當(dāng) LanguageSetEvent 事件發(fā)生時，查詢將重新加載數(shù)據(jù)。

觸發(fā)條件：reloadOn 和 resetOn

Queries 模式的關(guān)鍵之一是能夠根據(jù)特定的事件或可觀察流觸發(fā)數(shù)據(jù)的重新加載或重置。這些觸發(fā)條件由 reloadOn 和 resetOn 參數(shù)定義，并且可以接受事件或可觀察流作為參數(shù)。每次發(fā)出這種類型的可觀察對象時，都會觸發(fā)數(shù)據(jù)的重新加載（對于 reloadOn 觸發(fā)條件）或數(shù)據(jù)的重置（對于 resetOn 觸發(fā)條件）。

主要區(qū)別在于，reset 會立即清除查詢狀態(tài)，而 reload 只會在加載新數(shù)據(jù)時更新狀態(tài)，不會立即清除舊數(shù)據(jù)。

使用 Reload 觸發(fā)條件

reload 觸發(fā)條件非常適合處理語言和貨幣更改事件。在這種情況下，通常希望在這些事件發(fā)生后立即更新所有與語言或貨幣相關(guān)的內(nèi)容，但又不希望引入界面閃爍或顯示加載器。使用 reload 觸發(fā)條件，查詢會在語言或貨幣更改后在后臺重新加載數(shù)據(jù)，同時仍然顯示當(dāng)前值。當(dāng)從API中獲取到新的響應(yīng)以匹配正確的語言時，UI將使用新值進(jìn)行更新，從而提供流暢的用戶體驗。

例如，考慮一個多語言應(yīng)用程序，用戶可以隨時切換語言設(shè)置。如果用戶在應(yīng)用程序中選擇了新的語言，觸發(fā) LanguageSetEvent 事件，reload 觸發(fā)條件會確保在后臺加載新語言的內(nèi)容，而不會中斷用戶的操作。

使用 Reset 觸發(fā)條件

reset 觸發(fā)條件非常適合響應(yīng)可能引入后端狀態(tài)重大更改的事件。一個例子是 OrderPlacedEvent，它表示當(dāng)前購物車已經(jīng)下單，并且現(xiàn)在為空。在這種情況下，一旦發(fā)生 OrderPlacedEvent 事件，當(dāng)前購物車狀態(tài)就不再有效，因此最安全的做法是將其重置為未定義的值，并使用更新后的API狀態(tài)重新加載購物車數(shù)據(jù)（這可能是一個空購物車）。

此外，可組合的商店前端可以通過顯示購物車組件上的加載指示器來響應(yīng)狀態(tài)重置，同時應(yīng)用程序等待API響應(yīng)。這有助于向用戶傳達(dá)正在加載數(shù)據(jù)的信息。

實際應(yīng)用場景

為了更好地理解 Queries 設(shè)計模式的實際應(yīng)用，讓我們考慮一個電子商務(wù)應(yīng)用程序的例子。在這個應(yīng)用中，用戶可以瀏覽產(chǎn)品，將產(chǎn)品添加到購物車，并在下單時查看訂單詳情。以下是一些用例：

查詢產(chǎn)品列表

我們可以創(chuàng)建一個查詢來獲取產(chǎn)品列表，并在用戶瀏覽不同類別的產(chǎn)品時觸發(fā) reload 以確保數(shù)據(jù)是最新的。

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

在這里，CategoryChangeEvent 事件會觸發(fā)產(chǎn)品列表的重新加載，以便及時更新頁面上的產(chǎn)品信息。

查詢購物車

購物車是一個特殊的用例，因為它可能會在多個事件中發(fā)生更改。我們可以使用 reset 觸發(fā)條件來處理購物車的更新。

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

在這里，OrderPlacedEvent 和 CartClearedEvent 事件都會觸發(fā)購物車查詢的重置。一旦訂單下單或購物車被清空，我們就希望購物車的狀態(tài)立即重置，以便反映最新的情況。

以上就是掌握Queries設(shè)計模式優(yōu)化Angular應(yīng)用開發(fā)技巧的詳細(xì)內(nèi)容，更多關(guān)于Angular開發(fā)Queries設(shè)計模式的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論