個人前端規範系列-前端專屬的目錄結構[解決項目中的釘子戶]

爲何須要前端專屬的項目結構

這裏說到目錄結構，想必很多程序員會想到按職能分目錄吧！如下所提的目錄結構爲單頁面目錄結構

如下面這種爲例[按職能劃分]

├──src
│   ├──view                    //頁面
│   ├──utils                   //JS工具庫
│   ├──api                     //api接口
│   ├──style                   //style
│   ├──config                  //配置
│   ├──model                   //model層實際上是redux或vux文件
│   ├──component               //組件
│   ├── App.vue                // 入口頁面
│   ├── main.js                // 入口 加載組件 初始化等
│   ├── assets                 // 主題 字體等靜態資源
├── index.html                 // html模板
└── package.json

其實該目錄結構徹底沒問題,按職能劃分結構很是清晰,api放api,靜態資源放assets裏等等。可是前端目錄結構,筆者認爲應該對於頁面和組件繼續細分。

舉個列子當項目較大時,api目錄裏存在api將會很是之多。大體效果以下圖:


該圖爲筆者某個項目的api結構圖,雖然筆者按照某個約定api文件名==view裏對應的頁面組名.可是真正維護起來有時會遇到這麼兩種常見狀況.
1.刪除頁面：你將刪除pages/carts[購物車頁面]裏的某個頁面,可是問題來了你不肯定api/carts[購物車api]哪些api纔是不用的,其實沒用到的有些IDE會提示。
2.複製移動組件或頁面: 好比你想複製組件,因爲劃分顆粒度不夠細,你又一次面臨該組件對應什麼api和什麼靜態資源,這麼移動複製時只能靠猜了= =

其實出現上面問題,就是該種按職能劃分的方法不太適合前端。若是你仔細想一想前端頁面的刪除邏輯,你就會知道咱們通常會去作刪除或廢棄的單位就是頁面或組件,因此筆者前端目錄應該對於頁面和組件繼續細分

這裏在扯遠點,不知各位看官老爺是否記得MVC框架，這個衍生於後端思惟的前端框架。爲何會被MVVM框架逐漸取代? 緣由就是MVC這種框架不適合前端這種頻繁須要數據和頁面組件聯動的場景,由於前端不單單是管好數據並渲染這麼簡單,而是要應付各類數據變化對應的頁面組件變化,而MVVM框架恰能解決該痛點。因此，後端這種按職能劃分的目錄結構雖好，但用於前端也不是最合適的方案。

目標

在按職能劃分目錄的基礎上,再細分到按頁面和組件劃分目錄，作到刪除組件時不會牽連到其餘組件和頁面！不會出現頁面刪除後，資源還常駐於項目中成爲釘子戶.

解決方案

示例結構

├──src
│   ├──view                    //頁面
│       ├──carts               //購物車頁面 
│           ├──component       //該頁面專用組件
│           ├──model.js        //該頁面的數據層[redux和vuex文件的細分]    
│           ├──index.js        //該頁面的佈局文件    
│           ├──service.js      //該頁面用到的api  
│           ├──index.scss      //該頁面用到的scss  
│   ├──utils                   //JS工具庫
│   ├──api                     //共用api接口【永不刪除】
│   ├──style                   //共用style【永不刪除】
│   ├──config                  //配置
│   ├──model                   //共用model層實際上是redux或vux文件【永不刪除】
│   ├──component               //共用組件
│       ├──map                 //地圖組件
│           ├──model.js        //該組件的數據層[redux和vuex文件的細分]    
│           ├──index.js        //該組件的佈局文件    
│           ├──service.js      //該組件用到的api  
│           ├──index.scss      //該組件用到的scss  
│   ├── App.vue                // 入口頁面
│   ├── main.js                // 入口 加載組件 初始化等
│   ├── assets                 // 主題 字體等靜態資源【永不刪除】
├── index.html                 // html模板
└── package.json

這裏分爲三個級別共用級別,頁面級別,組件級別

共用級別

這個好理解,就是項目常常會共用到的資源，基本上一旦定下,爲了項目穩定就永不刪除了。

頁面級別

│   ├──view                    //頁面
│       ├──carts               //購物車頁面 
│           ├──component       //該頁面專用組件
│           ├──model.js        //該頁面的數據層[redux和vuex文件的細分]    
│           ├──index.js        //該頁面的佈局文件    
│           ├──service.js      //該頁面用到的api  
│           ├──index.scss      //該頁面用到的scss

可見圍繞該頁面各類職能的文件又再建一遍,且都爲該頁面專用,連組件也是頁面專用級別的。

組件級別

│   ├──component               //共用組件
│       ├──map                 //地圖組件
│           ├──assets          //該組件專用圖片或icon  
│           ├──model.js        //該組件的數據層[redux和vuex文件的細分]    
│           ├──index.js        //該組件的佈局文件    
│           ├──service.js      //該組件用到的api  
│           ├──index.scss      //該組件用到的scss

可見圍繞該組件各類職能的文件又再建一遍,且都爲該組件專用。

總結

在按職能劃分目錄的基礎上,再細分到按頁面和組件劃分目錄。如此這般,組件想刪即刪想改即改，反作用更可控!!不再怕留下釘子戶資源啦！