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

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

什么是 Queries？

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

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

下面是一個(gè)示例：

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

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

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

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

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

使用 Reload 觸發(fā)條件

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

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

使用 Reset 觸發(fā)條件

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

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

實(shí)際應(yīng)用場(chǎng)景

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

查詢產(chǎn)品列表

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

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

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

查詢購(gòu)物車(chē)

購(gòu)物車(chē)是一個(gè)特殊的用例，因?yàn)樗赡軙?huì)在多個(gè)事件中發(fā)生更改。我們可以使用 reset 觸發(fā)條件來(lái)處理購(gòu)物車(chē)的更新。

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

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

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

最新評(píng)論