В двух словах о паттернах наблюдателя
Ваш JavaScript ООП настолько хорош, насколько хорош ваш шаблон
Когда дело доходит до объектно-ориентированного программирования, ведется много разговоров о любви и ненависти. Не поймите меня неправильно, ООП имеет свои преимущества и особенности, но, в конце концов, оно настолько хорошо, насколько хороши ваши шаблоны проектирования.
Многие из нас знакомятся с ООП только на поверхностном уровне. Многие из нас редко выходят за рамки простых основ создания объектов и использования наследования для работы. ООП, выходящее за рамки наследования, в кругах самоучок почти неслыханно, если только разработчик не проявил инициативу и не вышел за рамки обычного набора руководств YouTube.
В этой части мы рассмотрим шаблон проектирования ООП, называемый шаблоном наблюдателя, который может помочь вам думать о своем коде как о логической и структурированной части идеи, а не просто как о чем-то с прикрепленными к ней методами.
Вкратце о шаблонах проектирования
Паттерны проектирования - это систематизированные методологии мышления. Это не совсем язык, но он применим ко всем языкам, в которых включена определенная структурная функция.
Это означает, что вместо того, чтобы просто создавать код на основе стандартного и, казалось бы, очевидного пути, шаблоны проектирования заставляют вас сделать шаг назад, от кода, к части процесса создания кода, основанной на логическом мышлении.
В результате ваш мыслительный процесс может относиться к различным режимам логики и их реализации в зависимости от контекста, текущих и будущих требований.
И с этими знаниями и способностями разработчик может сделать код менее запутанным и более структурированным по своей природе. Это также позволяет коду быть гибким, а не ломким при внесении изменений и поворотов в требования.
Вот почему мы используем шаблоны проектирования и то, как они могут помочь нам работать намного эффективнее, так же, как они могут помочь нам с нашей командной связностью кода и способностями связного построения.
Один из этих паттернов - паттерн наблюдателя.
Как работает паттерн наблюдателя
Паттерн наблюдателя состоит из трех компонентов - «субъекта», наблюдателя и объектов.
Взаимосвязь между этими тремя ингредиентами работает следующим образом: воспринимайте объект как центральную часть кода, которая в конечном итоге контролирует работу всего. Наблюдатель действует как список хранения для всех соответствующих объектов.
Объекты подписываются на тему и ждут, пока субъект ее вызовет. Объекты отменяются, когда они больше не нужны.
Почему это хорошо?
Представьте, что вы хотите обновить набор вещей, когда что-то обновляется из определенного источника. Однако вы не хотите вызывать свой объект, функцию или метод каждый раз, когда что-то происходит.
Представьте, что у вас есть около пятидесяти таких объектов / функций / методов.
Шаблон наблюдателя позволяет объединять и вызывать все, что угодно, из одного источника.
Вот и все в двух словах.
Рецепт паттерна наблюдателя для JavaScript
Шаблон наблюдателя в JavaScript очень прост. Вам просто нужно настроить subject функцию и расширить ее с помощью прототипов.
Если вы вкратце о том, как работают прототипы, вот краткое руководство, которое я написал ранее по этой теме.
Короче говоря, все в JavaScript является объектом, и prototypes позволяет создавать расширения с помощью methods
Чтобы настроить шаблон наблюдателя в JavaScript, вам необходимо создать тему и три метода, прикрепленных к ней. Этими тремя методами являются subscribe, unsubscribe и fire.
subscribe и unsubscribe позволяют вам присоединять и отсоединять функции, которые вы хотите в наблюдаемом списке удержания. fire - это вызов метода, который вы используете для запуска ваших функций.
Вот код:
function Subject(){
this.observers = []; //array of observer functions
}
А теперь о methods:
Subject.prototype = {
subscribe: function(fn)
{
this.observers.push(fn)
},
unsubscribe: function(fnToRemove)
{
this.observers = this.observers.filter( fn => {
if (fn != fnToRemove)
return fn
})
},
fire: function()
{
this.observers.forEach( fn => {
fn.call()
})
}}
Вот и все.
Теперь все, что вам нужно сделать, это создать свои функции, а затем подписать их на наблюдаемый список. Вот несколько примеров функций:
function ObserverTest(){
console.log("observer test works!")
}
function AnotherFunction(){
console.log("it works again")
}
Чтобы подписаться, обязательно создайте объект new Sujbect() для создания экземпляра и содержания вашего списка.
Используя метод subscribe, который мы установили ранее, добавьте функцию в качестве параметра в subscribe()
Теперь мы можем использовать fire() на subject для одновременного запуска всех наших функций.
//subscribing the functions const subject = new Subject(); subject.subscribe(ObserverTest) subject.subscribe(AnotherFunction) //runing all the subscriptions once subject.fire()
Паттерн наблюдателя в реальной жизни
Вы, должно быть, думаете, где мы можем использовать это в реальной жизни?
Шаблон наблюдателя на самом деле довольно популярен, и из-за того, что JavaScript тесно связан с визуальными интерфейсами, шаблон наблюдателя часто реализуется для координации обновления представлений.
Это означает, что ваши представления могут быть разбиты на составные части и обновляться только при необходимости.
С шаблоном наблюдателя он позволяет разбить ваш код на управляемые части и использовать повторно.
Как?
Представьте себе компонент представления, который вы хотите повторно использовать на нескольких страницах. Однако вы хотите кодировать его только один раз, и в зависимости от страницы он может принимать данные из разных источников.
Как сохранить их отдельно и изолированно, но при этом использовать повторно?
Подписывая одно и то же представление компонентов на разные предметы, вы можете добиться этого эффекта.
В дополнение к этому, субъект может иметь несколько компонентов представления, которые он координирует, и отправлять обновления за один вызов, вместо того, чтобы обновлять их по отдельности, когда что-то меняется.
Последние мысли
Когда дело доходит до повторного использования и координации кода, шаблоны наблюдателей являются хорошим кандидатом в JavaScript.
Смысл паттерна наблюдателя состоит в том, чтобы спровоцировать изменение в одном призыве, а не во многих. В результате он сокращает накладные расходы на кодирование и вызов, и, следовательно, помогает вам создавать код, который по своей природе гораздо более сжат.
Вот и все.
Спасибо за чтение. Надеюсь, вы нашли эту статью легкой для понимания и полезной.
