Паттерны проектирования
- 5 октября 2022
Многие проблемы, с которыми мы сталкиваемся при разработке, уже кто-то решил за нас. Поэтому не нужно придумывать новые решения или создавать костыли — лучше использовать в проекте готовые паттерны.
👉🏻 Паттерны проектирования — это алгоритмы решения типовых задач при создании программ.
Иногда разработчики используют их в своей работе не задумываясь — просто могут не знать об этом. Например, когда вы создаёте механизм для получения разных вариантов карточек товаров, то невольно используете паттерн «Фабрика».
Паттерны упрощают разработку. Предположим, вы создаёте проект с нуля. Если вы используете для него самописную архитектуру, то потратите на работу больше времени. А если, например, используете архитектуру MVC, то сократите время на разработку и снизите вероятность появления ошибок в программе, к тому же новые сотрудники смогут быстрее присоединиться к работе и вникнуть в детали.
Для многих задач есть свой паттерн — нужно лишь выбрать подходящий шаблон проектирования и правильно его использовать.
☝ Паттерны помогут быстрее и эффективнее проектировать, писать и заниматься отладкой программного кода.
Какие бывают паттерны
Паттернов проектирования много, и каждый решает свои задачи. Основных групп три — поведенческие, структурные и порождающие паттерны.
Порождающие паттерны помогают создавать объекты без добавления в программу лишних зависимостей. Структурные отвечают за построение иерархий классов, которые удобно поддерживать. Поведенческие паттерны нужны для безопасного взаимодействия между объектами программы.
Порождающие паттерны
Зачем нужны. Чтобы получить группу объектов, которые оптимально дополняют друг друга. Затем эту группу можно переиспользовать в других проектах.
Пример из жизни. Мебельная фабрика, которая конструирует шкафы-купе, встроенные и распашные шкафы. Хотя модели отличаются, по своему назначению всё это один вид мебели — шкафы.
В разработке. Порождающие паттерны используют, если нужно создать объекты, которые относятся к одной группе, но решают разные задачи. Например, при создании интернет-магазина создаётся личный кабинет для разных пользователей: администратора, редактора и покупателей. Функциональность будет разной, но назначение остаётся одним — это всё личный кабинет.
Подробнее:
Структурные паттерны
Зачем нужны. Они объединяют сложные структуры и помогают создавать из них большие сложные системы.
Пример из жизни. Инфраструктура города — сложная система. Чтобы создать в городе парковую зону, нужно объединить несколько сложных структур: мост через реку, фонтан, скамьи и столы.
В разработке. Допустим, вам нужно подключить к проекту несколько плагинов JQuery, которые не могут работать вместе. В таких случаях удобно использовать структурные паттерны — они наладят взаимодействие между несовместимыми независимыми модулями.
Подробнее:
Поведенческие паттерны
Зачем нужны. Они снижают уровень связности программы и упрощают взаимодействие между её объектами — это делает программу более гибкой.
Ещё их используют, когда нужно гибко настроить поведение объектов при определённых обстоятельствах, например, в зависимости от пола и возраста пользователя, погодных условий или изменения курса рубля.
Пример из жизни. Работа продавцов напитков. Они ориентируются на погодные условия: летом предлагают квас и лимонад, а зимой — горячий чай и пунш.
В разработке. Поведенческие паттерны используют для программ, которые работают с внешними независимыми системами и меняют поведение, основываясь на полученных данных. Например, приложение получает данные фондовых рынков из какого-то источника. Если что-то пойдёт не так, мы можем по цепочке запрашивать данные из других источников, пока не получим нужный ответ.
Этот приём делает приложение устойчивее к внешним изменениям, защищает от ошибоки и обеспечивает запасными вариантами получения информации.
Подробнее:
MV*-паттерны
Зачем нужны. Для построения программы — они предлагают разработчику архитектурные варианты для приложения. Такие паттерны разделяют логику приложения: отделяют модель, которая скрыта от пользователя, от представления — видимой части.
Пример из жизни. Товары в продовольственном магазине — это и есть «вид» в моделях MV, мы можем их рассмотреть. А вот информация о том, как и при каких условиях создан товар, от нас скрыта. Это «модель», она отвечает за создание объекта, который мы можем увидеть.
В разработке. Многие разработчики используют в проектах паттерн MVC — это одно из самых распространённых архитектурных решений для веб-сайтов и мобильных приложений.
Подробнее:
- Паттерн MVC — «Модель-Вид-Контроллер»
- Паттерн MVP — «Модель-Вид-Представление»
- Паттерн MVVM — «Модель-Представление-Модель представления»
Когда использовать паттерны проектирования
Если количество задач растёт, а времени писать код под однотипные и повторяющиеся задачи все меньше и меньше — пора задуматься о паттернах. Используя опыт других разработчиков и применяя их наработки в своих проектах, вы станете быстрее создавать программы. К тому же проверенные решения сделают приложение более надёжным, и вам будет проще его расширять.
Использовать паттерны проектирования нужно осмысленно, иначе можно столкнуться с проблемами. Например, если бездумно объединить в приложении несовместимые версии библиотек, всё может сломаться.
Каждому разработчику, независимо от языка программирования и сферы его применения, важно понимать паттерны и грамотно использовать сложные объекты в больших системах.
Больше статей
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше
AOT против JIT-компилятора: что лучше для разработки на Angular?
Angular — один из самых популярных фреймворков для фронтенда — предлагает два подхода к компиляции: предварительная компиляция и динамическая компиляция во время выполнения. Оба метода играют важную роль в оптимизации приложений на Angular и повышении их производительности. В этом материале мы рассмотрим различия между ними, их преимущества и разберёмся, когда стоит использовать каждый из подходов.
- 25 мая 2025
Динамические формы в Angular 19: пошаговое руководство
Формы — неотъемлемая часть большинства веб-приложений: будь то регистрация, ввод данных или опросы. Модуль реактивных форм в Angular отлично подходит для создания статичных форм, но во многих случаях требуется, чтобы форма могла динамически адаптироваться в зависимости от действий пользователя или внешних данных.
В этой статье мы рассмотрим, как создавать динамические формы с использованием автономных компонентов в Angular 19, применяя модульный подход, который избавляет от необходимости использовать традиционные модули Angular. В сопроводительном репозитории на GitHub для оформления форм используется Tailwind CSS, однако в статье внимание сосредоточено исключительно на логике динамических форм. Tailwind и связанные с ним настройки намеренно не включены в примеры, чтобы сохранить акцент на основной теме.
- 25 мая 2025
Как обнаружить изменения в Angular: пошаговая инструкция
Как разработчики на Angular, мы нередко задумываемся, как фреймворк отслеживает изменения в данных и затем отображает их во вьюхе. Этот процесс называется стратегией обнаружения изменений в Angular. В этом материале мы разберёмся, как это работает, и научимся выбирать подходящую стратегию для разных сценариев.
- 24 мая 2025
Компоненты в Angular 18: пошаговое руководство
Angular развивается стремительно, и с выходом версии 18 появились новые возможности, которые разработчики могут использовать в своей работе. Одним из ключевых изменений в Angular 18 стало удаление традиционного файла app.module.ts — ему на смену пришли standalone-компоненты. Если вы только начинаете работать с Angular или переходите с более ранней версии, это пошаговое руководство поможет вам разобраться в базовых принципах компонентов в Angular 18. Независимо от вашего уровня — новичок вы или опытный разработчик — этот туториал покажет, как создавать, управлять и эффективно использовать компоненты в Angular.
- 19 мая 2025
Полное руководство по Angular @if
Одно из самых заметных нововведений в Angular — это встроенный синтаксис для управляющих конструкций, который появился в версии 17. Он решает одну из самых частых задач, с которой сталкивается каждый разработчик: показывать или скрывать элементы на странице в зависимости от условия. Раньше для этого использовали привычную структурную директиву *ngIf. Теперь у нас есть более современная альтернатива — синтаксис @if, часть нового подхода к управлению шаблоном.
В этом гайде мы сравним оба варианта, разберёмся, чем @if лучше, и покажем, как можно перейти на него автоматически. Также поговорим об одной распространённой ошибке — о том, как не стоит использовать @if вместе с пайпом async.
- 18 мая 2025
Модули Angular для организации кода и ленивой загрузки
Модули — один из ключевых инструментов Angular для построения масштабируемых и поддерживаемых приложений. В этой статье мы подробно рассмотрим:
- что такое модули в Angular;
- зачем они нужны;
- как их использовать для структурирования кода;
- как реализовать «ленивую» загрузку модулей;
- и чем отличаются Feature, Core и Shared модули.
Если вы только начинаете изучать Angular или хотите углубить свои знания, эта статья поможет вам лучше понять, как правильно организовать архитектуру Angular-приложения.
- 12 мая 2025
Навигация в Angular: RouterLink, Router.navigate и Router.navigateByUrl
Директива RouterLink позволяет настраивать переходы между маршрутами прямо в шаблоне Angular. А методы Router.navigate и Router.navigateByUrl, доступные в классе Router, дают возможность управлять навигацией программно — прямо из кода компонентов.
Разберёмся, как работают RouterLink, Router.navigate и Router.navigateByUrl.
- 11 мая 2025
Полное руководство по Lazy Loading в Angular
Если вы создаёте большое Angular-приложение, вам наверняка важно, чтобы оно загружалось быстро. Представьте, что вы устраиваете вечеринку и хотите подавать закуски не сразу, а по мере прихода гостей, чтобы не перегрузить кухню. «Ленивая» загрузка в Angular работает примерно так же: вместо того чтобы загружать всё приложение целиком сразу, вы подгружаете только те части, которые нужны — и только когда они нужны.
В этом пошаговом руководстве мы разберём, как реализовать lazy loading в Angular.
- 10 мая 2025
Все (ну или почти все) способы автоматически перезагрузить страницу раз в N секунд
Иногда страницу нужно просто перезагрузить. Полностью. Не компонент, не блок, а именно целиком. Без обсуждений, без лишней логики. Например, чтобы:
- экран с результатами обновлялся каждые 10 секунд;
- интерфейс на стенде показывал последние данные без кнопок;
- страницы в интранете не устаревали, пока никто не смотрит.
Это можно сделать в любой связке: HTML, JS, Python, PHP, Go, Node.js — не важно. Ну и если говорить совсем прямо, то совсем разных способов всего три, а остальное просто вариации.
- 5 мая 2025
Поиск с конца массива в JavaScript: findLast и findLastIndex в JavaScript
С недавних пор в JavaScript появились два полезных метода для массивов: findLast и findLastIndex. Они делают то же, что и привычные find и findIndex, только проходят массив с конца.
- 5 мая 2025