Web项目的文件夹/目录结构 - 最佳实践

Question

我正在从事不同的网络项目，我想知道是否有关于项目/文件夹结构的经验法则？

我的许多应用程序都建立在每种文件类型都有自己的目录的结构上。例如：

└─┬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

关于项目结构，有什么最佳实践吗？

- Gil Epshtain

---

第一个结构看起来像是一个单独的开发人员或一个非常小的团队。第二个则适用于更多开发者参与的大型项目。每个模块可以被移除、替换、更新或改变，而不影响其他部分。 - Tigger

在Java中，Maven是事实上的标准。它不允许在文件夹结构方面有太多创意。你正在使用Java吗？ - Grim

我主要致力于客户端应用程序的开发，使用JavaScript编写，使用各种框架，如：Angular、Ember、jQuery、Ionic、Webpack、Grunt等（在不同的项目中）。 - Gil Epshtain

请参考以下页面：https://dev59.com/vGAf5IYBdhLWcg3w3lyl，了解如何最佳组织JavaScript库和CSS文件夹结构的实践方法。 - Mehrdad Shoja

Answer 1

你的例子展示了两种流行的项目结构，一种是按类型组织文件，另一种是按模块划分代码。我更喜欢后者（将代码分为模块），并且我看到它在JavaScript前端框架中被广泛使用。这是Angular风格指南（Angular最佳实践的好参考）所提到的以特性为主题的文件夹结构。

我提到Angular风格指南是因为你的例子展示了Angular项目，但是这个概念可以应用于其他框架。代码按照特性组织，使得查找需要编辑的文件变得容易。正如某人在评论中指出的那样，随着应用程序和团队的规模增长，这个项目结构可以很好地扩展。

- allienx

Answer 2

我已经确定了三种设计类型：

• 原子设计介绍了一种将UI（组件）视为深思熟虑的层次结构的方法。
• 按功能结构划分文件夹：结构化您的应用程序，以便您可以快速定位代码，一目了然地识别代码，保持最扁平的结构，并尽量保持DRY。
• "Rock-Hammer Structure example"：使用按类型划分的文件夹来构建您的应用程序（不推荐使用Angular样式指南）。

顺便说一句，在使用框架时，样式指南可以提供有关选择最方便的内容的重要输入。例如，Vue.js样式指南提供有关组件命名的规则（这也确定文件命名）。

- Constantin De La Roche