摘要：但是前端目錄結(jié)構(gòu)筆者認(rèn)為應(yīng)該對(duì)于頁(yè)面和組件繼續(xù)細(xì)分。舉個(gè)列子當(dāng)項(xiàng)目較大時(shí)目錄里存在將會(huì)非常之多。所以，后端這種按職能劃分的目錄結(jié)構(gòu)雖好，但用于前端也不是最合適的方案。

這里說(shuō)到目錄結(jié)構(gòu)，想必不少程序員會(huì)想到按職能分目錄吧！以下所提的目錄結(jié)構(gòu)為單頁(yè)面目錄結(jié)構(gòu)

以下面這種為例[按職能劃分]

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

其實(shí)該目錄結(jié)構(gòu)完全沒問(wèn)題,按職能劃分結(jié)構(gòu)非常清晰,api放api,靜態(tài)資源放assets里等等。但是前端目錄結(jié)構(gòu),筆者認(rèn)為應(yīng)該對(duì)于頁(yè)面和組件繼續(xù)細(xì)分。

舉個(gè)列子當(dāng)項(xiàng)目較大時(shí),api目錄里存在api將會(huì)非常之多。大致效果如下圖:


該圖為筆者某個(gè)項(xiàng)目的api結(jié)構(gòu)圖,雖然筆者按照某個(gè)約定api文件名==view里對(duì)應(yīng)的頁(yè)面組名.但是真正維護(hù)起來(lái)有時(shí)會(huì)遇到這么兩種常見情況.
1.刪除頁(yè)面：你將刪除pages/carts[購(gòu)物車頁(yè)面]里的某個(gè)頁(yè)面,但是問(wèn)題來(lái)了你不確定api/carts[購(gòu)物車api]哪些api才是不用的,其實(shí)沒用到的有些IDE會(huì)提示。
2.復(fù)制移動(dòng)組件或頁(yè)面: 比如你想復(fù)制組件,由于劃分顆粒度不夠細(xì),你又一次面臨該組件對(duì)應(yīng)什么api和什么靜態(tài)資源,這么移動(dòng)復(fù)制時(shí)只能靠猜了= =

其實(shí)出現(xiàn)上面問(wèn)題,就是該種按職能劃分的方法不太適合前端。如果你仔細(xì)想想前端頁(yè)面的刪除邏輯,你就會(huì)知道我們一般會(huì)去做刪除或廢棄的單位就是頁(yè)面或組件,所以筆者前端目錄應(yīng)該對(duì)于頁(yè)面和組件繼續(xù)細(xì)分

這里在扯遠(yuǎn)點(diǎn),不知各位看官老爺是否記得MVC框架，這個(gè)衍生于后端思維的前端框架。為什么會(huì)被MVVM框架逐漸取代? 原因就是MVC這種框架不適合前端這種頻繁需要數(shù)據(jù)和頁(yè)面組件聯(lián)動(dòng)的場(chǎng)景,因?yàn)榍岸瞬粌H僅是管好數(shù)據(jù)并渲染這么簡(jiǎn)單,而是要應(yīng)付各種數(shù)據(jù)變化對(duì)應(yīng)的頁(yè)面組件變化,而MVVM框架恰能解決該痛點(diǎn)。所以，后端這種按職能劃分的目錄結(jié)構(gòu)雖好，但用于前端也不是最合適的方案。

在按職能劃分目錄的基礎(chǔ)上,再細(xì)分到按頁(yè)面和組件劃分目錄，做到刪除組件時(shí)不會(huì)牽連到其他組件和頁(yè)面！不會(huì)出現(xiàn)頁(yè)面刪除后，資源還常駐于項(xiàng)目中成為釘子戶.

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

這里分為三個(gè)級(jí)別共用級(jí)別,頁(yè)面級(jí)別,組件級(jí)別

這個(gè)好理解,就是項(xiàng)目經(jīng)常會(huì)共用到的資源，基本上一旦定下,為了項(xiàng)目穩(wěn)定就永不刪除了。

│   ├──view                    //頁(yè)面
│       ├──carts               //購(gòu)物車頁(yè)面 
│           ├──component       //該頁(yè)面專用組件
│           ├──model.js        //該頁(yè)面的數(shù)據(jù)層[redux和vuex文件的細(xì)分]    
│           ├──index.js        //該頁(yè)面的布局文件    
│           ├──service.js      //該頁(yè)面用到的api  
│           ├──index.scss      //該頁(yè)面用到的scss  

可見圍繞該頁(yè)面各種職能的文件又再建一遍,且都為該頁(yè)面專用,連組件也是頁(yè)面專用級(jí)別的。

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

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

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