資訊專欄INFORMATION COLUMN
摘要：但是前端目錄結(jié)構(gòu)筆者認為應該對于頁面和組件繼續(xù)細分。舉個列子當項目較大時目錄里存在將會非常之多。所以，后端這種按職能劃分的目錄結(jié)構(gòu)雖好，但用于前端也不是最合適的方案。
為什么需要前端專屬的項目結(jié)構(gòu)
這里說到目錄結(jié)構(gòu)，想必不少程序員會想到按職能分目錄吧！以下所提的目錄結(jié)構(gòu)為單頁面目錄結(jié)構(gòu)
以下面這種為例[按職能劃分]
├──src │ ├──view //頁面 │ ├──utils //JS工具庫 │ ├──api //api接口 │ ├──style //style │ ├──config //配置 │ ├──model //model層其實是redux或vux文件 │ ├──component //組件 │ ├── App.vue // 入口頁面 │ ├── main.js // 入口 加載組件 初始化等 │ ├── assets // 主題 字體等靜態(tài)資源 ├── index.html // html模板 └── package.json
其實該目錄結(jié)構(gòu)完全沒問題,按職能劃分結(jié)構(gòu)非常清晰,api放api,靜態(tài)資源放assets里等等。但是前端目錄結(jié)構(gòu),筆者認為應該對于頁面和組件繼續(xù)細分。
舉個列子當項目較大時,api目錄里存在api將會非常之多。大致效果如下圖:
該圖為筆者某個項目的api結(jié)構(gòu)圖,雖然筆者按照某個約定api文件名==view里對應的頁面組名.但是真正維護起來有時會遇到這么兩種常見情況.
1.刪除頁面：你將刪除pages/carts[購物車頁面]里的某個頁面,但是問題來了你不確定api/carts[購物車api]哪些api才是不用的,其實沒用到的有些IDE會提示。
2.復制移動組件或頁面: 比如你想復制組件,由于劃分顆粒度不夠細,你又一次面臨該組件對應什么api和什么靜態(tài)資源,這么移動復制時只能靠猜了= =
其實出現(xiàn)上面問題,就是該種按職能劃分的方法不太適合前端。如果你仔細想想前端頁面的刪除邏輯,你就會知道我們一般會去做刪除或廢棄的單位就是頁面或組件,所以筆者前端目錄應該對于頁面和組件繼續(xù)細分
這里在扯遠點,不知各位看官老爺是否記得MVC框架，這個衍生于后端思維的前端框架。為什么會被MVVM框架逐漸取代? 原因就是MVC這種框架不適合前端這種頻繁需要數(shù)據(jù)和頁面組件聯(lián)動的場景,因為前端不僅僅是管好數(shù)據(jù)并渲染這么簡單,而是要應付各種數(shù)據(jù)變化對應的頁面組件變化,而MVVM框架恰能解決該痛點。所以，后端這種按職能劃分的目錄結(jié)構(gòu)雖好，但用于前端也不是最合適的方案。
目標在按職能劃分目錄的基礎(chǔ)上,再細分到按頁面和組件劃分目錄，做到刪除組件時不會牽連到其他組件和頁面！不會出現(xiàn)頁面刪除后，資源還常駐于項目中成為釘子戶.
解決方案 示例結(jié)構(gòu)├──src │ ├──view //頁面 │ ├──carts //購物車頁面 │ ├──component //該頁面專用組件 │ ├──model.js //該頁面的數(shù)據(jù)層[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 //該組件的數(shù)據(jù)層[redux和vuex文件的細分] │ ├──index.js //該組件的布局文件 │ ├──service.js //該組件用到的api │ ├──index.scss //該組件用到的scss │ ├── App.vue // 入口頁面 │ ├── main.js // 入口 加載組件 初始化等 │ ├── assets // 主題 字體等靜態(tài)資源【永不刪除】 ├── index.html // html模板 └── package.json
這里分為三個級別共用級別,頁面級別,組件級別
共用級別這個好理解,就是項目經(jīng)常會共用到的資源，基本上一旦定下,為了項目穩(wěn)定就永不刪除了。
頁面級別│ ├──view //頁面 │ ├──carts //購物車頁面 │ ├──component //該頁面專用組件 │ ├──model.js //該頁面的數(shù)據(jù)層[redux和vuex文件的細分] │ ├──index.js //該頁面的布局文件 │ ├──service.js //該頁面用到的api │ ├──index.scss //該頁面用到的scss
可見圍繞該頁面各種職能的文件又再建一遍,且都為該頁面專用,連組件也是頁面專用級別的。
組件級別│ ├──component //共用組件 │ ├──map //地圖組件 │ ├──assets //該組件專用圖片或icon │ ├──model.js //該組件的數(shù)據(jù)層[redux和vuex文件的細分] │ ├──index.js //該組件的布局文件 │ ├──service.js //該組件用到的api │ ├──index.scss //該組件用到的scss
可見圍繞該組件各種職能的文件又再建一遍,且都為該組件專用。
總結(jié)在按職能劃分目錄的基礎(chǔ)上,再細分到按頁面和組件劃分目錄。如此這般,組件想刪即刪想改即改，副作用更可控!!再也不怕留下釘子戶資源啦！
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/114392.html
摘要：但是前端目錄結(jié)構(gòu)筆者認為應該對于頁面和組件繼續(xù)細分。舉個列子當項目較大時目錄里存在將會非常之多。所以，后端這種按職能劃分的目錄結(jié)構(gòu)雖好，但用于前端也不是最合適的方案。 為什么需要前端專屬的項目結(jié)構(gòu) 這里說到目錄結(jié)構(gòu)，想必不少程序員會想到按職能分目錄吧！以下所提的目錄結(jié)構(gòu)為單頁面目錄結(jié)構(gòu) 以下面這種為例[按職能劃分] ├──src │ ├──view ...
摘要：但是前端目錄結(jié)構(gòu)筆者認為應該對于頁面和組件繼續(xù)細分。舉個列子當項目較大時目錄里存在將會非常之多。所以，后端這種按職能劃分的目錄結(jié)構(gòu)雖好，但用于前端也不是最合適的方案。 為什么需要前端專屬的項目結(jié)構(gòu) 這里說到目錄結(jié)構(gòu)，想必不少程序員會想到按職能分目錄吧！以下所提的目錄結(jié)構(gòu)為單頁面目錄結(jié)構(gòu) 以下面這種為例[按職能劃分] ├──src │ ├──view ...
摘要：本文最早為雙十一而作，原標題雙大前端工程師讀書清單，以付費的形式發(fā)布在上。發(fā)布完本次預告后，捕捉到了一個友善的吐槽讀書清單也要收費。這本書便從的異步編程講起，幫助我們設(shè)計快速響應的網(wǎng)絡(luò)應用，而非簡單的頁面。 本文最早為雙十一而作，原標題雙 11 大前端工程師讀書清單，以付費的形式發(fā)布在 GitChat 上。發(fā)布之后在讀者圈群聊中和讀者進行了深入的交流，現(xiàn)免費分享到這里，不足之處歡迎指教...
摘要：本文最早為雙十一而作，原標題雙大前端工程師讀書清單，以付費的形式發(fā)布在上。發(fā)布完本次預告后，捕捉到了一個友善的吐槽讀書清單也要收費。這本書便從的異步編程講起，幫助我們設(shè)計快速響應的網(wǎng)絡(luò)應用，而非簡單的頁面。 本文最早為雙十一而作，原標題雙 11 大前端工程師讀書清單，以付費的形式發(fā)布在 GitChat 上。發(fā)布之后在讀者圈群聊中和讀者進行了深入的交流，現(xiàn)免費分享到這里，不足之處歡迎指教...
閱讀 1619·2021-11-11 10:59
閱讀 2624·2021-09-04 16:40
閱讀 3650·2021-09-04 16:40
閱讀 2979·2021-07-30 15:30
閱讀 1615·2021-07-26 22:03
閱讀 3164·2019-08-30 13:20
閱讀 2225·2019-08-29 18:31
閱讀 439·2019-08-29 12:21
