Web 项目的 folders/directories 结构 - 最佳实践

Question

我正在处理不同的 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/.更少的文件）和数据（.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

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

Answer 1

您的示例展示了两种流行的项目结构，按类型或按模块组织文件。我更喜欢后者（代码分成模块），我看到它被大量用于 javascript 前端框架。这是 Angular style guide (a good reference for angular best practices) refers to as folders by feature 的东西。

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

Web 项目的 folders/directories 结构 - 最佳实践

Web project's folders/directories structure - Best practices

html

javascript

css

project-structure