快捷導(dǎo)航

Angular2開發(fā)——組件規(guī)劃篇

更新時(shí)間：2017年03月28日 14:37:43 作者：Yitim

本文主要介紹了Angular2組件的相關(guān)知識(shí)。具有很好的參考價(jià)值，下面跟著小編一起來看下吧

本文集中講講筆者目前使用ng2來開發(fā)項(xiàng)目時(shí)對(duì)其組件的使用的個(gè)人的一些拙劣的經(jīng)驗(yàn)。

先簡(jiǎn)單講講從ng1到ng2框架下組件的職責(zé)與地位：

ng1中的一大特色——指令，分為屬性型、標(biāo)簽型、css類型和注釋型。其中寫在css類以及注釋中的組件想必多數(shù)人都不會(huì)去使用，而屬性型指令與標(biāo)簽型指令則是ng1火遍宇宙的功臣之一。在ng2中，標(biāo)簽型指令干脆被分離出來，追隨vue等新興勢(shì)力的風(fēng)格升級(jí)并稱為組件，并用來處理所有與視圖（DOM）打交道的事情，包括展示數(shù)據(jù)與動(dòng)畫。而屬性型指令則用于完善組件的功能，比如接收用戶輸入、響應(yīng)用戶點(diǎn)擊等事件。其實(shí)ng2中內(nèi)嵌的許多功能都是屬性型指令——ngFor、ngIf等等，而對(duì)于組件來說比較依賴具體的項(xiàng)目，所以跟適合基于項(xiàng)目來使用組件寫出一個(gè)個(gè)用戶看得見的界面來。同時(shí)組件還需要與路由打交道，前端路由可以看成是動(dòng)態(tài)更改DOM，在ng2路由中制定好規(guī)則后，其實(shí)就是在動(dòng)態(tài)渲染或銷毀不同的組件，以此實(shí)現(xiàn)前端頁面的切換。

然后講講筆者前面的項(xiàng)目時(shí)如何使用ng2組件搭起一個(gè)網(wǎng)站的：

1. 照著官方的做法，每個(gè)應(yīng)用得有一個(gè)根組件。

2. 區(qū)分前端路由，每個(gè)路由條目指向一個(gè)組件，每個(gè)組件各自渲染一個(gè)頁面。

3. 項(xiàng)目擴(kuò)大，單模塊不能滿足業(yè)務(wù)分類，所以先由根路由引導(dǎo)懶加載各個(gè)子模塊，然后由子模塊的子路由各自指向具體的子組件，并渲染各自的頁面。

4. 著眼單個(gè)子組件渲染的單個(gè)頁面，其實(shí)可以將一些可重用的標(biāo)簽塊封裝到一個(gè)新的組件里（比如需要ngFor遍歷的復(fù)雜數(shù)據(jù)項(xiàng)）。

5. 發(fā)現(xiàn)其實(shí)有一些組件（比如側(cè)邊按鈕或消息模態(tài)框）其實(shí)整個(gè)項(xiàng)目都可能使用到，得把這些封裝成全局共享的組件。

到現(xiàn)在自己都覺得有一點(diǎn)亂，究其原因，應(yīng)該是組件這個(gè)名稱的問題，因?yàn)樵趎g2框架下，大到路由頁面小到數(shù)據(jù)條目全都用的組件，聲明方式全都一個(gè)模樣，難免會(huì)亂。

沒辦法只能自己來給組件繼續(xù)細(xì)分類別了，筆者于是把ng2的組件分成了四類：

頁面組件

與路由打交道，只關(guān)心匹配路由規(guī)則渲染界面，此類組件在聲明時(shí)不需要 selector 參數(shù)（只由路由定位不需要具體標(biāo)簽）
接收路由參數(shù)或resolve數(shù)據(jù)，盡量不做其他業(yè)務(wù)交互的請(qǐng)求，且不設(shè)Input、Output變量

布局組件

用于細(xì)分頁面的模塊若頁面較簡(jiǎn)單可以省去直接使用單位組件，必須有具體的selector參數(shù)因?yàn)橐陧撁娼M件中使用
不負(fù)責(zé)獲取路由或resolve數(shù)據(jù)，且盡量不請(qǐng)求數(shù)據(jù)而通過Input傳入數(shù)據(jù)或Output響應(yīng)事件，所有業(yè)務(wù)交互請(qǐng)求盡量在布局組件中完成（不至于像放在頁面組件中那么亂，且各布局組件可以做到互不影響）

單位組件

必須有自己的selector，一般在自己模塊中可重用，通過各種屬性型指令修飾自身
用于簡(jiǎn)化單位級(jí)別的重復(fù)標(biāo)簽，比如獲取的列表數(shù)據(jù)中的每個(gè)數(shù)據(jù)項(xiàng)的界面展示就可以封裝成一個(gè)單位組件
只負(fù)責(zé)通過Input傳入數(shù)據(jù)并顯示，以及通過Output響應(yīng)事件到外層的布局組件或頁面組件中處理

共享組件

必須有selector，整個(gè)項(xiàng)目都共享的組件，實(shí)現(xiàn)比較自由，重在減少整個(gè)項(xiàng)目的重復(fù)代碼并方便維護(hù)
比較合適的比如消息彈框，加載進(jìn)度條等
大部分的屬性型指令，其實(shí)功能一般都比較通用，可以與共享組件等同對(duì)待，只不過共享組件擁有具體視圖而共享指令只用于實(shí)現(xiàn)通用功能

如果純文字不夠形象，筆者再給出自己畫的簡(jiǎn)易版ng2超級(jí)無敵前端架構(gòu)圖：

講來講去其實(shí)這里面完全沒有技術(shù)難點(diǎn)，只是在暗示著一件事——項(xiàng)目目錄安排很重要。

ng2可不認(rèn)識(shí)筆者給它細(xì)分的這么多類型的組件，這些分類是給自己看的，具體的體現(xiàn)就是以這個(gè)分類體系得出的一個(gè)項(xiàng)目目錄結(jié)構(gòu)。

以筆者自己在寫的一個(gè)項(xiàng)目為例：

筆者給文件夾命名前面有的加上了加號(hào)有的加上了減號(hào)，也算是自己的一種看似奇怪的目錄結(jié)構(gòu)安排了。

解釋一下就是：最外層這個(gè)+term代表整個(gè)懶加載模塊的目錄，里面帶加號(hào)的目錄下的組件代表是頁面組件，什么符號(hào)都沒有的代表是布局組件，帶減號(hào)的目錄下的組件代表是單位組件，單位組件可能在整個(gè)懶加載模塊中都使用到，所以直接在懶加載目錄的最外層，而布局組件都在具體的頁面組件同級(jí)目錄下。

總結(jié)就是拋開ES6與TypeScript的外表后ng2組件的使用在技術(shù)上難點(diǎn)不算多，本文純粹是一點(diǎn)拙劣的經(jīng)驗(yàn)之談，當(dāng)然筆者目前的經(jīng)驗(yàn)還遠(yuǎn)遠(yuǎn)不足，希望在日后的開發(fā)以致研究透徹ng2源碼后能有更深的見解。

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章: