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

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

Answer 1

您的示例显示了两个流行的项目结构,按类型或模块组织文件.我更喜欢后者(代码分成模块),我看到它被用于javascript前端框架.这件事情的角度风格指南(角度最佳实践很好的参考)是指作为由特征文件夹.

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