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

GitHub Page: https://ladown.github.io/web-larek-frontend/

Стек: 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 dev

или

yarn
yarn dev

или

pnpm install
pnpm dev

Сборка

npm run build

или

yarn build

или

pnpm build

Архитектура приложения

Код приложения разделен на слои:

• слой данных, отвечает за хранение и изменение данных
• слой представления, отвечает за отображение данных на странице,
• презентер, отвечает за связь представления и данных.

Базовый код

Класс Api

Содержит в себе базову логику для отправки запросов. К конструкторе принимает baseUrl: string и options: RequestInit = {}, которые формирует базу для запроса. В классе имплементированы следующие методы:

• protected async handleResponse(response: Response): Promise<object> - служит для обработки запроса с сервера, он возвращает либо .json ответ от сервера, либо ошибку;
• async get(uri: string), который принимает uri запроса и делает GET запрос по итоговому url;
• async post(uri: string, data: object, method: ApiPostMethods = 'POST'), который принимает endpoint, объект с данными data, а также метод запроса, который по умолчанию равен POST, но может быть одним из следующих значений 'POST' | 'PUT' | 'DELETE'. Метод делает запрос по итоговому url и передает полученный ранее объект data.

Класс View

Абстрактный класс, который содержит в себе базовую логику для работы с html элементами. Имеет два generic типа T, предназначенный для метода render, чтобы обрабатывать определенные данные и K, предназначенный для контроля над возвращаемом типом элемента метода render. Конструктор принимает container: HTMLElement. В классе имплементированы следующие методы:

• protected setText(element: HTMLElement, value: unknown) - устанавливает значение value переданному element;
• protected setHidden(element: HTMLElement) - скрывает переданный element при помощи display: none;;
• protected setVisible(element: HTMLElement) - показывает переданный element при помощи удаления стиля display;
• protected setImage(element: HTMLImageElement, src: string, alt?: string) - устанавливает url для переданной картинки, а также может установить alt для картинки, если этот параметр был передан;
• protected setInnerHTML(element: HTMLElement, value: string) - устанавливает значение value для свойства innerHTML для переданного элемента. Перед установки значению оно обрабатывается функцией sanitizeHTML, для исключения XSS атак;
• toggleClass(element: HTMLElement, className: string, force?: boolean) - способен тоглить переданный класс className у элемента element, также возможно задавать состояние самостоятельно при помощи force ;
• setDisabled(element: HTMLElement, state: boolean) - тоглит атрибут disabled для переданного element согласно параметру state;
• render(data?: Partial<T>): K - параметр data имеет generic тип T, который был обозначен для класса View, вызывает аксессоры класса и возвращает generic тип K.

Класс EventEmitter

Содержит в себе базовую логику для работы с событиями, то есть выполняет роль брокера событий. В классе инициализируется Map объект со всеми событиями и их подписчиками. В классе имплементированы следующие методы:

• on<T extends object>(eventName: TEventName, callback: (event: T) => void) - устанавливает обработчик callback на событие eventName. Типизирует параметр обработчика при помощи generic типа T;
• off(eventName: TEventName, callback: TSubscriber) - удаляет обработчик callback с события eventName;
• emit<T extends object>(eventName: string, data?: T) - инициализация события eventName и передача необходимых данных data. Типизирует параметр данных data при помощи generic типа T;
• onAll(callback: (event: TEmitterEvent) => void) - позволяет прослушивать все события и вызывать необходимый callback;
• offAll() - позволяет сбросить все события;
• trigger<T extends object>(eventName: string, context?: Partial<T>) - позволяет сделать коллбек триггер, генерирующий событие eventName при вызове и передать нужный контекст context. Типизирует параметр контекста context при помощи generic типа T.

Класс Model

Содержит в себе базовую логику для определение моделей, чтобы можно было их отличить от простых объектов. Имеет generic тип T. На вход конструктор принимает параметр данных модели data: Partial<T>, а также события нашего приложения events: IEventEmitter; В классе имплементированы следующие методы:

• emitChanges(event: string, payload?: object) - позволяет инициализация событие event и передать нужные данные payload.

Модели

Класс CardModel

