這篇文章帶給大家的內容是關於前端專案中目錄結構優化的方法總結，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
目錄結構優化
現在前端專案越來越變得像大型工程了，而且越來越複雜了，需要處理好組員之間的協作，也需要做好業務分塊、去耦合來降低維修成本，還要維持高效率開發。
工程目錄結構的最佳化是能達到這個目的的一種方式。一般而言，不是多頁面工程還是單一頁面應用，抑或二者都有，目錄結構都是以下兩種方式：
類型分組（依檔案類型、業務類型等進行分組）
模組分塊（依頁面模組、業務模組等分塊）
多重頁面工程
|-- src/ 源代码目录 |-- html/ html 文件目录 |-- page1.html page1 页面的 html 文件 |-- module1/ 子目录 |-- page2.html page2 页面的 html 文件 |-- ... |-- ... |-- js/ js 文件目录 |-- common/ 公共文件目录 |-- page1/ page1 页面的 js 目录 |-- module1/ 子目录 |-- page2/ page2 页面的 js 目录 |-- ... |-- ... |-- css/ css 文件目录 |-- common/ 公共文件目录 |-- page1/ page1 页面的 css 目录 |-- module1/ 子目录 |-- page2/ page2 页面的 css 目录 |-- ... |-- ... |-- less/ less 文件目录（内部结构跟上面类似） |-- images/ 图片文件目录（内部结构跟上面类似） |-- data/ api-mock 文件目录（内部结构跟上面类似） |-- ...
#單一頁面應用程式##|-- src/ 源代码目录
|-- components/ 组件文件目录（如 react）
|-- common/ 公共文件目录
|-- page1.js page1 页面的组件文件
|-- module1/ 子目录
|-- page2.js page2 页面的组件文件
|-- ...
|-- ...
|-- services/ service 文件目录
|-- service1.js page1 页面的 service
|-- module1/ 子目录
|-- service2.js page2 页面的 service
|-- ...
|-- ...
|-- models/ model 文件目录
|-- model1.js page1 页面的 model
|-- module1/ 子目录
|-- model2.js page2 页面的 model
|-- ...
|-- ...
|-- ...
|-- images/ 图片文件目录（内部结构跟上面类似）
|-- data/ api-mock 文件目录（内部结构跟上面类似）
|-- ...
這種方式的優點是能使文件分類、功能分類非常清晰，並且能夠在一定程度上約束組員的書寫方式（目錄結構），也清晰明了、簡單易懂。但這種方式有很明顯的缺點：
- 不能很簡單快速的知道某個頁面或某個功能塊有哪些檔案；
- 建立、更新、刪除頁面會變得很低效，因為需要到不同文件類別目錄去找文件；
- #開發效率不高，而且很容易疲勞，因為編輯一個頁面的時候需要在編輯器的文件導覽中展開各個文件，導覽就會非常長。
- 所以，對前端專案而言，多數情況下我不會使用這種目錄結構。
2. 模組分塊
這種方式是以頁面模組、業務模組或其他類型進行分塊。
多重頁面工程|-- src/ 源代码目录
|-- page1/ page1 页面的工作空间
|-- index.html html 入口文件
|-- index.js js 入口文件
|-- index.(css|less|scss) 样式入口文件
|-- html/ html 片段目录
|-- js/ js 文件目录
|-- (css|less|scss)/ 样式文件目录
|-- data/ 本地 json 数据模拟
|-- images/ 图片文件目录
|-- components/ 组件目录（如果基于 react, vue 等组件化框架）
|-- ...
|-- module1/ 子目录
|-- page2/ page2 页面的工作空间（内部结构跟 page1 类似）
|-- ...
|-- html/ 公共 html 片段
|-- less/ 公共 less 目录
|-- components/ 公共组件目录
|-- images/ 公共图片目录
|-- data/ 公共 api-mock 文件目录
|-- ...
#單一頁面應用程式##|-- src/ 源代码目录
|-- page1/ page1 页面的工作空间
|-- index.js 入口文件
|-- service.js
|-- model.js
|-- data/ 本地 json 数据模拟
|-- images/ 图片文件目录
|-- components/ 组件目录（如果基于 react, vue 等组件化框架）
|-- ...
|-- module1/ 子目录
|-- page2/ page2 页面的工作空间（内部结构跟 page1 类似）
|-- ...
|-- images/ 公共图片目录
|-- data/ 公共 api-mock 文件目录
|-- components/ 公共组件目录
|-- ...
這種方式避免了「類型分組」的問題，但也有一些不足：
- 工作空間下的目錄結構不是很容易定義好，對開發人員等級要求要高一些。
- 儘管有些不足，但可以配合建置工具消除，所以一般情況下我會選擇這種目錄結構。
|-- src/ 源代码目录
|-- page1/ page1 页面的工作空间
|-- index.html html 入口文件
|-- index.js js 入口文件
|-- index.(css|less|scss) 样式入口文件
|-- html/ html 片段目录
|-- js/ js 文件目录
|-- ajax/ 对 ajax 封装的目录
|-- util/ 工具类函数的目录
|-- pages/ spa 应用页面目录
|-- data/ 静态数据目录
|-- tpl/ 模板目录
|-- (event|view)/ 事件监听文件目录
|-- ...
|-- data/ 本地 json 数据模拟
|-- (css|less|scss)/ 样式文件目录
|-- images/ 图片文件目录
|-- components/ 组件目录（如果基于 react, vue 等组件化框架）
|-- ...
|-- ...
以上是前端專案中目錄結構優化的方法總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！
如何驗證您的HTML代碼？Apr 24, 2025 am 12:04 AMHTML代碼可以通過在線驗證器、集成工具和自動化流程來確保其清潔度。 1)使用W3CMarkupValidationService在線驗證HTML代碼。 2)在VisualStudioCode中安裝並配置HTMLHint擴展進行實時驗證。 3)利用HTMLTidy在構建流程中自動驗證和清理HTML文件。
HTML與CSS和JavaScript：比較Web技術Apr 23, 2025 am 12:05 AMHTML、CSS和JavaScript是構建現代網頁的核心技術：1.HTML定義網頁結構，2.CSS負責網頁外觀，3.JavaScript提供網頁動態和交互性，它們共同作用，打造出用戶體驗良好的網站。
HTML作為標記語言：其功能和目的Apr 22, 2025 am 12:02 AMHTML的功能是定義網頁的結構和內容，其目的在於提供一種標準化的方式來展示信息。 1）HTML通過標籤和屬性組織網頁的各個部分，如標題和段落。 2）它支持內容與表現分離，提升維護效率。 3）HTML具有可擴展性，允許自定義標籤增強SEO。
HTML，CSS和JavaScript的未來：網絡開發趨勢Apr 19, 2025 am 12:02 AMHTML的未來趨勢是語義化和Web組件，CSS的未來趨勢是CSS-in-JS和CSSHoudini，JavaScript的未來趨勢是WebAssembly和Serverless。 1.HTML的語義化提高可訪問性和SEO效果，Web組件提升開發效率但需注意瀏覽器兼容性。 2.CSS-in-JS增強樣式管理靈活性但可能增大文件體積，CSSHoudini允許直接操作CSS渲染。 3.WebAssembly優化瀏覽器應用性能但學習曲線陡，Serverless簡化開發但需優化冷啟動問題。
HTML：結構，CSS：樣式，JavaScript：行為Apr 18, 2025 am 12:09 AMHTML、CSS和JavaScript在Web開發中的作用分別是：1.HTML定義網頁結構，2.CSS控製網頁樣式，3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。
HTML的未來：網絡設計的發展和趨勢Apr 17, 2025 am 12:12 AMHTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。
HTML與CSS vs. JavaScript：比較概述Apr 16, 2025 am 12:04 AMHTML、CSS和JavaScript在網頁開發中的角色分別是：HTML負責內容結構，CSS負責樣式，JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容，確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式，使其美觀易讀。 3.JavaScript通過腳本控製網頁行為，實現動態和交互功能。
HTML：是編程語言還是其他？Apr 15, 2025 am 12:13 AMHTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增強WebevebDevelopment。
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
MantisBT
Mantis是一個易於部署的基於Web的缺陷追蹤工具，用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。
EditPlus 中文破解版
體積小，語法高亮，不支援程式碼提示功能
ZendStudio 13.5.1 Mac
強大的PHP整合開發環境
Safe Exam Browser
Safe Exam Browser是一個安全的瀏覽器環境，安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問，並防止學生使用未經授權的資源。
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
