Web项目的文件夹/目录结构-最佳做法 [英] Web project's folders/directories structure - Best practices

问题描述

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

I’m working on different web projects and I was wondering if there is any rule of thumb regarding the project/ folders structure?

我的许多应用都是在结构中构建的，每种文件类型都有其自己的目录.例如:

Many of my apps are build in the structure where each file type has it’s own directory. For example:

└─┬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文件)，图片，字体等)例如:

However lately I see a few projects, where each module have it’s own folder with it’s code (.js file), view (.html file), style (.css/.less files) and data (.json file, images, fonts etc) For example:

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

关于项目结构是否有最佳实践?

Are there any best practice regarding project structure?

推荐答案

您的示例显示了两个流行的项目结构，分别按类型或模块组织文件.我更喜欢后者(将代码分成模块)，并且看到它在javascript前端框架中被大量使用.这是角度样式指南(对于有角度的最佳做法)指的是文件夹功能.

Your examples show two popular project structures, organize files by type or by module. I prefer the latter (code separated into modules) and I see it being used a lot for javascript frontend frameworks. It's something the Angular style guide (a good reference for angular best practices) refers to as folders by feature.

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

I reference the Angular style guide because your examples showed Angular projects, but the concept can be translated to other frameworks. Code is organized by feature so it's easy the find the file you need to edit. As someone pointed out in a comment, this project structure scales well as the app and team grow in size.

这篇关于Web项目的文件夹/目录结构-最佳做法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！