Проектная работа "Веб-ларек"

Стек: HTML, SCSS, TS, Webpack

Структура проекта:

• src/ — исходные файлы проекта
• src/components/ — папка с JS компонентами
• src/components/base/ — папка с базовым кодом

Важные файлы:

• src/pages/index.html — HTML-файл главной страницы
• src/types/index.ts — файл с типами
• src/index.ts — точка входа приложения
• src/styles/styles.scss — корневой файл стилей
• src/utils/constants.ts — файл с константами
• src/utils/utils.ts — файл с утилитами

Установка и запуск

Для установки и запуска проекта необходимо выполнить команды

npm install
npm run start

или

yarn
yarn start

Сборка

npm run build

или

yarn build

Архитектура проекта

Проект построен на основе архитектурного паттерна MVP (Model-View-Presenter) событийно-ориентированной архитектуры. В этой архитектуре компоненты взаимодействуют друг с другом через события, что обеспечивает слабую связанность и гибкость системы.

Основные части архитектуры

• EventEmitter — базовый класс для работы с событиями
• AppState — глобальное состояние приложения
• Компоненты — независимые модули, взаимодействующие через события
• API — клиент для работы с серверным API

Ключевые события

Товары и каталог

• products:changed - обновление списка товаров
• card:select - выбор карточки товара
• preview:changed - обновление превью товара

Корзина

• basket:open - открытие корзины
• basket:changed - изменение состояния корзины
• product:toggle - переключение товара (добавление/удаление)
• product:add - добавление товара в корзину
• product:delete - удаление товара из корзины
• counter:changed - изменение счетчика товаров

Заказ

• order:open - открытие формы заказа
• order:submit - отправка формы заказа
• order:ready - заказ готов к отправке
• orderError:changed - изменение ошибок в форме заказа
• payment:change - изменение способа оплаты
• /^order\..*:change/ - изменение любого поля заказа

Контакты

• contact:open - открытие формы контактов
• contacts:submit - отправка формы контактов
• contacts:ready - форма контактов готова
• formError:changed - изменение ошибок в форме
• /^contacts\..*:change/ - изменение любого поля контактов
• contacts:error - обнаружение ошибки

Модальное окно

• modal:open - открытие модального окна
• modal:close - закрытие модального окна

Описание классов

Базовые классы

Класс EventEmitter

Базовый класс для работы с событиями. Методы

• on - подписка на событие
• emit - генерация события
• onAll - подписка на все события
• off - отписка от события
• offAll - отписка от всех событий

Класс AppState

Класс управления состоянием приложения. Поля

• catalog - список товаров
• basket - корзина
• order - данные заказа
• preview - превью товара

Методы

• setCatalog - установка каталога товаров
• handleBasketAction - обработка действий с корзиной
• setOrderForm - установка данных заказа
• setContactForm - установка контактных данных
• clearBasket - очистка корзины
• clearOrder - очистка заказа

Часть Model

Класс CatalogModel

Модель каталога продуктов.

Конструкток

Не принимает параматры. Инициализирует пустой список товаров.

Поля

• product - массив продуктов, который хранит данные каталога.

Методы

• getList - загружает список продуктов из API и обновляет поле products.
• getItem - возвращает данные конкретного продукта по Id.

Класс BasketModel

Модель корзины.

Конструкток

Создаёт пустую карзину с коллекцией, где ключ Id - товара и значение - объект товара.

Поля

• items - коллекция товаров в корзине.

Методы

• add - добавляет товар в корзину.
• remove - удаляет товара по Id из корзины.
• clear - очищает корзину.
• getTotal - возвращает общую стоимость товаров в корзине.

Класс OrderModel

Модель для работы с заказом.

Конструктор

Инициализирует пустые поля заказа.

Поля

• orderData - объект данных заказа.

Методы

• savePaymentMethod - сохраняет выбранный способ оплаты в заказ.
• saveDeliveryAddress - сохраняет адрес доставки.
• saveContact - сохраняет контактные данные.
• setItems - устанавливает список товаров для создания заказа.
• validateOrder - проверяет корректность данных заказа.
• sendOrder - отправляет заказ в API и возвращает созданный заказ.

Часть View

Класс ProductCardView

Компонент представления карточки товара.

Поля

• product - данные товара.

Методы

• render - создаёт разметку карточки товара.
• onClick - обрабатывает событие клика по карточке.

Класс IBasketView

Компонент представления корзин.

Поля

• items - список товаров в корзине.

Методы

• render - создаёт разметку корзины.
• onUpdate - обновляет содержимое корзины.
• onRemove - обрабатывает событие удаления товара из корзины.

Класс OrderFormView

Компонент представления формы заказа.

Методы

• render - создаёт разметку формы заказа.
• setPaymentMethod - устанавливает способ оплаты.
• setDeliveryAddress - устанавливает адрес доставки.
• setEmail - устанавливает адрес электронной почты.
• setPhone - устанавливает номер телефона.
• showErrors - отображает ошибки валидации формы.
• onSubmit - обрабатывает отправку формы.

Класс ModalView

Компонент модального окна.

Поля

• content - содержимое модального окна.

Методы

• render - создаёт разметку модального окна.
• open - открывает модальное окно.
• close - закрывает модальное окно.
• onClose - обрабатывает закрытие окна.

Класс MainPageView

Компонент представления главной страницы.

Поля

• catalog - каталог товаров.
• total - итоговая стоимость заказа.

Класс OrderSuccessView

Компонент сообщения об успешном создании заказа.

Поля

• total - итоговая стоимость заказа.