Введение
Структура папок — это одна из первых проблем, которую вам нужно будет решить, когда вы начинаете новый веб-проект, ориентированный на клиента. Для облегчения сопровождения клиент-ориентированных веб-приложений крайне важно организовать папки таким образом, чтобы вам было легко ориентироваться в проекте. Поскольку проекты становятся все более и более сложными, это может помочь разработчику сориентироваться.
Параметры структуры папок
Есть много способов организовать структуру папок, но, на мой взгляд, есть два основных варианта:
1. По типам файлов
2. По логическим модулям
В небольших проектах/SPA вы можете использовать первый подход, так как он более удобен, и у вас не так много файлов в приложении.
В средних и крупных проектах/SPA второй вариант предпочтительнее ИМХО.
Как организовать папки по типам файлов?
Структура типов файлов очень проста. В этом варианте каждый тип файла получает свою собственную папку. Например, если вы используете AngularJS, вы поместите все контроллеры в папку контроллеров, все свои службы в папку служб и так далее. Как я уже писал, в небольшом проекте будет легко найти файлы, которые вы ищете, по их типам.
На следующем рисунке показано, как может выглядеть структура папок для примера AngularJS:
Как организовать папки по логическим модулям?
Чтобы организовать структуру папок по логическим модулям, сначала определите логические модули на стороне клиента. Примерами логических модулей могут быть поиск, корзина, альбом и так далее. Как только вы разделите свою клиентскую часть на логические модули, вы можете начать создавать структуру папок.
Чтобы объяснить, как вы создаете структуру папок, я снова воспользуюсь примером AngularJS. В папке приложения создайте папку с именем логического модуля. В каждой папке модуля создайте следующие папки:
- контроллеры
- директивы
- фильтры
- Сервисы
- взгляды
Если есть объекты общего назначения, которые относятся к более чем одному логическому модулю, создайте общую папку и поместите все эти компоненты в эту папку. В общей папке вы должны сохранить разделение, которое вы использовали в каждом логическом модуле. Все библиотеки, которые используются в приложении, должны храниться в папке app/libs или app/vendor. Мое предложение состоит в том, чтобы разделить их на папки с именем библиотеки.
На следующем рисунке показано, как может выглядеть предлагаемая структура папок:
Резюме
Вы можете применить любой метод для организации вашего клиентоориентированного веб-проекта, если вы чувствуете себя комфортно с ним, и все ваши товарищи по команде чувствуют то же самое. В этом посте я предложил два распространенных способа начать работу со структурой папок веб-проекта, ориентированной на клиента.
