Разоблачение шаблонов проектирования: быстрый 10-минутный обзор с точки зрения JS

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

  1. Шаблон одиночного элемента:
  • Определение: общий доступ к одному глобальному экземпляру для всего нашего приложения.
  • Объяснение: Одиночки — это классы, экземпляры которых могут быть созданы один раз, и к которым можно получить глобальный доступ. Этот единственный экземпляр может быть общим для всего нашего приложения.
  • Использование: веб-сокет.
  • важно: синглтоны ограничивают создание экземпляра одним экземпляром, экономя место в памяти. Однако они считаются анти-шаблоном в JavaScript из-за проблем с глобальным состоянием, жесткой связи и сложностей с внедрением зависимостей.

2. Шаблон прокси:

  • Определение: перехватывать и контролировать взаимодействия с целевыми объектами.
  • Объяснение: Вообще говоря, прокси означает замену кого-то другого. Вместо того, чтобы говорить с этим человеком напрямую, вы поговорите с доверенным лицом, которое будет представлять человека, с которым вы пытались связаться. То же самое происходит и в JavaScript: вместо прямого взаимодействия с целевым объектом мы будем взаимодействовать с прокси-объектом.
  • Использование: проверка, форматирование, уведомления или отладка.
  • Важно: JavaScript предоставляет встроенный объект под названием Reflect, который облегчает нам манипулирование целевым объектом при работе с прокси.

3. Шаблон поставщика:

  • Определение: сделать данные доступными для нескольких дочерних компонентов
  • Объяснение: С помощью шаблона поставщика мы можем сделать данные доступными для нескольких компонентов. Вместо того, чтобы передавать эти данные на каждый уровень через свойства, мы можем обернуть все компоненты в Provider. Поставщик — это компонент более высокого порядка, предоставляемый нам объектом Context.
  • Использование: шаблон Provider очень полезен для обмена глобальными данными. Распространенным вариантом использования шаблона провайдера является совместное использование состояния пользовательского интерфейса темы со многими компонентами. Нам больше не нужно иметь дело с опорным сверлением, которое можно рассматривать как антипаттерн.

4. Шаблон прототипа:

  • Определение: совместное использование свойств среди множества объектов одного типа.
  • Объяснение: Шаблон прототипа — это удобный способ совместного использования свойств многими объектами одного типа. Прототип — это объект, встроенный в JavaScript, и к нему могут обращаться объекты через цепочку прототипов.
  • Важно! Термин цепочка прототипов указывает на то, что может быть несколько шагов. Действительно! До сих пор мы только видели, как мы можем получить доступ к свойствам, которые непосредственно доступны для первого объекта, на который __proto__ имеет ссылку. Однако сами прототипы также имеют объект __proto__! Становится понятно, почему это называется цепочкой прототипов: когда мы пытаемся получить доступ к свойству, которое недоступно непосредственно для объекта, JavaScript рекурсивно проходит по всем объектам, на которые указывает __proto__, пока не найдет свойство!

5. Контейнер/Презентационный шаблон:

  • Определение: Обеспечьте разделение проблем, отделив представление от логики приложения.
  • Объяснение. В идеале мы хотим обеспечить разделение проблем, разделив этот процесс на две части:
  1. Презентационные компоненты: Компоненты, которые заботятся о том, как данные отображаются пользователю. например, рендеринг списка изображений. Компоненты представления обычно не имеют состояния, если только им не требуется состояние для целей пользовательского интерфейса.
  2. Компоненты-контейнеры: компоненты, которые заботятся о том, какие данные отображаются пользователю. например, получение изображений. Во многих случаях шаблон Container/Presentational можно заменить React Hooks. Внедрение хуков упростило для разработчиков добавление состояния без необходимости использования компонента-контейнера для предоставления этого состояния.
  • Использование: с помощью этого шаблона мы можем отделить представление (компоненты представления) от логики приложения (компоненты-контейнеры).

5. Шаблон наблюдателя:

  • Определение: используйте наблюдаемые объекты для уведомления подписчиков о возникновении события.
  • Объяснение: С помощью шаблона наблюдателя мы можем подписывать определенные объекты, наблюдателей, на другой объект, называемый наблюдаемым. Всякий раз, когда происходит событие, наблюдаемый уведомляет всех своих наблюдателей! Наблюдаемый объект обычно состоит из 3 важных частей: наблюдатели (массив наблюдателей), подписка () [метод добавления наблюдателей], отмена подписки () [метод удаления наблюдателей] ,notify() [метод для уведомления всех наблюдателей всякий раз, когда происходит определенное событие].
  • Использование. Популярной библиотекой, использующей наблюдаемый шаблон, является RxJS.

6. Шаблон модуля:

  • Определение: разбейте свой код на более мелкие, повторно используемые части.
  • Объяснение: Помимо возможности разбивать ваш код на более мелкие повторно используемые части, модули позволяют вам сохранять определенные значения в вашем файле приватными. Объявления внутри модуля ограничены (инкапсулированы) этим модулем по умолчанию. Если мы явно не экспортируем определенное значение, это значение будет недоступно вне этого модуля. Это снижает риск конфликта имен для значений, объявленных в других частях вашей кодовой базы, поскольку значения недоступны в глобальной области.
  • Важно: мы можем экспортировать функции или переменные из модуля двумя способами: именованный экспорт и экспорт по умолчанию. Именованные экспорты позволяют нам выборочно экспортировать определенные функции или переменные из модуля. Мы используем фигурные скобки {} для импорта этих именованных экспортов. С другой стороны, экспорт по умолчанию позволяет нам экспортировать одно значение в качестве экспорта по умолчанию. При импорте экспорта по умолчанию мы можем присвоить ему любое имя, которое мы предпочитаем. Мы также можем импортировать все экспорты из модуля, то есть все именованные экспорты и экспорт по умолчанию, используя звездочку * и указав имя, под которым мы хотим импортировать модуль. Значение импорта равно объекту, содержащему все импортированные значения. Будьте осторожны при этом, так как вы можете в конечном итоге импортировать значения без необходимости.
  • Важно 2 (динамический импорт): при импорте всех модулей в верхней части файла все модули загружаются перед остальной частью файла. В некоторых случаях нам нужно только импортировать модуль на основе определенного условия. С помощью динамического импорта мы можем импортировать модули по запросу, используя ключевое слово then.

