Как правильно построить модульную структуру проекта?

Привет. Сейчас делаю проект на js, вёрстка по БЭМ и потому уже два дня в абсолютном ступоре.

Проблема именно с модулями js. По документации БЭМ я понял, что мы должны описывать поведение блока/элемента непосредственно внутри папки сущности вместе с её CSS. Но если js модуль не имеет прямого отношения к конкретной БЭМ сущности? Например, есть проект с игрой 'монополия'. Кнопка 'Play' парсит из меню информацию о игроках (сколько пользователь выбрал игроков, какие у них фигурки и тд) и записывает их в объект. Сильное желание код с объектом (и методы для работы с ним) определить в отдельный модуль, так как в дальнейшем этот объект много где можно будет использовать. Но куда его кидать? В глобальную папку рядом с index.js? А если такого кода будет много? Глобальная папка ведь просто засорится.

Приму любую помощь. Если помимо объяснений скинете ссылки на статьи или даже на свой (желательно несложный) проект с модульной структурой, буду очень благодарен
  • Вопрос задан
  • 329 просмотров
Решения вопроса 1
@AntowaKartowa
Не оч понял что там с БЕМом.

Кнопка Плей ничего не парсит. Есть папка компонент. В папке компонент есть папка Кнопка. В ней код компоненты и стилей для Кнопки. Кнопка может принимать разные конфигурационные параметры типа текста, возможно иконки, цвета, формы, размера... Короче все вариации кнопок которые вам нужно реализовать. И кнопка принимает как один из параметр функцию обработки клика которую вызывает при клике и которой передает объект события. Может что-то еще. Вам виднее.

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

В компоненте вашей страницы вы импортируете все необходимые компоненты в том числе Кнопку, объявляет методы которые делают эту страниц живой. Один из методов обработчик клика кнопки. Передаете компоненте Кнопка необходимые параметры включая title="Play" и функцию обработки клика.

Если есть какие-то сервисы которые много где используются или хелпер функции то их можно разместить например в папке common/services или common/helpers.

Ой я писал как если бы это был проект на реакте, только сейчас заметил что вопрос по ноде. Но современный бэкэнд не компилирует хтмль а только отдает по определенным эндпоинтам соответствующие данные в виде json. А разметка полностью на стороне фронтэнда.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы