資訊專欄INFORMATION COLUMN
摘要：但是前端目錄結構筆者認為應該對于頁面和組件繼續細分。舉個列子當項目較大時目錄里存在將會非常之多。所以，后端這種按職能劃分的目錄結構雖好，但用于前端也不是最合適的方案。
為什么需要前端專屬的項目結構
這里說到目錄結構，想必不少程序員會想到按職能分目錄吧！以下所提的目錄結構為單頁面目錄結構
以下面這種為例[按職能劃分]
├──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
可見圍繞該組件各種職能的文件又再建一遍,且都為該組件專用。
總結在按職能劃分目錄的基礎上,再細分到按頁面和組件劃分目錄。如此這般,組件想刪即刪想改即改，副作用更可控!!再也不怕留下釘子戶資源啦！
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/54837.html
摘要：但是前端目錄結構筆者認為應該對于頁面和組件繼續細分。舉個列子當項目較大時目錄里存在將會非常之多。所以，后端這種按職能劃分的目錄結構雖好，但用于前端也不是最合適的方案。 為什么需要前端專屬的項目結構 這里說到目錄結構，想必不少程序員會想到按職能分目錄吧！以下所提的目錄結構為單頁面目錄結構 以下面這種為例[按職能劃分] ├──src │ ├──view ...
摘要：但是前端目錄結構筆者認為應該對于頁面和組件繼續細分。舉個列子當項目較大時目錄里存在將會非常之多。所以，后端這種按職能劃分的目錄結構雖好，但用于前端也不是最合適的方案。 為什么需要前端專屬的項目結構 這里說到目錄結構，想必不少程序員會想到按職能分目錄吧！以下所提的目錄結構為單頁面目錄結構 以下面這種為例[按職能劃分] ├──src │ ├──view ...
摘要：本文最早為雙十一而作，原標題雙大前端工程師讀書清單，以付費的形式發布在上。發布完本次預告后，捕捉到了一個友善的吐槽讀書清單也要收費。這本書便從的異步編程講起，幫助我們設計快速響應的網絡應用，而非簡單的頁面。 本文最早為雙十一而作，原標題雙 11 大前端工程師讀書清單，以付費的形式發布在 GitChat 上。發布之后在讀者圈群聊中和讀者進行了深入的交流，現免費分享到這里，不足之處歡迎指教...
摘要：本文最早為雙十一而作，原標題雙大前端工程師讀書清單，以付費的形式發布在上。發布完本次預告后，捕捉到了一個友善的吐槽讀書清單也要收費。這本書便從的異步編程講起，幫助我們設計快速響應的網絡應用，而非簡單的頁面。 本文最早為雙十一而作，原標題雙 11 大前端工程師讀書清單，以付費的形式發布在 GitChat 上。發布之后在讀者圈群聊中和讀者進行了深入的交流，現免費分享到這里，不足之處歡迎指教...
閱讀 2914·2021-11-15 18:02
閱讀 3806·2021-10-14 09:43
閱讀 3744·2021-09-08 10:41
閱讀 2526·2019-08-30 15:53
閱讀 1808·2019-08-30 14:14
閱讀 1950·2019-08-29 16:12
閱讀 3147·2019-08-29 14:03
閱讀 1283·2019-08-29 13:46
