Сложные шаблоны проектирования в JavaScript, часть 1

Что такое шаблон дизайна?

Каждый шаблон описывает проблему, которая возникает снова и снова в нашей среде, а затем описывает суть решения этой проблемы в таких способ, которым вы можете использовать это решение миллион раз, никогда не повторяя его дважды, - Кристофер Александр

Шаблоны проектирования в разработке программного обеспечения популяризировала группа из четырех авторов в своей книге «Шаблоны проектирования».

Шаблон проектирования в компьютерном программном обеспечении может помочь вам выявить проблему и эффективно ее решить, используя эффективный и многократно используемый процесс.

Преимущества использования шаблонов дизайна

Проблема может быть решена разными способами, но шаблон проектирования предоставляет вам эффективный и многоразовый способ решения проблемы. Это поможет вам следующим образом.

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

Мы обсудим множество типов шаблонов дизайна, наиболее часто используемых один раз

Основные шаблоны создания - шаблон Singleton, Factory и Builder. Его можно использовать при создании объектов.
Шаблоны управления потоком - его можно использовать для эффективного управления данными и потоком управления.
Шаблоны проектирования модулей. В JavaScript этот шаблон является наиболее часто используемым шаблоном проектирования для того, чтобы отдельные фрагменты кода не зависели от других компонентов. Это обеспечивает слабую связь для поддержки хорошо структурированного кода.
Структурные шаблоны. Этот шаблон помогает определить эффективные и систематические отношения между объектами и сущностями.
Поведенческие шаблоны. Поведенческие шаблоны определяют способы общения между классами и объектами.
Шаблоны обмена сообщениями. Эти шаблоны помогают нам оптимизировать межпроцессный обмен сообщениями и поток данных.

В этой части 1 мы обсудим только основные шаблоны создания

i) Шаблоны проектирования синглтонов

Синглтоны - это объекты, которые могут иметь только один экземпляр с единственной точкой доступа.

Они полезны для поддержания центрального состояния, когда все могут выходить за пределы одного и того же состояния.
Предположим, у вас есть модуль, который экспортирует две функции, как показано ниже.

let x = 0
module.export ={
 add:(num)=>x+num
 sub:(num)=>x-num
}

Когда этот модуль импортируется в несколько файлов или используется несколько раз в приложении, создается только один экземпляр и ссылается на один и тот же экземпляр, поскольку система модулей кэширует модуль в момент обращения к нему с помощью оператора require в самый первый раз. После этого везде упоминается одна и та же система.

Пример синглтона

Сначала мы создали модуль BalanceHandler, который содержит три метода сложения, вычитания и суммирования с частной переменной balance.
Мы дважды импортировали этот модуль в App.js в константе BalanceHandler1 и BalanceHandler2 с использованием инструкции require
Затем мы вызвали метод add из BalanceHandler1 и сложили сумму 20 и 10.
После этого мы вызываем метод add для BalanceHandler2 и добавляем сумму 30.
Теперь, если вы вызовете метод суммы BalanceHandler1, вы получите 60 вместо 30 (20 + 10).
Это связано с тем, что BalanceHandler1 и BalanceHandler2 читают и записывают из одного и того же кэшированного экземпляра.
Ознакомьтесь с приведенным выше кодом здесь

Посмотрим, как мы поступаем с классами.

Пример 1 с классами

Давайте посмотрим, что происходит в приведенном выше примере.

у нас есть класс Bank в Bank.js, у которого есть три метода добавить, вычесть и сумма.
У нас есть два файла User1.js и User2.js, которые импортируют банк класс.
В User1.js мы создаем класс User1, который содержит три метода: depositAmount, pullwAmount и getBalance. . Перед классом User1 мы создаем новый экземпляр класса Bank. Что мы используем во всех трех методах.
В User2.js мы делаем то же самое для User2, что и для User1. Здесь мы также создаем новый экземпляр Bank
В App.js мы используем классы User1 и User2 и вызываем метод depositAmount с 50 и 100 соответственно . аналогичным образом, вызывая removewAmount метод с суммами 10 и 20.
Если вы запустите App.js с помощью команды ниже.
Ознакомьтесь с приведенным выше кодом здесь

node App.js

Вы увидите вывод

User one account balance is 40 // user 1 deposit 40 and withdraw 10
User two account balance is 80 // user 2 deposit 100 and withdraw 20

Проблема с примером 1

Хотя наш модуль кэширован, мы создаем два отдельных экземпляра класса Bank в User1.js и еще один в User2.js, это, естественно, не ведет себя как одноэлементный

Если в этом примере использовался шаблон синглтона, то баланс для user1 и user2 должен быть одинаковым, поскольку синглтоны - это объекты, которые могут иметь только один экземпляр.

Решение, пример 1

При работе с классами создание экземпляра класса перед его экспортом из модуля приведет к синглтону

