4 шаблона проектирования JS, которые вам следует знать

JavaScript

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

Как правило, они используют некоторые шаблоны проектирования  больше, чем другие, хотя есть обширный перечень шаблонов проектирования на  разные случаи.

В этом посте я хотел бы обсудить распространённые шаблоны чтобы улучшить ваши знания в программировании и погрузиться глубже в JavaScript.

Шаблоны проектирования включают в себя следующее:

— Модуль

— Прототип

— Наблюдатель

— Одиночка

Каждый шаблон состоит из множества свойств, но я выделяю следующие ключевые моменты:

1.Контекст: Где/при каких обстоятельствах используется тот или иной шаблон?

2.Проблема: Какую проблему мы пытаемся решить?

3.Решение: Как использовать это шаблон для решения этой проблемы?

4.Реализация: Как выглядит реализация?

# Шаблон Модуль (Module)

В JavaScript модули являются наиболее распространенными шаблонами проектирования для обеспечения независимости каких-то частей кода от других компонентов. Это обеспечивает слабую связь для поддержания хорошо структурированного кода.
Для тех, кто знаком с объектно-ориентированными языками, модули — это «классы» в JavaScript. Одно из многих преимуществ классов — инкапсуляция – защита состояния и поведения от доступа из других классов.
Шаблон модуля дает доступ публичным и частным уровням (плюс менее защищенным и привилегированным).

Модули должны быть немедленно вызываемыми функциями (IIFE) , чтобы позволить частным областям видимости, то есть замыканию, защитить переменные и методы (однако, вернется объект, а не функция). Вот как это выглядит:

Здесь мы создаем приватные переменные и/или функции до возвращения нашего объекта, который мы хотим вернуть.

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

Обратите внимание, что  callChangeHTML  связан с  возвращенным объектом и может ссылаться в рамках неймспейс (namespace) HTMLChanger. Однако, когда содержимое снаружи модуля, то такое невозможно.

REVEALING MODULE PATTERN

Цель — поддержание инкапсуляции и открытие определенных переменных и методов, возвращаемых в литерале объекта. Непосредственная реализация выглядит следующим образом:

Здесь есть есть явный недостаток – невозможность ссылаться на приватные методы. Это может создавать проблемы в модульном тестировании. Аналогичным образом, публичное поведение не является переопределяемым.

 

# Шаблон Прототип (Prototype)

Любой Разработчик JavaScript либо видел ключевое слово prototype, озадаченный прототипным наследованием, либо реализовывал прототипы в своем коде. Шаблон прототип основывается на прототипном наследовании JavaScriptМодель прототипа используется в основном для создания объектов в ситуациях, требующих высокой производительности. Созданные объекты являются  пустыми клонами исходного объекта.

Один из случаев использования паттерна «прототип» –  проведение обширных операций с базой данных для создания объекта, используемого для других частей приложения. Если другой процесс необходим для использования этого объекта, то вместо того, чтобы выполнять эти операции с базой данных, целесообразнее клонировать ранее созданный объект.

Пояснение в схеме: Prototype Design Pattern on Wikipedia 

Этот язык UML описывает интерфейс прототипа используется для клонирования конкретных реализаций.

Для клонирования объекта должен существовать конструктор для того чтобы создать экземпляр первого объекта. Далее, с помощью ключевого слова prototype переменные и методы привязываются к структуре объекта. Давайте рассмотрим простой пример:

 

Конструктор позволяет создавать один объект TeslaModelS. При создании нового объекта TeslaModelS, он сохранит состояние, инициализированное в конструкторе. Кроме того, поддержание функции go и  stop несложно, так как мы объявили их при помощи прототипов. Такой же способ  расширения функции с использованием прототипа описан ниже:

REVEALING PROTOTYPE PATTERN

Так же как и  шаблон модуль шаблон прототип  имеет вариацию Revealing . Revealing паттерн обеспечивает инкапсуляцию  с  публичными и приватными членами.

Поскольку мы возвращаем объект, мы добавим объекту-прототипу префикс функции. Дополнив наш пример, мы можем выбрать что мы хотим показать в текущем прототипе, чтобы сохранить свои уровни доступа:

 

