javascript - Web project's foldersdirectories structure - Best practices - Stack Overflow

admin管理员组

文章数量:1208153

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

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?

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

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
• html
• css
• project-structure

Share Improve this question Follow edited Jun 14, 2017 at 14:52 Gil Epshtain asked Mar 4, 2016 at 22:09 Gil EpshtainGil Epshtain 9,8011010 gold badges7373 silver badges9898 bronze badges 4

• The first structure looks like a single developer or a very small team. The second is for a larger project with more developers. Each module can be removed and replace, updated or changed without touching the rest. – Tigger Commented Mar 4, 2016 at 22:11
• In java, Maven is a de-facto standard. It does not allow a wide creativity in folder-structures. Are you using java? – Grim Commented Mar 4, 2016 at 22:19
• I'm working mainly on client side apps, developed in javascript, with a large variety of frameworks like: angular, ember, jquery, ionic, webpack, grunt etc.. (on different projects) – Gil Epshtain Commented Mar 4, 2016 at 22:27
• use this page: http://stackoverflow.com/questions/24199004/best-practice-to-organize-javascript-library-css-folder-structure – Mehrdad Shoja Commented May 19, 2016 at 5:14

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 10

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.

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.

I have identified three type of design:

• Atomic design introduces a methodology for thinking of our UIs (components) as thoughtful hierarchies.
• Folders-by-Feature Structure: structure your app such that you can Locate your code quickly, Identify the code at a glance, keep the Flattest structure you can, and Try to stay DRY.
• The "Rock-Hammer Structure example": structure your app using folders-by-type (not recommanded by the Angular style guide).

By the way, when using a framework, the style guidelines can provides great inputs to choose what is the most convenient for you. For example the Vue.js style guidelines provide rules about components naming (which also determine files naming).

本文标签： javascriptWeb project39s foldersdirectories structureBest practicesStack Overflow