Содержит в себе модель карточек магазина, который имеет тип ICardModel. В классе имплементированы следующие методы:

• get categoryModifier(): string - возвращает модификатор для категории карточки на основании параметра category;
• get formattedPrice(): string - возвращает отформатированную цену для отображения в карточке, с добавлением постфикса синапсов или же, если нет цены установление значения Бесценно.

Класс BasketModel

Содержит в себе модель корзины магазина, который имеет тип IBasketModel<string>. В классе имплементированы следующие методы:

• set count(value: number) - установка количества позиций в корзине;
• get count(): number - возвращает количество позиций в корзине;
• set items(value: string | string[]) - установка id элементов корзины;
• get items(): string[] - возвращает id элементов корзины;
• set total(value: number) - установка итоговой стоимости корзины;
• get total(): number - возвращает итоговую стоимость корзины;
• addCardToBasket(card: CardModel) - добавление элемента в корзину;
• removeCardFromBasket(card: CardModel) - удаление элемента из корзины;
• resetState() - метод позволяет полностью вернуть корзину к исходному состоянию.

Класс OrderModel

Содержит в себе модель заказа, который имеет тип IOrderModel. Класс предполагает хранение данных для каждого из шага формы по уникальному ключу. В классе имплементированы следующие методы:

• getStepKey(field: keyof IOrderFields): TOrderSteps | '' - получаем ключ шага, который заполняем;
• setFieldValue(field: keyof IOrderFields, value: string, target?: HTMLInputElement | HTMLButtonElement) - установка значение поля заказа и вызов метода валидации полей;
• getResetFields(): TOrderFields - возвращает начальное состояние полей заказа;
• validateFields(field: keyof IOrderFields, step: TOrderSteps, target: HTMLInputElement | HTMLButtonElement) - валидация полей заказа;
• getFields(): Partial<IOrderFields> - получаем поля заказа в "развернутом" формате, без ключей шагов заказа;
• resetState() - возвращаем начально состояние модели.

Класс CatalogModel

Содержит в себе модель каталога, который имеет тип ICatalogModel. В классе имплементированы следующие методы:

• setCards(data: TCard[]) - установка значений карточек каталога.

Представление

Класс CardView

Класс базовой карточки карточки, наследуемый от общего класса View, который будет использоваться для отображение в каталоге и модальном окне карточке. Имеет generic тип T, для обозначение возвращаемого элемента методом render класса View. При инициализации устанавливаем обработчик клика, если был переданн в конструктор, на кнопку, которая может быть как внутри карточки, так и являться самой карточке. В классе имплементированы следующие методы:

• set category(value: string) - установка категории карточки;
• get title(): string - получение заголовка карточки;
• set title(value: string) - установка заголовка карточки;
• set image(value: string) - установка картинки карточки;
• set price(value: string) - установка цены карточки;
• set categoryModifier(value: string) - установка модификатора для отображения категории.

Класс CardPreviewView

Класс, который наследуется от абстрактного класса CardView и реализует логику отображения карточек в модальном окне просмотра карточки. Данные для метода render имеют тип TCardPreviewView. В классе имплементированы следующие методы:

• set description(value: string) - установка описания карточки;
• set buttonState(value: boolean) - установка состояния кнопки карточки, если уже была добавлена в корзину;
• set buttonText(value: string) - установка текста для кнопки.

Класс CardBasketView

Класс, который наследуется от класса View и реализует логику отображения карточек в модальном окне корзины. Данные для метода render имеют тип TCardBasketView. При инициализации устанавливаем переданный обработчик в конструктор на кнопку удаления из корзины. В классе имплементированы следующие методы:

• set label(value: number) - установка лейбла карточки;
• set title(value: string) - установка заголовка карточки;
• set price(value: string) - установка цены карточки.

Класс BasketView

Класс представления корзины, наследуемый от общего класса View. Предназначен для установки обработчика события открытия модального окна корзины, а также открытие модального окна с данным заказа. Данные имеют следующий тип IBasketModel<HTMLElement>. В классе имплементированы следующие методы:

• set count(value: number) - установка счетчика корзины;
• set total(value: number) - установка итогового значения в корзине;
• set items(value: HTMLElement[]) - установка карточек корзины, если они переданы, в противном случае показываем сообщение о пустой корзине;
• toggleEmptyState(state: boolean) - переключение отображения сообщение о пустой корзине.

Класс OrderView

Класс заказа, наследуемый от общего класса View, который имеет тип <HTMLFormElement, HTMLFormElement>. При инициализации устанавливаем слушатели события на кнопки, для переключения методов оплаты, на поля ввода, чтобы заполнять модель заказа, а также на отправку формы каждого шага. Также слушаем событие order:reset-view для сброса состояния представления при отправки заказа. В классе имплементированы следующие методы:

• set errors(value: string) - устанавливаем текст ошибок;
• set valid(value: boolean) - устанавливаем валидное состояние для кнопки и невалидное состояние для текста ошибок;
• protected onFieldChange(target: HTMLInputElement | HTMLButtonElement, field: keyof IOrderFields, value: string) - генерируем события изменения поля заказа.

Класс CatalogView

Класс каталога, наследуемый от общего класса View, с типом ICatalogView. Предназначение для рендера карточек каталога. В классе имплементированы следующие методы:

• set content(data: HTMLElement | HTMLElement[]) - помещаем переданные карточки в разметку, если контента нет - показываем сообщение о том, что пока нет товаров.

Класс ModalView

Класс модального окна, наследуемый от общего класса View, который имеет имеет тип IModalView. Предназначен для отображения модального окна и смены контента в нем посредством передачи последнего в render функцию в поле content. В классе имплементированы следующие методы:

• set content(value: HTMLElement | string) - установка переданного контента;
• protected open() - открытие модального окна;
• protected close() - закрытие модального окна;
• render(data: IModalView): HTMLElement - рендер функция модального окна.

Класс LoaderView

Класс отображения состояния загрузки, наследуемый от общего класса View, который имеет тип ILoaderView. В классе имплементированы следующие методы:

• set text(value: string) - установка текста.

Класс NotifyView

Класс отображения уведомления пользователей, наследуемый от общего класса View, который имеет тип INotifyView. Предназначен для отображения сообщений, например, об ошибке или пустом состоянии. В классе имплементированы следующие методы:

• set text(value: string) - установка текста;
• set buttonsVisible(value: boolean) - скрываем или показываем кнопки;
• set buttonText(value: string) - установка текста кнопки.

Презентер

Файл index.ts

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

• cards:change - изменение списка карточек товаров;
• preview:change - открытие превью-модальное окно для карточки товара;
• basket:change - изменение списка товаров в корзине;
• basket:open - открытые модального окна корзины;
• order:open-step-details - открытые модального окна формы заказа со способом оплаты и доставки;
• order:open-step-order - открытые модального окна формы заказа с контактными данными;
• order:field-change - изменение поля заказа;
• order:errors-change - изменение ошибки валидации форм;
• order:submit - отправка формы заказа;
• order:${formName}-submit - срабатывает после валидного заполнения одного из шага заказа. Имеет следующие виды - order:details-submit и order:order-submit;
• order:reset-view - сброс состояние представления заказа;
• modal:open - открытие любого модального окна;
• modal:close - закрытие любого модального окна.

Общее

Класс WebLarekAPI

Класс представляет собой интерфейс для работы с запросами. В конструктор принимает следующие параметры - cdn: string, baseUrl: string, options?: RequestInit. В конструкторе через композицию инициализируем базовый класс Api для работы с запросами. В классе имплементированы следующие методы:

• async getProducts(): Promise<ICatalog> - метод позволяет отправить запрос с GET методом для получения списка продуктов;
• async getProduct(id: string): Promise<TCard> - метод позволяет отправить запрос с GET методом для получения конкретного продукта по переданному id;
• async postOrder(order: TOrderRequest): Promise<IOrderResult> - метод позволяет отправить запрос с POST методом для отправки заказа, который передан в качестве аргумента order.

Класс Page

Общий класс страницы, наследуемый от класса View, который имеет тип HTMLElement. Класс необходим для управлением каким-то глобальным состояние страницы, например, блокировка скрола страницы при открытии модального окна. В классе имплементированы следующие методы:

• set locked(value: boolean) - метод позволяет заблокировать прокрутку страницы.