Обратите внимание, как функции Stop и Go будут защищены от возвращенного объекта в связи с нахождением за пределами области видимости возвращаемого объекта. Поскольку JavaScript изначально поддерживает прототипное наследование, нет необходимости переписывать базовые элементы(или особенности или черты).

# Шаблон Наблюдатель  (Observer)

 Бывает  так, что одна часть приложения изменяется, а другие части нуждаются в обновлении. В Angular js, если $scope объекта обновляется, событие может быть запущено для  уведомления другого компонента.  Шаблон Observer включает в себя то, что, если объект изменен, то он передает (broadcasts) зависимым объектам, что изменение произошло.

Другой яркий пример архитектура модель-представление-контроллер (MVC); представление обновляется когда изменяется модель. Одним из преимуществ является разрыв связи представления от модели для уменьшения зависимостей.

Пояснение в схеме: Observer Design Pattern on Wikipedia

 Как показано на схеме UML, необходимые объекты это subject, observer, и concrete. Объект subject содержит ссылки на  concrete observers  для уведомления  любых изменениях. Объект observer  является абстрактным классом, позволяющий concrete observers реализовывать  метод уведомления.

Давайте взглянем на пример AngularJS, который включает в себя  шаблон Observer через управление событиями.

С шаблоном Observer важно различать независимый это объект или subject.

Важно отметить, что, хотя шаблон Observer и предоставляет много преимуществ, но одним из недостатков является значительное падение производительности, так как количество «наблюдателей» (observers) увеличено. Один из самых пользующихся дурной славой наблюдателей являются watchers. В AngularJS мы можем наблюдать (watch) переменные, функции и объекты. Цикл $$digest работает и уведомляет каждого из watchers новыми значениями всякий раз, когда область объекта изменяется.

Мы можем создать наши собственные Subjects и Observers в JavaScript. Давайте посмотрим, как это реализуется:

PUBLISH/SUBSCRIBE

Паттерн Publish/Subscribe использует канал topic/event, который находится между объектами, желающими получать уведомления (Subscribers) и объектом генерации события (Publisher). Эта система событий позволяет коду определить применение конкретных событий, которые могут передать пользовательские аргументы, содержащие значения, необходимые subscriber. Цель –  избежание зависимости между подписчиком  Subscriber и Publisher .

В этом состоит отличие от шаблона Observer так как любой subscriber реализует соответствующий обработчик события чтобы зарегистрировать и получить topic уведомления, передаваемые  publisher.

Многие разработчики выбирают агрегирование (объединение) паттерна publish/subscribe и шаблона «наблюдателя» несмотря на различия. Subscriber в паттерне publish/subscribe уведомляются посредством сообщений, а «наблюдатели» уведомляются с помощью обработчика похожего на subject.

В AngularJS subscriber ‘subscribes’  на событие,  используя  $on (‘event’, callback) , а publisher  ‘publishes’  событие,   используя $emit(‘event’, args) или $broadcast(‘event’, args).

# Шаблон Синглтон  (Singleton)

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

Нахождение вариантов использования Синглтонов сложно для не использовавших их раньше. Одним из примеров является использование в офисном принтере. Допустим в офисе десять человек и все они используют один принтер, десять компьютеров подключены к одному принтеру (экземпляр). Путем совместного использования одного принтера, они делятся одними и те же ресурсами.

 

 

Создание метода — приватность, так как мы не хотим, чтобы клиент получил доступ к нему, однако заметьте, что метод getInstance является публичным. Каждый офисный работник может создать экземпляр принтера взаимодействуя с методом getInstance, вот так:

В AngularJS, синглтоны являются наиболее распространенными, наиболее примечательные из них это services, factories, и providers.

# Заключение

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

Прежде чем создавать какие-либо приложения, вы должны тщательно обдумать каждое действие и как все будет взаимодействовать друг с другом. Изучив Module, Prototype, Observer, и Singleton, вам следует различать эти паттерны и понимать как использовать их.

Источник: scotch.io

Оцените статью
Добавить комментарий