Angular2開發——組件規劃篇

本文集中講講筆者目前使用ng2來開發項目時對其組件的使用的個人的一些拙劣的經驗。

先簡單講講從ng1到ng2框架下組件的職責與地位：

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

然后講講筆者前面的項目時如何使用ng2組件搭起一個網站的：

1. 照著官方的做法，每個應用得有一個根組件。

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

3. 項目擴大，單模塊不能滿足業務分類，所以先由根路由引導懶加載各個子模塊，然后由子模塊的子路由各自指向具體的子組件，并渲染各自的頁面。

4. 著眼單個子組件渲染的單個頁面，其實可以將一些可重用的標簽塊封裝到一個新的組件里（比如需要ngFor遍歷的復雜數據項）。

5. 發現其實有一些組件（比如側邊按鈕或消息模態框）其實整個項目都可能使用到，得把這些封裝成全局共享的組件。

到現在自己都覺得有一點亂，究其原因，應該是組件這個名稱的問題，因為在ng2框架下，大到路由頁面小到數據條目全都用的組件，聲明方式全都一個模樣，難免會亂。

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

頁面組件

• 與路由打交道，只關心匹配路由規則渲染界面，此類組件在聲明時不需要 selector 參數（只由路由定位不需要具體標簽）
• 接收路由參數或resolve數據，盡量不做其他業務交互的請求，且不設Input、Output變量

布局組件

• 用于細分頁面的模塊若頁面較簡單可以省去直接使用單位組件，必須有具體的selector參數因為要在頁面組件中使用
• 不負責獲取路由或resolve數據，且盡量不請求數據而通過Input傳入數據或Output響應事件，所有業務交互請求盡量在布局組件中完成（不至于像放在頁面組件中那么亂，且各布局組件可以做到互不影響）

單位組件

• 必須有自己的selector，一般在自己模塊中可重用，通過各種屬性型指令修飾自身
• 用于簡化單位級別的重復標簽，比如獲取的列表數據中的每個數據項的界面展示就可以封裝成一個單位組件
• 只負責通過Input傳入數據并顯示，以及通過Output響應事件到外層的布局組件或頁面組件中處理

共享組件

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

如果純文字不夠形象，筆者再給出自己畫的簡易版ng2超級無敵前端架構圖：

講來講去其實這里面完全沒有技術難點，只是在暗示著一件事——項目目錄安排很重要。

ng2可不認識筆者給它細分的這么多類型的組件，這些分類是給自己看的，具體的體現就是以這個分類體系得出的一個項目目錄結構。

以筆者自己在寫的一個項目為例：

筆者給文件夾命名前面有的加上了加號有的加上了減號，也算是自己的一種看似奇怪的目錄結構安排了。

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

總結就是拋開ES6與TypeScript的外表后ng2組件的使用在技術上難點不算多，本文純粹是一點拙劣的經驗之談，當然筆者目前的經驗還遠遠不足，希望在日后的開發以致研究透徹ng2源碼后能有更深的見解。

以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持億速云！