上篇介紹了Util Angular Demo的目錄結(jié)構(gòu)和運(yùn)行機(jī)制，本文介紹Util封裝Angular的基本手法及背后的動機(jī)。

　　Angular應(yīng)用由Ts和Html兩部分構(gòu)成，本文介紹第一部分。

Angular Ts的封裝

　　Ts是Angular的代碼部分，用于編寫頁面邏輯。

依賴注入( Dependency Injection )

　　Ioc(Inversion of Control)已經(jīng)成為.Net Core服務(wù)端編程的標(biāo)配，Ioc解耦了類和依賴類之間的創(chuàng)建關(guān)系，讓你開發(fā)出低耦合高內(nèi)聚的系統(tǒng)。

　　有了Ioc，你就可以面向抽象編程，注入依賴的接口，直接使用即可，而不用關(guān)心這個(gè)對象是如何創(chuàng)建出來的，也不用關(guān)心它具體是什么類型。

　　Angular革命性的把Ioc引入到客戶端腳本編程，從這里也可以看出，Angular實(shí)際上更適合具有服務(wù)端編程經(jīng)驗(yàn)的開發(fā)人員。

　　依賴注入是Ioc的一種使用模式，最常見的是構(gòu)造方法依賴注入，將依賴對象定義在構(gòu)造方法參數(shù)上，運(yùn)行時(shí)，Ioc框架會把依賴對象“推送”進(jìn)來，從使用的角度看，業(yè)務(wù)代碼并不知道Ioc的存在，業(yè)務(wù)代碼未與Ioc框架耦合，極易測試，代碼也極度清爽，這一度讓依賴注入成為Ioc的代名詞，也是Ioc的推薦用法。

　　當(dāng)在Angular中使用依賴注入，有沒有什么缺陷呢？下面來看個(gè)例子。

?

　　這段代碼需要發(fā)送Http請求，所以從構(gòu)造方法注入了Http。

　　你必須要精確的知道Angular的哪個(gè)類提供了Http服務(wù)，并且需要知道這個(gè)類在什么路徑下。并不是每個(gè)類都像Http這么簡短易記，這增加了大腦的負(fù)荷。

　　對于專業(yè)Angular前端人員，這算不上什么缺陷，不過它確實(shí)增加了小團(tuán)隊(duì)使用Angular的學(xué)習(xí)成本。

　　對于這個(gè)例子，哪怕你知道注入Http類，也清楚它的路徑，但可能仍然引入了未知的Bug。Angular還提供了一個(gè)叫HttpClient的類，它在@angular/common/http路徑下，HttpClient提供了攔截等高級機(jī)制，用來取代@angular/http包。如果你團(tuán)隊(duì)的一部分人使用HttpClient，并對Http進(jìn)行了攔截，比如設(shè)置全局Token，另一部分人使用Http類發(fā)送請求，就會導(dǎo)致潛在的BUG。

　　現(xiàn)在你清楚了對Angular API進(jìn)行封裝的必要性。

　　封裝是一種隱藏實(shí)現(xiàn)細(xì)節(jié)的手段，封裝以后，你的注意力將從Angular Api轉(zhuǎn)移到自己的業(yè)務(wù)上。

　　對于Http請求，理想的API可能長成這樣。?

?

　　首先，你并沒有從@angular/common/http引入HttpClient，更沒有在構(gòu)造方法上注入它。這解決了需要記憶API的問題。

　　其次，你并不清楚util.http封裝的具體類型是什么，這統(tǒng)一了團(tuán)隊(duì)的API調(diào)用，也方便你在未來需要更換實(shí)現(xiàn)時(shí)不至于挨處查找。　　

　　我在前幾年使用EasyUi時(shí)也封裝了這樣的Helper，通過直接引用并簡單包裝就完成了任務(wù)。?

　　Helper往往表現(xiàn)為靜態(tài)方法，面對Angular的Ioc體系，封裝Helper變得很棘手，如何把需要的對象依賴注入到Helper靜態(tài)方法中呢？?

　　你如果直接import引入Angular API，這樣封裝出來的Helper行為上可能是錯的，比如HttpClient的攔截機(jī)制，import創(chuàng)建的HttpClient實(shí)例脫離了Ioc框架，這將導(dǎo)致攔截失效。?

　　一種辦法是避開靜態(tài)方法，你可以注入U(xiǎn)til類，這樣就可以拿到Angular Ioc容器中的相關(guān)實(shí)例了，這確實(shí)是個(gè)辦法。?

　　不過你如果希望使用靜態(tài)方法，有沒有辦法現(xiàn)實(shí)呢？?

服務(wù)定位器( Service Locator )

　　依賴注入威名遠(yuǎn)播，以至于很多人并不清楚它還有個(gè)同父異母的弟弟 —— 服務(wù)定位器。

　　服務(wù)定位器是Ioc的另一種使用模式，你可以在代碼中主動調(diào)用Ioc容器方法“拉取”依賴對象，這會導(dǎo)致你的代碼與Ioc框架耦合，讓代碼也更難測試。

　　服務(wù)定位器儼然成為一種反模式，那么它是否已經(jīng)一無是處了呢？

　　我發(fā)現(xiàn)在大多數(shù)情況下，并不需要服務(wù)定位器，但在某些情況下，它卻非常有用。

　　哪種情況需要服務(wù)定位器？當(dāng)你無法使用依賴注入時(shí)，就該它出手了。

　　比如靜態(tài)方法，你就無法使用依賴注入，通過服務(wù)定位器方式仍然可以訪問Ioc，這對于封裝框架Helper有非常重大的意義，我會在本系列后續(xù)文章介紹服務(wù)定位器在.Net Core服務(wù)端封裝上的應(yīng)用。?

　　Util Angular Helper大量使用了服務(wù)定位器，以更簡單的方式提供常用API。?

Util Angular Helper介紹

• Helper

　　它位于/Typings/util/common/helper.ts，包含一些常用操作，比如空值判斷，類型轉(zhuǎn)換等，helper.ts內(nèi)部將操作委托給lodash等第三方j(luò)s庫。

• IocHelper

?

　　它位于/Typings/util/angular/ioc-helper.ts。

　　IocHelper內(nèi)部保存了Angular Ioc容器實(shí)例，以方便其它Helper以服務(wù)定位器的方式來訪問Ioc容器。

　　由于Angular Ioc具有分級特性，所以保存了模塊級和組件級兩種容器，對于獲取路由參數(shù)等操作，必須從組件容器獲取實(shí)例，否則將導(dǎo)致錯誤的行為。

　　在什么位置設(shè)置Angular Ioc容器呢？

　　模塊級容器在AppModule根模塊中設(shè)置，組件級容器需要在每個(gè)組件設(shè)置，這造成了不便，尚未找到更優(yōu)雅的方式。

?

　　下面演示了IocHelper的用法。

let client = util.ioc.get<HttpClient>(HttpClient);

• HttpHelper

　　對于業(yè)務(wù)操作，使用得最頻繁的Angular Api莫過于發(fā)送Http請求，從服務(wù)端獲取Json數(shù)據(jù),或?qū)⒈韱螖?shù)據(jù)傳遞給服務(wù)端處理。

　　Util通過HttpHelper，WebApi，Form三個(gè)Helper從不同層次對Http操作進(jìn)行了封裝。

　　HttpHelper位于/Typings/util/angular/http-helper.ts，對Angular?HttpClient進(jìn)行了簡單包裝，提供原始Http操作。

　　

　　Util盡量提供同步Api，使用回調(diào)函數(shù)，而不是Rx的Observable或異步Promise，這樣團(tuán)隊(duì)成員只要具備JQuery經(jīng)驗(yàn)就能開發(fā)，降低了團(tuán)隊(duì)的學(xué)習(xí)成本。?

　　在絕大多數(shù)情況下，你并不需要調(diào)用HttpHelper，WebApi和Form操作類會提供更多默認(rèn)行為。

• WebApi?

　　在發(fā)送Http請求時(shí)，你通常需要處理異常。?

　　異常可分為Http異常和業(yè)務(wù)異常兩類。?

　　Http異常是未成功的Http響應(yīng)，比如Http狀態(tài)碼為500的服務(wù)器內(nèi)部錯誤。Http異常通常和業(yè)務(wù)無關(guān)，所以每次發(fā)送請求設(shè)置Http異常處理是枯燥乏味的。?

　　另一方面，Http返回200成功信號并不代表業(yè)務(wù)執(zhí)行成功，所以不應(yīng)該通過Http狀態(tài)碼來識別業(yè)務(wù)是否成功完成。?

　　通過客戶端和服務(wù)端約定標(biāo)準(zhǔn)通信格式可以簡化異常處理。?

　　先來看客戶端結(jié)果類型。

?

?

　　下面是服務(wù)端結(jié)果類型。

?

?

　　WebApi操作類位于/Typings/util/common/webapi.ts，它在HttpHelper的基礎(chǔ)上，設(shè)置了默認(rèn)的Http異常處理，將Http異常輸出到瀏覽器控制臺，以方便排錯，另外將服務(wù)端返回結(jié)果轉(zhuǎn)換為客戶端標(biāo)準(zhǔn)結(jié)果類型。?

　　下面展示了WebApi操作類的用法，handler方法是成功處理函數(shù)，你不用進(jìn)行任何狀態(tài)判斷，WebApi內(nèi)部已經(jīng)處理過了。注意result參數(shù)并不是我們定義的標(biāo)準(zhǔn)Result類型，而是Result的data屬性，也就是實(shí)際業(yè)務(wù)類型，前后端標(biāo)準(zhǔn)通信格式被封裝起來。

• Form?

　　對于管理后臺，大多為表單操作，所以我們對表單需要特殊關(guān)照。?

　　Form操作類位于/Typings/util/common/form.ts，它內(nèi)置了一些表單常見操作。?

　　當(dāng)表單提交失敗，通常會提示一個(gè)錯誤消息，以指示用戶修正錯誤。

?

　　錯誤提示是Form操作類的默認(rèn)設(shè)置，你也可以取消它。

?

　　有時(shí)候，你希望在提交表單前先確認(rèn)一下。

?

?

　　通過設(shè)置一個(gè)屬性就完成任務(wù)是不是很爽？?

?

　　Form操作類還包含很多有用的功能，下面是它的參數(shù)定義。

?Form操作類參數(shù)

　　Form操作類建立在WebApi操作類之上，而WebApi操作類建立上HttpHelper之上，通過層層包裝，讓Http請求變得更加簡單易用。

• RouterHelper?

　　Angular提供了路由機(jī)制，路由訪問是僅次于Http請求的操作。

　　通常需要從路由中獲取參數(shù)。

　　RouterHelper用于操作路由,位于/Typings/util/angular/router-helper.ts，在內(nèi)部使用服務(wù)定位器訪問ActivatedRoute，簡化了路由訪問。

• Message?

　　表單操作經(jīng)常需要彈出各類消息框，比如成功提示框，錯誤提示框，確認(rèn)提示框等。

　　Message操作類集成封裝了PrimeNg和Angular?Material的消息框，它位于/Typings/util/common/message.ts。

?

　　下面彈出了一個(gè)錯誤消息框。

util.message.error("哈哈");

• Dialog

　　Dialog操作類封裝了Material彈出層，位于/Typings/util/common/dialog.ts。

?

?

　　下面演示了將外部網(wǎng)頁加載到iframe中。

?

　　加載業(yè)務(wù)組件應(yīng)使用dialogComponent屬性。

?

Util Angular CRUD基類介紹?

　　Js是一種弱類型語言，通過原型鏈和閉包可以模擬出面向?qū)ο蟮奶卣?#xff0c;雖然看過一些文章說Js其實(shí)比C#這樣的面向?qū)ο笳Z言更加OO，不過我始終沒有感覺出來，這或許是專業(yè)水平和我這種半吊子水平的區(qū)別所在吧。

　　前幾年我對Js的封裝僅限于Helper或組件，服務(wù)端摸索出來的經(jīng)驗(yàn)很難應(yīng)用到Js，雖然能模擬出我想達(dá)到的效果，但卻不是那么直觀。

