上一節我們已經搭建好項目的基本骨架,現在我們就來對項目的整體結構進行規划,項目結構規划每個人每個公司都有不同的方式,我們不去論好壞還是是否合理,只要你當前覺得它是最好的實現就好,不過我還是建議去參考優秀項目的規划方式。
____________________________________________________
2018年11月23日更新:
關於項目結構部分會有所調整,最近比較忙,我會盡快重構代碼。
__________________________________________________________
2018年11月25更新
代碼結構主要調整core模塊里的項目公用組件的存放位置,將原存放在core模塊里放到shared模塊里,並在shared模塊里新增routes文件夾用於存放非項目公用的模塊部分。
__________________________________________________________
項目結構設計總原則:一切皆模塊,鹿途項目的模塊主要以功能划分,每個完整的功能點就是一個獨立的模塊,有自己獨立的路由服務等,然后我們在把構建完成的子模塊注入到主模塊,如果不需要這個模塊的功能,直接從主模塊里把它移除,需要什么新功能就新開一個模塊然后在注入到主模塊。
我們先分析app目錄下結構的規划:app目錄下包含core、layout、routes、shared、styles五個部分;這五部門除styles以為都是以模塊的方式呈現,生成模塊的快捷命令是
ng g m ./ModuleName
如:ng g m ./core
下面我們來討論每個模塊的細節設計與此模塊在項目中的職責描述:
core模塊是項目中的一個公共資源池負責向其它模塊提供幫助,給其它模塊帶來便利,鹿途項目會把二次封裝的NG-ZORRO組件,項目通用的服務,管道,通用驗證,以及一些公用方法存放在此模塊中,至於模塊里的內容如何存放就因人而異,我建議以功能類型划分放在不同的文件夾下。
layout模塊是項目中的模版提供商,整個后台管理系統存在多種不同的呈現方式,鹿途系統主體是以上部的導航左邊的菜單欄以及底部的版權欄的方式進行呈現,鹿途系統的登錄部分又是以另一種截然不同的方式呈現,而后期的地圖部分可能又會以區別於前兩種形式風格進行呈現,以上呈現的方式對於項目來說就是不同的模版,我們的設計目標一直秉承着能省就省,於是就誕生了layout模塊,layout模塊下會存在多種不同風格的模版,項目中的所有呈現方式都由它提供。
routes模塊是項目中的功能集中營也是項目的核心,它是項目中的所有模塊的一個集中實現的場所,其它模塊都是為它服務,我們將在這個模塊下進行業務場景的復現和功能的開發。
shared模塊是項目中的采購分發中心,它主要是負責將一些公共資源進行引入,然后再從統一的出口分發到項目中的其它部分。
styles模塊是項目中的公共美容室,職責就不贅述了。
項目github地址:https://github.com/ZhouRenYou/ng-deerway
項目預覽地址(非實時更新):https://zhourenyou.github.io/web-deerway/passport/login