HTML Academy | Паттерны проектирования (2022) [unpacked]

Раздел 1

Введение в паттерны проектирования

Познакомимся с паттернами проектирования, разберёмся, зачем они нужны и на какие типы делятся.

– Что такое паттерны проектирования и зачем их нужно знать?
– Что будет на курсе?
– Процедурное, объектно-ориентированное и функциональное программирование
– Типы паттернов проектирования
– Тест по первому разделу

Раздел 2

Порождающие паттерны

В этом разделе рассмотрим порождающие паттерны проектирования

– Введение: что такое порождающие паттерны, для чего и когда они нужны.
‍
«Одиночка» (Singleton)
– Демо: счётчик посещений в проекте «Котокафе»
– Задание + решение: создание счётчика посещений страниц проекта «Фермерские продукты»

«Фабричный метод» (Factory method) — Фабричный метод (Factory method)
– Демо: выделение карточки в галерее «Котокафе»
– Задание + решение: вывод типов продуктов на главной странице проекта «Фермерские продукты»
‍
«Абстрактная фабрика» (Abstract Factory)
– Демо: изменение формата вывода имени редких котов в проекте «Котокафе»
– Задание + решение: создание шаблонов для карточек и заголовков в проекте «Фермерские продукты»
‍
«Строитель» (Builder)
– Демо: вывод промотекста на страницах проекта «Котокафе»
– Задание + решение: добавление промотекста на страницах проекта «Фермерские продукты»

«Пул объектов» (Object Pool)
– Демо: вывод времени посещения страницы в проекте «Котокафе»
– Задание + решение: вывод времени запуска приложения на главной странице проекта «Фермерские продукты»

«Прототип» (Prototype)
– Демо: создание прототипа с информацией о питомце в проекте «Котокафе»
– Задание + решение: создание прототипа для карточек в проекте «Фермерские продукты»
– Тест по второму разделу

Раздел 3

Структурные паттерны

В этом разделе рассмотрим структурные паттерны проектирования
‍
– Введение в структурные паттерны

«Адаптер» (Adapter)
‍– Демо: вывод данных в новом формате в сервисе по продаже автомобилей
– Задание + решение: вывод данных в новом формате в CRM-системе

«Мост» (Bridge)
– Демо: изменение цветовой темы сервиса по продаже автомобилей
– Задание + решение: механизм цветового оформления CRM-системы

‍«Декоратор» (Decorator)
– Демо: ускорение загрузки страниц в сервисе по продаже автомобилей
– Задание + решение: кэширование данных в CRM-системе

«Фасад» (Facade)
– Демо: инкапсуляция базовой конфигурации для новых запросов в сервисе по продаже автомобилей
– Задание + решение: получение задач из внешней CRM-систем

«Компоновщик» (Composite)
– Демо: выделение авто в списке с помощью чекбокса в сервисе по продаже автомобилей
– Задание + решение: выделение задач из списка в CRM-системе

«Прокси» (Proxy)
– Демо: ограничение времени доступа сотрудников к сервису по продаже автомобилей
– Задание + решение: блокировка получения данных в CRM-системе
– Тест по третьему разделу

Раздел 4

Поведенческие паттерны

В этом разделе рассмотрим поведенческие паттерны проектирования

«Цепочка обязанностей» (Chain of Responsibility)
‍– Демо: вывод в карточку товара информации о наличии книг в проекте «По полочкам»
– Задание + решение: вывод в карточку рецепта данных о количестве блюд в проекте «Ещё кусочек»

«Команда» (Command)
– Демо: получение данных с сервера с помощью AJAX-запроса в проекте «По полочкам»
– Задание + решение: инструмент для получения данных из нового источника в проекте «Ещё кусочек»

«Итератор» (Iterator)
– Демо: блокировка вывода данных в определённый промежуток времени в проекте «По полочкам»
– Задание + решение: блокировка вывода рецептов в определённое время в проекте «Ещё кусочек»

«Посредник» (Mediator)
– Демо: рамка для контейнера с книгами в проекте «По полочкам»
– Задание + решение: рамка для контейнера с рецептами в проекте «Ещё кусочек»

«Наблюдатель» (Observer)
– Демо: внешний скрипт для удаления блока с новинками в проекте «По полочкам»
– Задание + решение: внешний скрипт для удаления некорректных рецептов в проекте «Ещё кусочек»

«Состояние» (State)
‍– Демо: добавление тёмной темы в проекте «По полочкам»
– Задание + решение: тёмная тема в проекте «Ещё кусочек»

«Стратегия» (Strategy)
– Демо: вывод шаблона карточки товара без блока с количеством страниц в проекте «По полочкам»
– Задание + решение: вывод шаблона карточки рецепта без блока автора в проекте «Ещё кусочек»

«Посетитель» (Visitor)
– Демо: выделение нового издания книги по уникальному идентификатору
– Задание + решение: блокировка рецепта в стадии разработки в проекте «Ещё кусочек»

«Хранитель»/«Снимок» (Memento)
– Демо: кнопка для смены обложки книги на главном баннере приложения «По полочкам»
– Задание + решение: кнопка смены заголовка сайта в проекте «Ещё кусочек»

«Шаблонный метод» (Template Method)
– Демо: добавление символов-префиксов к названиям книг в проекте «По полочкам»
– Задание + решение: добавление символов-префиксов к названиям рецептов в проекте «Ещё кусочек»
– Тест по четвёртому разделу

Раздел 5

MV*-паттерны

‍В этом разделе мы научимся применять MV*-паттерны проектирования

«MVC»
– Демо: добавление фильтра гостиниц по стоимости в проекте «Седона»
– Задание + решение: добавление фильтра товаров по стоимости в проекте «Девайс»

«MVP»
– Демо: поэтапный вывод элементов на страницу в проекте «Седона»
– Задание + решение: поэтапная загрузка элементов на страницу в проекте «Девайс»

«MVVM»
– Демо: добавление фильтра по типу жилья в реальном времени в проекте «Седона»
– Задание + решение: фильтр по наличию Bluetooth в реальном времени в проекте «Девайс»
– Тест по пятому разделу

Раздел 6

Заключение

В этом разделе мы подведём итоги курса и закрепим полученные знания
‍
– Подводим итоги
– Финальное тестирование
– Дополнительные материалы