Если вы посмотрите на снимок выше. Этот код следует шаблонам Singleton.
Теперь у нас есть экземпляр строки 15. Bank Class в Bank.js. Это означает, что мы создаем экземпляр только один раз и оба user1 и user2, используя один и тот же экземпляр.
Теперь, если вы запустите узел App.js, вы получите следующий результат
Ознакомьтесь с приведенным выше кодом здесь

User one account balance is 120 
User one account balance is 120 // (40+100-10-20)

Если вы помните, что сначала user1 депозирует 40, затем user2 вносит 100, после этого User1 снимает 10, а user2 снимает 20. Таким образом, в последнем случае у обоих пользователей будет баланс 120, потому что оба читают и записывают из одного и того же кэшированного экземпляра.

Важное примечание

При использовании несовместимых имен файлов в ОС без учета регистра модуль НЕ будет вести себя как синглтон, потому что он будет кэшироваться как отдельные экземпляры

ii) Заводской узор

Этот образец был определен Бандой четырех, которая говорит:

Определите интерфейс для создания объекта, но позвольте подклассам решать, какой класс создать.

Этот шаблон также известен как шаблон виртуального конструктора.
Заводской шаблон чрезвычайно полезен при написании пакетов NPM для публичного использования.
Шаблон фабрики используется для создания объектов без раскрытия логики создания экземпляров. Этот шаблон можно использовать, когда нам нужно создать другой объект в зависимости от определенного условия. Например:

Здесь, в vehicleFactory.js, мы определили класс VehicleFactory для создания нового объекта на основе type получено. Кроме того, мы создали класс Truck and Bike, который используется для создания новых объектов грузовика и велосипеда.
В App.js мы создали новый объект factory из vehicleFactory класс.
Мы создаем новые объекты bike и truck, вызывая factory.createVehicle , передав тип автомобиля и другие конфигурации.
В заключение, с помощью этого шаблона мы создаем объект грузовика и велосипеда, не раскрывая логику создания экземпляра.
Ознакомьтесь с приведенным выше кодом здесь

Преимущества заводской выкройки

Создание динамического объекта. Его можно использовать в том случае, если тип объекта определяется во время выполнения.
Абстракция - нет доступа к фактическому конструктору объекта.
Возможность многократного использования - одни и те же фабрики можно использовать для аналогичных объектов, так же как вы можете создать грузовик с 2 шинами или 4 шинами на одном и том же заводе.

iii) Шаблон Строителя

Согласно "Бандам четырех"

Отделите построение сложного объекта от его представления, чтобы один и тот же процесс построения мог создавать разные представления.

Шаблон Builder позволяет клиенту создать сложный объект, указав только тип и содержимое. Детали конструкции полностью скрыты от клиента.

Давайте посмотрим на пример

Сначала мы создаем функцию-конструктор Pizza, которая имеет свойство pizza как пустой объект и несколько методов, таких как s etBase, setSauce, setCheese, setToppings и запекать
Консоль метода Bake все объекты пиццы
В App.js мы импортируем функцию Pizza и создаем экземпляр margherita из Pizza.
Итак, мы создали нашего конструктора пиццы до этого момента.
С помощью margherita теперь мы можем установить основу, соус, сыр и начинки.
Теперь вы можете создавать несколько пицц, настраивая пиццу, например, начинку из сыра и т. Д.
Ознакомьтесь с приведенным выше кодом здесь

Шаблон Factory vs Builder

Давайте еще раз сравним эти два изображения бок о бок в последний раз, но на этот раз сосредоточив внимание на различиях.

Абстрактная фабрика: выделяет семейство объектов продукта (простых или сложных).
Builder: ориентирован на пошаговое построение сложного объекта.
Абстрактная фабрика: сосредоточьтесь на том, что делается
Строитель: сосредоточьтесь на том, * как * это сделано
Абстрактная фабрика. Сосредоточьтесь на определении множества различных типов * фабрик * для создания множества * продуктов *, а не создание одного продукта для одного продукта.
Строитель: сосредоточьтесь на создании одного комплекса, но одного единственного * продукта *
Абстрактная фабрика: откладывает выбор конкретного типа объекта до времени выполнения.
Builder: скрыть логику / операцию компиляции этого сложного объекта.
Абстрактная фабрика: * каждый * вызов метода создает и возвращает разные объекты
Builder: только последний вызов метода возвращает объект, тогда как другие вызовы частично создают объект.

Ключевые баллы

В синглтоне объекты могут иметь только один экземпляр с единственной точкой доступа.
Модульная система узла кэширует модули
При работе с классами создание экземпляра класса перед его экспортом из модуля приведет к синглтону
Заводской шаблон предоставляет интерфейс для создания предварительно настроенных объектов.

Репозиторий GitHub для указанного выше кода -

karkranikhil / Design-pattern-using-js
Участвуйте в разработке karkranikhil / Design-pattern-using-js, создав учетную запись на GitHub. github.com

Ссылки

Разместите свой собственный блог в C2E Blog

Хотите писать для CodeToExpress? Мы будем рады видеть вас техническим писателем. Отправьте нам письмо со ссылкой на ваш черновик на [email protected]