Первоначально опубликовано в blog.shams-nahid.com
Шаблоны проектирования — это устоявшиеся решения общих проблем архитектуры программного обеспечения. Как разработчик JavaScript, я сталкиваюсь с множеством проблем, и шаблоны проектирования предназначены для решения многих из них. Некоторые из очень популярных библиотек также используют эти шаблоны проектирования. Здесь я перечислил несколько шаблонов проектирования, которые я использую с различными библиотеками JavaScript.
Шаблон проектирования наблюдателя
- МобХ
Мы используем шаблоны проектирования наблюдателя в библиотеке управления магазином MobX. С MobX мы рассматриваем тему, которая со временем будет меняться. Есть метод пары подписчиков, который будет запускаться при смене темы.
Шаблон разработки команд
- Транзакции БД
Шаблон проектирования команды обеспечивает операцию отмены. Это применимо, когда нам нужно отменить какую-то операцию после выполнения операции. Мы используем этот шаблон проектирования в транзакциях базы данных. В транзакциях базы данных, если в какой-либо из операций возникает сбой, мы отменяем каждую из предыдущих операций.
Шаблон проектирования прокси
- Кэширование в маршруте и БД
В традиционном механизме кэширования мы сначала проверяем, есть ли уже данные или нет. Если данные уже есть в кеше, мы возвращаем данные из кеша и не выполняем операции. В противном случае извлеките/соберите данные, обновите кэш данными, а затем верните данные. Эта архитектура представляет собой шаблон проектирования прокси.
Шаблон оформления фасада
- Оболочка для вызова API (Axios/fetch)
Для операций выборки данных, от пользовательского интерфейса до API, мы можем использовать любую популярную библиотеку, например, axios или fetch. Теперь, чтобы сделать библиотеку Axios или fetch абстрактной, мы использовали модуль-оболочку. Эта оболочка скрывает функциональные возможности библиотеки. Это полезно, если в будущем мы захотим изменить библиотеку и не хотим изменять высокоуровневые коды.
- Платежный модуль (полоса/Paypal)
Другим примером могут быть платежные модули, обертка может быть полезна, если есть возможность изменить модуль. Например, прямо сейчас мы используем Stripe, но, возможно, в будущем мы будем использовать Paypal.
Одноэлементный шаблон проектирования
- Реагировать на хуки
Формы React hook имеют функцию watch, где мы можем наблюдать за изменениями в определенном поле формы. Нашими требованиями было наблюдать за изменениями вне формы. В данном случае нам нужно, чтобы наблюдатель извлекался из формы. Но получение наблюдателя от крючка-от заставляет форму инициироваться каждый раз.
Таким образом, в этом случае мы используем шаблон singleton в форме ловушки, поэтому он не будет инициироваться более одного раза и предоставлять наблюдателя из объекта, инициированного в первый раз.
Шаблон нулевого объекта
- Исходное состояние Redux Toolkit
В наборе инструментов redux, когда нам нужно получить данные из API, мы объявляем начальное состояние. Это начальное состояние является запасным вариантом фактических данных. Это позволяет приложению не ломаться и не давать сбой до тех пор, пока фактические данные не будут получены и состояние не будет обновлено.
