Почему мы должны использовать шаблон Observer/Pub-Sub здесь?

Question

Я пытаюсь изучить шаблон наблюдателя и подписчика издателя.

пришел через этот простой пример here

Проблема: Существует кнопка и OnClick кнопки следует обновляя счетчик.

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

window.onload = function() { 
 
    var container = document.querySelector('.container'); 
 
    var count = 0; 
 
    container.querySelector('#click').addEventListener('click', function() { 
 
    count = +document.querySelector("#count").innerHTML; 
 
    count++; 
 
    document.querySelector("#count").innerHTML = count; 
 
    }); 
 
}

<div class="container"> 
 
    <input type="button" id="click" value="click">Total Counts: <span id="count">0</span> 
 
</div>

В приведенной выше ссылке, которую я разделяемый о шаблоне наблюдателя имеет реализацию для того же с помощью шаблона наблюдателя jsbin

Мой вопрос здесь, это использование шаблона, не усложняющего код. У меня действительно плохое понимание того, что именно пытается решить код. Может кто-нибудь объяснить это и что это такое. Не пытайтесь делать в коде jsbin.

Пожалуйста, помогите

Благодарности

Answer 1

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

Как описано в вашей ссылке выше: «Шаблон наблюдателя - это простой способ разрешить связь между элементами без необходимости полагаться на события, обратные вызовы или опрос. Лучшая вещь в шаблоне наблюдателя заключается в том, что наблюдаемая вещь не нужно беспокоиться о том, что это наблюдает или сколько наблюдателей у него есть ». Это в основном позволяет легко подключать наблюдателей, не изменяя код базового элемента, потому что базовому коду действительно не нужно заботиться о том, кто его наблюдает. Он просто должен объявить, что он что-то сделал (увеличил свойство счетчика), и соответствующие наблюдатели реагируют соответствующим образом. Из-за этого код счетчика может стоять на своем собственном и не иметь каких-либо зависимостей для запуска (таким образом, упрощая тестирование). Если вам нужно внести изменения в своих наблюдателей, вам не придется прикасаться к коду счетчика и рисковать причинами каких-либо побочных эффектов.

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

Я думаю, что это легче понять концепцию шаблона наблюдателя при работе с материалом как асинхронный код и Promises, где обратные вызовы/наблюдатели стали отдельно от реализующей коды асинхронного

Answer 2

Во-первыхов, убедитесь, что мы на ту же страницу относительно терминологии в шаблоне наблюдателя (OP): Observer объект, Subject (или Observee) объект, Subject.addObserver(...) способ, и Subject.notify(...) способ.

ОК, теперь,

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

Нет, вы на самом деле с помощью OP в неявном виде. Когда Вы писали:

container.querySelector('#click') 

Это возвращает ссылку на эту кнопку, я называю это button:

var button = container.querySelector('#click'); 

Тогда вызов button.addEventListener(...) в основном аналогия Subject.addObserver(...). Это означает, что ваш объект button на самом деле является Subject в OP. Вызов Subject.notify(...) неявно обрабатывается механизмом JavaScript. И ваша встроенная функция для использования события click на самом деле является Observer.

Главное отличие вашего кода от кода jarrettmeyer.com заключается в вопросе: кто является Subject? В jarrettmeyer.com Subject - это не кнопка, а отдельный объект: объект Counter. Это дает некоторые преимущества:

1. Subject можно связать с множеством кнопок, например, jarrettmeyer может написать: $("#anotherButton").on("click", function() { counter.increment(); });

2. Subject может легко поддерживать независимо состояние и уведомления независимо данные в Observer. В примере jarrettmeyer эти данные/информация - это просто номер count. Действительно, в вашем примере ни одно состояние/информация о кнопке (кроме того факта, что она только что была нажата) уведомляется, так как номер count поддерживается в вашем span, который относится к деталям реализации вашего Observer и, следовательно, не связан с OP ,

Answer 3

Да, вы правы. addEventListener или jQuery .on() мог бы делать то же, что и Observer. Они достаточно хороши для большинства интерфейсов. Но в тех случаях, после использования (бэкенд/абстракция), шаблон наблюдатель лучше:

1. Событие прислушиваются не относится к элементам DOM (например, JS мутации объекта)

2. Вы хотели бы лучше контроль над removeEventListener (например, несколько анонимных функций обратного вызова, связанных с типом события, вы хотели бы переместить одну из них)

.notify метод в данном примере производится в цикле все обратного вызова функции в массиве реестра и попытайтесь выполнить все из них.

Вот Codepen, чтобы показать, как помощь наблюдателя в реальном мире.

А вот простая реализация наблюдатель, когда я изучаю шаблон Observer:

var App = function() { 
    // This array will store all the subscribers. 
    this.subscribers = []; 
} 
// Subscribe, unsubscribe and publish are three base methods in this pattern 
App.prototype.subscribe = function(subscriber) { 
    this.subscribers.push(subscriber); 
} 
App.prototype.unsubscribe = function(subscriber) { 
    for (var i = 0; i < this.subscribers.length; i++) { 
    if (this.subscribers[i] === subscriber) { 
     this.subscribers.splice(i, 1); 
    } 
    } 
} 
App.prototype.publish = function(message) { 
    for (var i = 0; i < this.subscribers.length; i++) { 
    console.log(this.subscribers[i] + ' got ' + message + '!'); 
    } 
} 
// Testing code. 
var myApp = new App(); 
myApp.subscribe('Timmy'); 
myApp.subscribe('Tommy'); 
myApp.publish('a new magazine'); // Both Timmy & Tommy got the new magazine 
myApp.unsubscribe('Timmy'); 
myApp.publish('a new book'); // Now only Tommy got the new book 

прикрепил Codepen для справки.