Стек: 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.
В терминах MVP каждую цепочку действий в проекте можно описать следующей цепочкой:
V --> P --> M --> P --> V
То есть, цепочка начинается, когда происходит событие, привязанное к какому-то визуальному элементу на экране.
Базовый класс для работы с API проекта WEB-ларёк. Конструктор класса принимает такие аргументы:
- Базовый URL
baseUrl: string. - Объект настроек типа
RequestInit.
Класс имеет такие методы:
getиpostдля работы с получением и отправкой запроса соответственно.handleResponseдля обработки пришедшего ответа и обработки ошибок запроса.
Реализует паттерн «Наблюдатель» и позволяет подписываться на события и уведомлять подписчиков о наступлении события.
Класс имеет методы on , off , emit — для подписки на событие, отписки от события и уведомления подписчиков о наступлении события соответственно.
Дополнительно реализованы методы onAll и offAll — для подписки на все события и сброса всех подписчиков.
Интересным дополнением является метод trigger , генерирующий заданное событие с заданными аргументами. Это позволяет передавать его в качестве обработчика события в другие классы. Эти классы будут генерировать события, не будучи при этом напрямую зависимыми от класса EventEmitter.
Абстрактный класс Component содержит в себе базовое поле и метод для работы с компонентами отображения. Конструктор класса принимает в качестве аргумента контейнер типа HTMLElement и сохраняет его в поле container. Метод render() возвращает контейнер, сохраненный в поле container.
Класс Product хранит данные товара карточки. Реализует интерфейс IProduct, который содержит в себе основные поля с информацией, приходящие с Api. Экземпляры класса хранят в себе информацию о каждом товаре.
Конструктор класса принимает в качестве аргумента объект, реализующий интерфейс IProduct, и объект брокера событий IEvent. Конструктор реализует соответствующие поля класса.
Геттер productInfo() возвращает объект, реализующий интерфейс IProduct, который содержит в себе информацию о карточке товара.
Экземпляр класса выступает хранилищем экземпляров объектов Product, реализует интерфейс IList.
Конструктор класса принимает в качестве аргумента массив объектов интерфейса IProduct, которые приходят с API, экземпляр объекта брокера событий интерфейса IEvent, а также класс Product. Поле list содержит в себе массив экземпляров объектов класса Product.
Сеттер product() принимает в качестве аргумента экземпляр класса Product, и сохраняет в массив list.
Геттер listItems() возвращает массив экземпляров Product[].
Класс представляет собой хранилище товаров, добавленных в корзину пользователем. Реализует интерфейс IBasketData. Содержит в себе поля basket, который хранит массив объектов интерфейса IProduct. Поле total хранит в себе сумму всех товаров, лежащих в поле basket.
Конструктор принимает в качестве аргумента экземпляр брокера событий IEvent.
Сеттер basketItem() добавляет объект товара в корзину, меняет итоговую сумму и инициирует событие basket:changed.
Геттер basketInfo() возвращает объект интерфейса IBasketData.
Метод removeItem() принимает аргументом индекс элемента массива basket, который нужно удалить, после удаления элемента инициируется событие basket:changed.
Метод removeAll() очищает все поля, инициирует событие basket:changed.
Класс является хранилищем информации заказчика, реализует интерфейс IPerson.
Конструктор класса принимает аргументом экземпляр брокера событий IEvent.
Поля email, phone, address, payment хранят в себе строки с информацией о электронном адресе, телефоне, адресе доставки и способе оплаты заказчика соответственно. Поле fieldsErrors типа FormError хранит в себе объект с ошибками валидации полей с информацией заказчика, если ошибок валидации нет, то объект пустой.
Метод validateAddressFields() проверяет валидацию полей address и payment, инициирует событие form-error:changed.
Метод validateContactsFields() проверяет валидацию полей email и phone, инициирует событие form-error:changed.
Метод clearAllFields() очищает все поля объекта Person.
Сеттеры emailAddress, telephoneNumber, addressDelivery, billing сохраняют в соответствующие поля информацию о заказчике.
Геттер buyerInfo() возвращает объект интерфейса IPerson с информацией о пользователе.
Классы Page, Card, BasketModal, BasketList, Form, Success, Order и Modal наследуют абстрактный класс Component.
Является классом для работы страницы во время открытого модального окна и заполнением счётчика товаров.
Конструктор принимает на вход элемент DOM контейнера страницы, а также элемент DOM с счётчиком товаров в корзине.
Поле класса catalog хранит в себе массив DOM-элементов с карточками товара.
Сеттер contentData сохраняет карточку товара в массив.
Сеттер installLock устанавливает и удаляет блокировку прокрутки при открытом модальном окне.
Сеттер itemsCount устанавливает счётчик товаров в корзине на то число, которое ему передали.
Геттер catalogData() возвращает массив DOM-элементов с карточками товаров из поля класса.
Является класом отображения карточки товара на главной странице.
Конструктор принимает на вход шаблон карточки container, экземпляр брокера событий IEvents, и метод интерфейса IActions, который выполняется при клике на карточку.
Поля category, title, image, price хранят в себе DOM-элементы карточки с категорией, заголовком, картинкой и ценой.
Метод fillCardFields() принимает объект интерфейса IProduct и за счёт его данных заполняет поля карточки, кроме категории.
Метод setCategory() заполняет элемент с категорией и устанавливает конкретный класс элементу в зависимости от его категории.
Наследует класс Card, является компонентом отображения превью при клике на карточку.
Конструктор принимает на вход элемент container с превью модального окна и экземпляр брокера событий IEvent. Устанавливает слушатель события при клике на кнопку "В корзину", которое инициирует событие preview:add-to-cart.
Поле description хранит элемент с описанием карточки. Поле cardButton хранит в себе элемент с кнопкой со слушателем.
Метод fillDescription заполняет элемент description текстовыми данными.
Метод fillPreview заполняет все элементы превью информацией о товаре.
Является компонентом отображения корзины товаров.
Конструктор принимает на вход шаблон корзины container, экхемпляр брокера событий IEvents. Устанавливает слушатель на кнопку "Оформить", которое инициирует событие order:make.
Поле content хранит в себе список элементов с товарами. Поле basketButton хранит в себе элемент с кнопкой оформления заказа. поле basketPrice хранит в себе элемент, отображающий стоимость товаров.
Сеттер totalPrice устанавливает сумму заказа в элементе.
Сеттер contentList устанавливает список товаров в поле content.
Методы setActiveBasketButton() и setDisabledBasketButton() делают активной и неактивной кнопку оформления заказа соответственно.
Является компонентом отображения конкретных товаров, добавленных в корзину.
Конструктор принимает на вход элемент контейнера container, где находится список товаров, добавленных в корзину, шаблон template строчки товара в корзине, экземпляр брокера событий IEvents.
Метод makeList() формирует список товаров и сохраняет в контейнере. Принимает на вход массив IProduct[] данных с товарами в корзине.
Является компонентом отображения ошибок при оформлении заказа.
Конструктор принимает на вход элемент с формой оформления способа оплаты и адреса, и элемент с формой электронной почты и телефона container и contacts соответственно.
Поле addressErrors хранит элемент для отображения ошибок в элементе с формой способа оплаты и адреса. Поле contactsErrors хранит элемент для отображения ошибок в элементе с формой заполнения телефона и электронного адреса.
Сеттер textErrorAddress устанавливает текст ошибки в addressErrors.
Сеттер textErrorContacts устанавливает текст ошибки в contactsErrors.
Метод clearErrors() очищает поля данного класса.
Является компонентом отображения успешного выполнения заказа.
Конструктор принимает на вход container - шаблон успешного оформления заказа.
Поле totalSpentDescription содержит в себе элемент с текстом суммы успешно оформленного заказа.
Сеттер spentTotal устанавливает текст в элементе totalSpentDescription с суммой потраченной валюты.
Является компонентом отображения всех модальных окон: корзины, превью, оформления заказа и успешного оформления заказа. Реализуется это за счёт отображения того, что содержится в поле content.
Конструктор принимает контейнер с модальным окном container и экземпляр брокера событий IEvents. Устанавливает слушатели событий клика на кнопку с крестиком и на поле вокруг модального окна, которые закрывают само модальное окно.
Поле content является ключевым для всех окон: оно содержит в себе элементы, которые будут отображаться, если модальное окно открыто. Оно может хранить и отображать элементы корзины, оформления заказа, успешного оформления заказа и превью.
Поле closeButton хранит элемент кнопки закрытия модального окна.
Сеттер contentData устанавливает текущий контент, который нужно отобразить в модальном окне и сохраняет этот контент в поле content.
Метод open() и close() открывают и закрывают модальное окно. Последний метод инициирует событие modal:close.
Является компонентом отображения формы оформления заказа.
Конструктор принимает на вход элемент с формой выбора способа оплаты и полем ввода адреса container, элемент с формой ввода телефона и Email-адреса contacts, экземпляр брокера событий IEvents. Конструктор инициализирует поля и устанавливает слушатели событий на кнопки и поля ввода, кнопки выбора способа оплаты инициируют событие order-button:choose-method, поле ввода адреса инициируют событие address-input:changed, поля с вводом телефона и Email-адреса инициируют событие contacts-input:changed. Кнопка "Далее" инициирует событие order-button:next, которое открывает следующий шаг оформления заказа. Кнопка "Оформить" инициирует событие complete:order.
Поля cardButton и cashButton содержат в себе элементы кнопки с выбором способа оплаты.
Поля addressInput, emailInput и telephoneInput содержат в себе элементы ввода для адреса, почты и телефона.
Поля buttonNext и submitOrderButton содержат в себе элементы кнопки "Далее" и "Оформить" соответственно.
Сеттер activePaymentButton устанавливает нажатую кнопку со способом оплаты активной.
Методы setActiveNextButton, setDisableNextButton, setActiveSubmitOrderButton и setDisableSubmitOrderButton делают активной и неактивной кнопки "Далее" и "Оформить" соответственно.
Геттеры renderOrder и renderContacts возвращают элементы с формой заполнения способа оплаты и ввода адреса и элементы с формой ввода телефона и почты соответственно.