javascript - Web 元素的文件夹/目录结构 - 最佳实践

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 文件)、 View (.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 style guide的东西( Angular 最佳实践的一个很好的引用)指的是 folders by feature .

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