　　雖然有人常說語言不是問題，語法更不是問題，但那指的是高手，在尚未達(dá)到高手境界以前，我們需要更優(yōu)雅的語法糖，這使你寫起來心情舒暢，開發(fā)業(yè)務(wù)效率倍增。

　　Typescript提供了強(qiáng)大的語法糖，包括面向?qū)ο蠡菊Z法，泛型，lambda表達(dá)式等，Angular則提供了Ioc等服務(wù)端才具備的特性，這對于具備服務(wù)端架構(gòu)設(shè)計(jì)經(jīng)驗(yàn)的朋友，無疑是把利器。

　　對于簡單Crud操作，來回就那幾句重復(fù)代碼，能否在Angular開發(fā)中像C#一樣封裝個(gè)基類呢？

　　有了Typescript和Angular，這是非常輕松的任務(wù)。

• TableQueryComponentBase?

　　對于簡單Crud，通常在主界面放一個(gè)表格，并提供Crud操作。

　　TableQueryComponentBase是表格查詢基類，它提供了從表格刪除行，刷新表格，搜索等功能，位于/Typings/util/base/table-query-component-base.ts。

　　有了基類，業(yè)務(wù)組件將變得十分干凈。

?

　　Angular官方推薦將業(yè)務(wù)操作從組件分離，使用服務(wù)的形式依賴注入到組件，這讓你的設(shè)計(jì)更加內(nèi)聚。

　　不過我沒有機(jī)械的執(zhí)行這一指南，僅在業(yè)務(wù)操作變得復(fù)雜時(shí)使用這種方式，在更多的簡單場景，我會把數(shù)據(jù)操作直接內(nèi)置到組件中。

• EditComponentBase

　　EditComponentBase是Crud編輯基類，除了提交表單以外，它還能從路由取得Id并從服務(wù)端加載數(shù)據(jù)，位于/Typings/util/base/edit-component-base.ts。

?

?

　　ApplicationEditComponent示例類重寫了loadById和submit方法，刪除掉同樣可以工作，當(dāng)你有特殊要求的時(shí)候進(jìn)行重寫。

• FormComponentBase?

　　一個(gè)常見的需求，當(dāng)表單已經(jīng)被更改時(shí)，跳轉(zhuǎn)頁面需要提示用戶保存。

　　FormComponentBase是表單基類，位于/Typings/util/base/form-component-base.ts，它提供了表單變更值檢查方法。

?

• TreeTableQueryComponentBase?與?TreeEditComponentBase

　　與TableQueryComponentBase和EditComponentBase類似，這兩兄弟也是用來支持簡單Crud操作的，不過它們用來支持樹型關(guān)系。

　　繼承基類，收工，不要在簡單Crud上浪費(fèi)過多時(shí)間。

?

?

　　Util Demo的role示例演示了樹型Crud的用法。

小結(jié)

　　本文簡單介紹了Util Angular Helper的封裝，使用服務(wù)定位器封裝成鏈?zhǔn)?#xff0c;所有helper都內(nèi)聚在util這個(gè)命名空間下，這大幅提升了Angular的易用性，對于常用功能，不用記憶任何API，憑借一點(diǎn)模糊的印象就能夠完成任務(wù)。

　　另外介紹了為簡化Crud提供的基類，這和服務(wù)端Crud封裝很相似，得益于Typescript和Angular所提供的強(qiáng)大語法糖。

　　未完待續(xù)，Angular 組件封裝及TagHelper將在下篇介紹。

　　寫文需要動力，請大家多多支持，點(diǎn)下推薦，Github點(diǎn)下星星。

　　Util應(yīng)用框架交流一群: 24791014

　　Util應(yīng)用框架地址：https://github.com/dotnetcore/util

相關(guān)文章：

• .Net Core應(yīng)用框架Util介紹（一）

• .Net Core應(yīng)用框架Util介紹（二）

• .Net Core應(yīng)用框架Util介紹（三）
  

原文地址:?https://www.cnblogs.com/xiadao521/p/Util-Introduction-4.html

---

.NET社區(qū)新聞，深度好文，歡迎訪問公眾號文章匯總 http://www.csharpkit.com

總結(jié)

以上是生活随笔為你收集整理的.Net Core应用框架Util介绍（四）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。