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

【问题标题】：Web project's folders/directories structure - Best practicesWeb 项目的文件夹/目录结构 - 最佳实践
【发布时间】：2016-06-18 20:01:53
【问题描述】：

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

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

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

有没有关于项目结构的最佳实践？

【问题讨论】：

第一个结构看起来像一个开发人员或一个非常小的团队。第二个是针对具有更多开发人员的更大项目。每个模块都可以在不触及其余部分的情况下进行移除和替换、更新或更改。
在java中，Maven是一个事实上的标准。它不允许在文件夹结构中进行广泛的创造力。你在用java吗？
我主要在客户端应用程序上工作，用 javascript 开发，有各种各样的框架，如：angular、ember、jquery、ionic、webpack、grunt 等。（在不同的项目上）
使用此页面：http://stackoverflow.com/questions/24199004/best-practice-to-organize-javascript-library-css-folder-structure

标签： javascript html css project-structure

【解决方案1】：

您的示例展示了两种流行的项目结构，按类型或按模块组织文件。我更喜欢后者（代码分成模块），我看到它被大量用于 javascript 前端框架。 Angular style guide（角度最佳实践的一个很好的参考）将其称为 folders by feature。

我参考了 Angular 样式指南，因为您的示例展示了 Angular 项目，但该概念可以转换为其他框架。代码按功能组织，因此很容易找到您需要编辑的文件。正如有人在评论中指出的那样，这个项目结构可以随着应用程序和团队规模的扩大而很好地扩展。

【讨论】：