7. Шаблон миксин:

  • Определение: Добавление функциональности к объектам или классам без наследования
  • Объяснение: Mixin — это объект, который мы можем использовать для добавления повторно используемых функций к другому объекту или классу без использования наследования. Мы не можем использовать миксины сами по себе: их единственная цель — добавить функциональность объектам или классам без наследования.
  • Важно: В современном JavaScript использование примесей было в значительной степени заменено другими шаблонами, такими как композиция с функциями более высокого порядка или использование наследования классов. Эти альтернативы предлагают более явные и контролируемые способы расширения и повторного использования функциональности.

8. Шаблон посредника / промежуточного программного обеспечения:

  • Определение: используйте объект центрального посредника (промежуточного программного обеспечения) для управления связью между компонентами.
  • Объяснение: Шаблон посредника позволяет компонентам взаимодействовать друг с другом через центральную точку: посредник. Вместо того, чтобы напрямую разговаривать друг с другом, посредник получает запросы и отправляет их дальше! В JavaScript посредник часто представляет собой не что иное, как литерал объекта или функцию. Вы можете сравнить этот шаблон с отношениями между авиадиспетчером и пилотом. Вместо того, чтобы пилоты разговаривали друг с другом напрямую, что, вероятно, закончилось бы довольно хаотично, пилоты разговаривают с авиадиспетчером. Авиадиспетчер следит за тем, чтобы все самолеты получали информацию, необходимую им для безопасного полета, не задев другие самолеты.

9. Узор HOC:

  • Определение: передавайте многократно используемую логику в качестве реквизитов компонентам во всем приложении.
  • Объяснение: Компонент высшего порядка (HOC) — это компонент, который получает другой компонент. HOC содержит определенную логику, которую мы хотим применить к компоненту, который мы передаем в качестве параметра. После применения этой логики HOC возвращает элемент с дополнительной логикой.
  • Важно: в некоторых случаях мы можем заменить шаблон HOC на React Hooks, но React Hooks не заменяет шаблон HOC. «В большинстве случаев Hooks будет достаточно, и они могут помочь уменьшить вложенность в вашем дереве». — Реагировать Документы

10. Шаблон рендеринга реквизита:

  • Определение: передавать элементы JSX компонентам через свойства.
  • Объяснение: Один из способов сделать компоненты пригодными для повторного использования — использовать шаблон свойства рендеринга. Свойство рендеринга — это свойство компонента, значением которого является функция, возвращающая элемент JSX.

11. Узор крючка:

  • Определение. Используйте функции для повторного использования логики с отслеживанием состояния в нескольких компонентах приложения.
  • Объяснение: в React 16.8 появилась новая функция под названием Hooks. Хуки позволяют использовать методы состояния и жизненного цикла React без необходимости использования компонента класса ES2015. Многие традиционные шаблоны проектирования могут быть заменены хуками.
  • Важно (ад обертки): Ад обертки относится к проблеме сильно вложенных компонентов с несколькими уровнями компонентов более высокого порядка (HOC) или оболочек, что приводит к сложному и трудно поддерживаемому коду. Шаблон Hook в React решает эту проблему, позволяя функциональным компонентам управлять состоянием и жизненным циклом напрямую, без необходимости чрезмерной упаковки или сверления реквизита.

12. Модель наилегчайшего веса:

  • Определение: повторное использование существующих экземпляров при работе с идентичными объектами.
  • Объяснение. Шаблон легковеса удобен, когда вы создаете огромное количество объектов, что потенциально может привести к истощению всей доступной оперативной памяти. Это позволяет минимизировать объем потребляемой памяти.
  • Использование: В JavaScript мы можем легко решить эту проблему с помощью прототипного наследования. В настоящее время аппаратное обеспечение имеет ГБ оперативной памяти, что делает шаблон легковеса менее важным.

13. Заводской узор:

  • Определение: Используйте фабричную функцию для создания объектов.
  • Объяснение: С помощью фабричного шаблона мы можем использовать фабричные функции для создания новых объектов. Функция является фабричной, если она возвращает новый объект без использования нового ключевого слова!
  • Использование: фабричный шаблон полезен, когда нам нужно создать несколько меньших объектов, которые имеют одни и те же свойства, но во многих случаях может быть более эффективным использование памяти для создания новых экземпляров вместо новых объектов каждый раз.

14. Составной узор:

  • Определение: Создайте несколько компонентов, которые работают вместе для выполнения одной задачи.
  • Объяснение: составной шаблон, также известный как составной шаблон.
  • Использование: его преимущества включают гибкость, упрощенный клиентский код и возможность повторного использования кода. Однако шаблон может привести к снижению производительности и может иметь ограничения с точки зрения безопасности типов.

15.Шаблон команды:

  • Определение: разделите методы, которые выполняют задачи, отправляя команды командиру.
  • Объяснение: Шаблон команды — это шаблон проектирования, который помогает отделить отправителя запроса от получателя, выполняющего запрос.