Стек: HTML, SCSS, TS, Webpack
Структура проекта:
- src/ — исходные файлы проекта
- src/components/ — папка с JS компонентами
- src/components/base/ — папка с базовым кодом
Важные файлы:
- index.html — HTML-файл главной страницы
- src/types/index.ts — файл с типами
- src/main.ts — точка входа приложения
- src/scss/styles.scss — корневой файл стилей
- src/utils/constants.ts — файл с константами
- src/utils/utils.ts — файл с утилитами
Для установки и запуска проекта необходимо выполнить команды
npm install
npm run start
или
yarn
yarn start
npm run build
или
yarn build
«Web-Larёk» — это интернет-магазин с товарами для веб-разработчиков, где пользователи могут просматривать товары, добавлять их в корзину и оформлять заказы. Сайт предоставляет удобный интерфейс с модальными окнами для просмотра деталей товаров, управления корзиной и выбора способа оплаты, обеспечивая полный цикл покупки с отправкой заказов на сервер.
Код приложения разделен на слои согласно парадигме MVP (Model-View-Presenter), которая обеспечивает четкое разделение ответственности между классами слоев Model и View. Каждый слой несет свой смысл и ответственность:
Model - слой данных, отвечает за хранение и изменение данных.
View - слой представления, отвечает за отображение данных на странице.
Presenter - презентер содержит основную логику приложения и отвечает за связь представления и данных.
Взаимодействие между классами обеспечивается использованием событийно-ориентированного подхода. Модели и Представления генерируют события при изменении данных или взаимодействии пользователя с приложением, а Презентер обрабатывает эти события используя методы как Моделей, так и Представлений.
Является базовым классом для всех компонентов интерфейса.
Класс является дженериком и принимает в переменной T тип данных, которые могут быть переданы в метод render для отображения.
Конструктор:
constructor(container: HTMLElement) - принимает ссылку на DOM элемент за отображение, которого он отвечает.
Поля класса:
container: HTMLElement - поле для хранения корневого DOM элемента компонента.
Методы класса:
render(data?: Partial<T>): HTMLElement - Главный метод класса. Он принимает данные, которые необходимо отобразить в интерфейсе, записывает эти данные в поля класса и возвращает ссылку на DOM-элемент. Предполагается, что в классах, которые будут наследоваться от Component будут реализованы сеттеры для полей с данными, которые будут вызываться в момент вызова render и записывать данные в необходимые DOM элементы.
setImage(element: HTMLImageElement, src: string, alt?: string): void - утилитарный метод для модификации DOM-элементов <img>
Содержит в себе базовую логику отправки запросов.
Конструктор:
constructor(baseUrl: string, options: RequestInit = {}) - В конструктор передается базовый адрес сервера и опциональный объект с заголовками запросов.
Поля класса:
baseUrl: string - базовый адрес сервера
options: RequestInit - объект с заголовками, которые будут использованы для запросов.
Методы:
get(uri: string): Promise<object> - выполняет GET запрос на переданный в параметрах ендпоинт и возвращает промис с объектом, которым ответил сервер
post(uri: string, data: object, method: ApiPostMethods = 'POST'): Promise<object> - принимает объект с данными, которые будут переданы в JSON в теле запроса, и отправляет эти данные на ендпоинт переданный как параметр при вызове метода. По умолчанию выполняется POST запрос, но метод запроса может быть переопределен заданием третьего параметра при вызове.
handleResponse(response: Response): Promise<object> - защищенный метод проверяющий ответ сервера на корректность и возвращающий объект с данными полученный от сервера или отклоненный промис, в случае некорректных данных.
Брокер событий реализует паттерн "Наблюдатель", позволяющий отправлять события и подписываться на события, происходящие в системе. Класс используется для связи слоя данных и представления.
Конструктор класса не принимает параметров.
Поля класса:
_events: Map<string | RegExp, Set<Function>>) - хранит коллекцию подписок на события. Ключи коллекции - названия событий или регулярное выражение, значения - коллекция функций обработчиков, которые будут вызваны при срабатывании события.
Методы класса:
on<T extends object>(event: EventName, callback: (data: T) => void): void - подписка на событие, принимает название события и функцию обработчик.
emit<T extends object>(event: string, data?: T): void - инициализация события. При вызове события в метод передается название события и объект с данными, который будет использован как аргумент для вызова обработчика.
trigger<T extends object>(event: string, context?: Partial<T>): (data: T) => void - возвращает функцию, при вызове которой инициализируется требуемое в параметрах событие с передачей в него данных из второго параметра.
interface IProduct { id: string; - номер title: string; - название image: string; - изображение category: string; - категория price: number | null; - цена description: string; - описание }
interface IBuyer { payment: TPayment; - метод оплаты email: string; - почта phone: string; - номер телефона address: string; - адресс }
Управление каталогом товаров магазина. Отвечает за хранение всех товаров, получение информации о товарах и управление выбранным товаром для детального просмотра.
Конструктор класса не принимает параметров.
Поля класса:
private products: IProduct[] - массив всех товаров.
private selectedProduct: IProduct | null - товар, выбранный для подробного отображения.
Методы класса:
setProducts(products: IProduct[]): void - сохранение массива товаров полученного в параметрах метода.
getProducts(): IProduct[] - получение массива товаров из модели.
getProductById(id: string): IProduct | undefined - получение одного товара по его id.
setSelectedProduct(product: IProduct): void - сохранение товара для подробного отображения.
getSelectedProduct(): IProduct | null - получение товара для подробного отображения.
Управление корзиной покупок. Отвечает за хранение товаров, добавленных пользователем, расчет общей стоимости, проверку наличия товаров и операции с корзиной.
Конструктор:
Конструктор класса не принимает параметров.
Поля класса:
private items: IProduct[] - хранит массив товаров, выбранных покупателем для покупки.
Методы класса:
getItems(): IProduct[] - получение массива товаров, которые находятся в корзине.
addItem(product: IProduct): void - добавление товара, который был получен в параметре в массив корзины.
removeItem(productId: string): void - удаление товара, полученного в параметре из массива корзины.
clear(): void - очистка корзины.
getTotalPrice(): number - получение стоимости всех товаров в корзине.
getItemsCount(): number - получение количества товаров в корзине.
isProductInCart(productId: string): boolean - проверка наличия товара в корзине по его id, полученному в параметр метода.
Управление данными покупателя. Отвечает за хранение и валидацию информации о покупателе, включая контактные данные и способ оплаты.
Конструктор класса не принимает параметров.
Поля класса:
payment: TPayment - способ оплаты. Может принимать значения 'cash' (наличными) или 'card' (картой).
email: string - электронная почта.
phone: string - телефон.
address: string - адрес доставки.
Методы класса:
setData() -сохранение данных в модели. Один общий метод или отдельные методы для каждого поля.
getData() - получение всех данных покупателя.
clear()- очистка данных покупателя.
validate() - валидация данных.
Класс использует композицию, чтобы выполнять запрос на сервер. Конструктор:
constructor(api: IApi) - принимает экземпляр объекта, реализующего интерфейс IApi (например, экземпляр класса Api), который будет использоваться для выполнения HTTP-запросов.
Поля класса:
api - поле для хранения экземпляра API, через который выполняются все запросы.
Методы класса:
getProducts() - делает get запрос на эндпоинт /product/ и возвращает массив товаров.
createOrder() - делает post запрос на эндпоинт /order/ и передаёт в него данные, полученные в параметрах метода