javascript - 为什么我们应该在这里使用 Observer/Pub-Sub 模式？

Question

我正在尝试学习观察者和发布者-订阅者模式。

通过这个简单的例子here

问题:有一个按钮，单击该按钮应该更新计数。

没有任何模式我可以简单地做

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 的实现。

我的问题是使用不会使代码复杂化的模式。我真的很难理解代码到底要解决什么问题。有人可以解释一下这个以及 this.notify 在 jsbin 代码中做了什么吗？

请帮忙

谢谢

Answer 1

不是模式方面的专家，但据我了解，使用像您的示例这样接受单个事件监听器的简单代码，观察者模式肯定是大材小用。

正如上面链接中所解释的:“观察者模式是一种允许元素之间进行通信的简单方法，而无需依赖事件、回调或轮询。观察者模式最好的一点是，被观察的事物不会必须担心什么在观察它或者它有多少观察者。”它基本上允许您轻松附加观察者，而无需修改基本元素代码，因为基本代码实际上不必关心谁在观看它。它只需要宣布它已经做了一些事情(增加了计数器属性)，并且由观察者做出相应的 react 。因此，计数器代码可以独立运行，不需要任何依赖项来运行(因此也更容易测试)。如果您需要对观察者进行更改，则无需触摸计数器代码，也无需承担造成任何副作用的风险。

相比之下，您的示例中的回调代码和计数器彼此紧密相关。如果您需要进行更改，例如使其具有不同的措辞或让计数器值出现在特定元素下，您别无选择，只能触及整个代码块。不过，您的代码示例足够简单，如果这就是它要做的全部事情，那么它应该完全可以使用。

我认为在处理异步代码和 Promises 等内容时更容易理解观察者模式的概念，其中回调/观察者与实现异步代码是分开的