Web項目的文件夾/目錄結構 - 最佳實踐

我正在處理不同的Web項目，我想知道是否有關於項目/文件夾結構的任何經驗法則？Web項目的文件夾/目錄結構 - 最佳實踐

我的許多應用程序構建在每個文件類型都有自己的目錄的結構中。例如：

└─┬root 
    | 
    ├─┬node_modules 
    | └ // node_modules (npm libraries) 
    | 
    └─┬www 
    | 
    ├─┬Libs // Js libraries 
    | | 
    | ├─┬Angular 
    | | └ … (.js files) 
    | | 
    | └─┬Bootstrap 
    | └ … (.js files) 
    | 
    ├─┬JavaScript // my Js files 
    | | 
    | ├─┬Services 
    | | └ … // my services (.js files) 
    | | 
    | ├─┬Controllers 
    | | └ … // my controllers (.js files) 
    | | 
    | ├─┬Directives 
    | | └ … // my directives (.js files) 
    | | 
    | └app.js // js entry point 
    | 
    ├─┬StyleSheets 
    | | 
    | ├─┬Less 
    | | └ … // my styles (.less files) 
    | | 
    | └─┬Css 
    | └ … // my styles (.css files) 
    | 
    ├─┬Views 
    | | 
    | ├─┬Pages 
    | | └ … // pages layout (.html files) 
    | | 
    | └─┬DirectivesTemplates 
    | └ // templates layout (.html files) 
    | 
    ├─┬Assets 
    | | 
    | ├─┬Fonts 
    | | └ … // app fonts (.ttf/ .woff files) 
    | | 
    | └─┬Images 
    | └ // app images (.jpg/ .png files) 
    | 
    ├─┬Data 
    | | 
    | └ // app info (.json files) 
    | 
    └index.html // web site entry point

但是最近我看到的幾個項目，其中每個模塊有它自己的文件夾與它的代碼（.js文件），查看（.html文件），風格（的CSS/.LESS文件）和數據（以.json文件，圖片，字體等）例如：

└─┬root 
    | 
    ├─┬node_modules 
    | └ // node_modules (npm libraries) 
    | 
    └─┬www 
    | 
    ├─┬Libs // Js libraries 
    | | 
    | ├─┬Angular 
    | | └ … (.js files) 
    | | 
    | └─┬Bootstrap 
    | └ … (.js files) 
    | 
    ├─┬Modules 
    | | 
    | ├─┬moduleA 
    | | | 
    | | ├moduleA.js //modules controller 
    | | | 
    | | ├moduleA.html //modules view 
    | | | 
    | | ├moduleA.less //modules style 
    | | | 
    | | └moduleA.json //modules data 
    | | 
    | ├─┬moduleB 
    | | | 
    | | ├moduleB.js 
    | | | 
    | | ├moduleB.html 
    | | | 
    | | ├moduleB.less 
    | | | 
    | | ├moduleB.json 
    | | | 
    | | └moduleB-icon.png 
    | | 
    | └─┬moduleC 
    | | 
    | ├moduleC.js 
    | | 
    | ├moduleC.html 
    | | 
    | ├moduleC.less 
    | | 
    | ├moduleC.json 
    | | 
    | └moduleC-font.woff 
    | 
    └index.html // web site entry point

是否有關於項目結構的任何最佳做法？

來源

2016-03-04 Gil Epshtain

第一個結構看起來像一個開發人員或一個非常小的團隊。其次是與更多的開發人員進行更大的項目。每個模塊都可以拆下來更換，更新或更換，而不需要接觸其他模塊。 – Tigger

在java中，Maven是一個事實標準。它不允許在文件夾結構中有廣泛的創造力。你在用java嗎？ –

我主要工作在客戶端應用程序，用JavaScript開發，有很多種類的框架，例如：angular，ember，jquery，ionic，webpack，grunt等等。（在不同的項目上） –

您的示例顯示了兩個流行的項目結構，按類型或模塊組織文件。我更喜歡後者（代碼分爲模塊），我發現它被用於JavaScript前端框架。這是Angular style guide（角度最佳實踐的一個很好的參考）是指folders by feature。

我參考Angular風格指南，因爲您的示例顯示了Angular項目，但該概念可以轉換爲其他框架。代碼按功能組織，因此查找需要編輯的文件很容易。正如有人在評論中指出的那樣，隨着應用程序和團隊規模的擴大，這個項目結構可以很好地擴展。

來源

2016-03-04 22:52:55 allienx

Web項目的文件夾/目錄結構 - 最佳實踐

回答

相關問題