Commands Queries設(shè)計(jì)模式提高Angular應(yīng)用性能及可維護(hù)性

基本概念
命令 (Commands)
命令代表了一項(xiàng)能夠改變系統(tǒng)狀態(tài)的操作,通常通過(guò)向后端發(fā)起REST調(diào)用來(lái)實(shí)現(xiàn)。每個(gè)命令都可以返回一個(gè)結(jié)果,并在執(zhí)行時(shí)考慮執(zhí)行策略。每次命令執(zhí)行都會(huì)返回一個(gè)Observable,它會(huì)在命令執(zhí)行完成后發(fā)出(可選的成功結(jié)果),然后完成,或者在命令執(zhí)行導(dǎo)致錯(cuò)誤時(shí)拋出錯(cuò)誤。
重要的是要注意,訂閱結(jié)果Observable并不會(huì)觸發(fā)命令的執(zhí)行,這是可選的。
命令可以通過(guò)將CommandService.create工廠(chǎng)方法的調(diào)用結(jié)果存儲(chǔ)為類(lèi)的屬性來(lái)定義。一個(gè)命令通常包括以下參數(shù):
- 調(diào)度命令的函數(shù)(通常是調(diào)用連接器的函數(shù))。
- 選項(xiàng)對(duì)象(通常用于指定執(zhí)行策略)。
以下是一個(gè)示例:
protected updateCommand: Command<{ details: User }> = this.command.create(
(payload) =>
this.userIdService.takeUserId(true).pipe(
switchMap((uid) =>
this.userProfileConnector.update(uid, payload.details)
),
{
strategy: CommandStrategy.Queue,
}
);查詢(xún) (Queries)
與命令不同,查詢(xún)是一種不改變系統(tǒng)狀態(tài)的操作,它用于從系統(tǒng)中檢索數(shù)據(jù)而不會(huì)對(duì)其進(jìn)行修改。通常,查詢(xún)返回一個(gè)Observable,它發(fā)出數(shù)據(jù)并完成,供訂閱者使用。與命令一樣,查詢(xún)也可以定義執(zhí)行策略。
執(zhí)行策略
命令和查詢(xún)的執(zhí)行可以根據(jù)執(zhí)行策略進(jìn)行控制,以下是一些常見(jiàn)的執(zhí)行策略:
- Parallel(并行):執(zhí)行所有命令或查詢(xún)并行進(jìn)行,不考慮它們的順序。
- Queue(隊(duì)列):命令或查詢(xún)按照它們的調(diào)用順序排隊(duì)執(zhí)行,這是默認(rèn)的執(zhí)行策略。
- CancelPrevious(取消上一個(gè)):如果一個(gè)命令或查詢(xún)尚未完成執(zhí)行,新的執(zhí)行將開(kāi)始,并且會(huì)取消上一個(gè)執(zhí)行。上一個(gè)執(zhí)行的結(jié)果流將完成而不發(fā)出值。
- ErrorPrevious(上一個(gè)錯(cuò)誤):如果一個(gè)命令或查詢(xún)尚未完成執(zhí)行,新的執(zhí)行將開(kāi)始,并且會(huì)為上一個(gè)執(zhí)行引發(fā)錯(cuò)誤。上一個(gè)執(zhí)行的結(jié)果流將拋出錯(cuò)誤。
實(shí)際示例
為了更好地理解Commands and Queries設(shè)計(jì)模式,讓我們通過(guò)一個(gè)實(shí)際的示例來(lái)演示其應(yīng)用。假設(shè)我們正在開(kāi)發(fā)一個(gè)用戶(hù)管理系統(tǒng),我們需要?jiǎng)?chuàng)建一個(gè)命令來(lái)更新用戶(hù)的詳細(xì)信息。
首先,我們定義一個(gè)命令來(lái)執(zhí)行用戶(hù)詳細(xì)信息的更新:
protected updateCommand: Command<{ details: User }> = this.command.create(
(payload) =>
this.userIdService.takeUserId(true).pipe(
switchMap((uid) =>
this.userProfileConnector.update(uid, payload.details)
),
{
strategy: CommandStrategy.Queue,
}
);在這個(gè)示例中,updateCommand是一個(gè)命令,它會(huì)接收用戶(hù)的詳細(xì)信息并將其發(fā)送到后端。我們選擇了執(zhí)行策略為隊(duì)列,這意味著如果有多個(gè)更新請(qǐng)求,它們將按順序執(zhí)行,以確保數(shù)據(jù)的一致性。
現(xiàn)在,讓我們考慮一個(gè)查詢(xún)的示例。假設(shè)我們需要獲取用戶(hù)的個(gè)人資料:
protected getUserProfileQuery: Query<{ userId: string }, UserProfile> = this.query.create(
(payload) => this.userProfileConnector.getProfile(payload.userId),
{
strategy: QueryStrategy.Parallel,
}
);這個(gè)查詢(xún) getUserProfileQuery 接受用戶(hù)ID作為輸入,并從后端獲取用戶(hù)的個(gè)人資料。在這里,我們選擇了執(zhí)行策略為并行,這意味著我們可以同時(shí)獲取多個(gè)用戶(hù)的資料,以提高性能。
總結(jié)
Commands and Queries 設(shè)計(jì)模式是Angular應(yīng)用開(kāi)發(fā)中的重要概念,它有助于管理系統(tǒng)狀態(tài)和與后端的交互。命令用于執(zhí)行可能改變系統(tǒng)狀態(tài)的操作,而查詢(xún)用于檢索數(shù)據(jù)而不會(huì)改變狀態(tài)。執(zhí)行策略可用于控制命令和查詢(xún)的執(zhí)行方式,包括并行執(zhí)行、隊(duì)列執(zhí)行、取消上一個(gè)執(zhí)行和上一個(gè)錯(cuò)誤處理。
通過(guò)合理使用Commands and Queries設(shè)計(jì)模式,您可以提高Angular應(yīng)用程序的性能和可維護(hù)性,確保系統(tǒng)狀態(tài)的一致性,并有效地管理與后端的通信。這一設(shè)計(jì)模式為復(fù)雜的應(yīng)用程序提供了有力的工具,使開(kāi)發(fā)人員能夠更好地組織和管理代碼。
以上就是Commands Queries設(shè)計(jì)模式提高Angular應(yīng)用性能及可維護(hù)性的詳細(xì)內(nèi)容,更多關(guān)于Commands Queries設(shè)計(jì)模式的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
- angular6?Error:Debug?Failure?at?typeToString解決分析
- 掌握Queries設(shè)計(jì)模式優(yōu)化Angular應(yīng)用開(kāi)發(fā)技巧
- Angular設(shè)計(jì)模式hierarchical?injector實(shí)現(xiàn)代碼復(fù)用模塊化
- Angular應(yīng)用懶加載模塊配置管理詳解
- Angular中Lazy Loading懶加載陷阱避坑最佳實(shí)踐
- 盤(pán)點(diǎn)分析Angular框架那些著名的安全漏洞
- Angular項(xiàng)目里ngsw-config.json文件作用詳解
相關(guān)文章
angular json對(duì)象push到數(shù)組中的方法
下面小編就為大家分享一篇angular json對(duì)象push到數(shù)組中的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
Angular 4根據(jù)組件名稱(chēng)動(dòng)態(tài)創(chuàng)建出組件的方法教程
組件是我們?cè)趯W(xué)習(xí)angular中必不可少的一部分,下面這篇文章主要給大家介紹了關(guān)于Angular 4如何根據(jù)組件名稱(chēng)動(dòng)態(tài)創(chuàng)建出組件的相關(guān)資料,文中通過(guò)圖文與示例代碼介紹的非常詳細(xì),需要的朋友可以參考借鑒,下面來(lái)一起看看吧。2017-11-11
angularJs中orderBy篩選以及filter過(guò)濾數(shù)據(jù)的方法
今天小編就為大家分享一篇angularJs中orderBy篩選以及filter過(guò)濾數(shù)據(jù)的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
AngularJS基礎(chǔ) ng-init 指令簡(jiǎn)單示例
本文主要介紹AngularJS ng-init 指令,這里幫大家整理了關(guān)于ng-init 指令的基本知識(shí)資料,并附有簡(jiǎn)單的代碼示例,有需要學(xué)習(xí)的小伙伴可以參考下2016-08-08
AngularJS 路由和模板實(shí)例及路由地址簡(jiǎn)化方法(必看)
下面小編就為大家?guī)?lái)一篇AngularJS 路由和模板實(shí)例及路由地址簡(jiǎn)化方法(必看)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06

