Структура папок/каталогов веб-проекта-рекомендации

Я работаю над различными веб-проектами, и мне было интересно, есть ли какое-либо эмпирическое правило относительно структуры проекта/ папок?

многие из моих приложений строить в структуре, где каждый тип файла имеет свой собственный каталог. Например:

└─┬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 file), view (.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

есть ли какая-либо передовая практика в отношении структуры проекта?

1 ответов


ваши примеры показывают две популярные структуры проекта, упорядочивают файлы по типу или по модулю. Я предпочитаю последний (код, разделенный на модули), и я вижу, что он часто используется для фреймворков javascript. Это что-то руководство по угловому стилю (хорошая ссылка для угловых лучших практик) относится к папки с помощью функции.

я ссылаюсь на руководство по угловому стилю, потому что ваши примеры показали угловые проекты, но концепцию можно перевести к другим рамкам. Код организован так легко найти файл, который вы хотите отредактировать. Как кто-то отметил в комментарии, эта структура проекта масштабируется, а приложение и команда растут в размерах.