观察者设计模式可以解决什么问题？

Question

例如，我已阅读David Walsh的这篇文章：

// Trigger it!
myElement.dispatchEvent(myEvent);

正如作者在文章结尾所总结的：

使用自定义数据创建和触发自定义事件非常有用。您不仅可以为事件创建自己的命名约定，而且还可以沿途传递自定义数据！

我的理解方式：

不同于从程序外部触发事件，就像上面的示例似乎在滚动页面时一样，它是在程序中的某个特定位置手动调用函数。

我可以看到，这可能是组织程序，设计模式的一种方式，但是我在这里还缺少其他什么吗？

Answer 1

Javascript中的自定义事件是观察者模式的一种实现，其中，侦听器按事件名称分组。

引用Wikipedia：

观察者设计模式可以解决什么问题？

观察者模式解决了以下问题：


应该定义对象之间的一对多依赖关系，而不能使对象紧密耦合。

应确保当一个对象更改状态时，将自动更新不限数量的相关对象。

一个对象应该可以通知其他对象的不限数量。


通过定义一个直接更新依赖对象状态的对象（对象）来定义对象之间的一对多依赖是不灵活的，因为它将对象与特定的依赖对象耦合在一起。紧密耦合的对象很难实现，更改，测试和重用，因为它们引用并知道（如何更新）具有不同接口的许多不同对象。

观察者设计模式描述了什么解决方案？


定义主题和观察者对象。

以便当主题更改状态时，所有注册的观察者都将得到自动通知和更新。


主题的唯一责任是维护观察者列表，并通过调用其update（）操作将状态更改通知他们。   观察者的责任是在一个主题上注册（或注销）自己（以通知状态更改），并在被通知时更新其状态（将其状态与主题的状态同步）。   这使得主题和观察者之间松散耦合。主体和观察者之间没有明确的知识。可以在运行时独立添加和删除观察者。   这种通知-注册交互也称为发布-订阅。

带有自定义事件的松散耦合代码非常灵活，但是如果以非结构化和过多的方式使用它们，流程很快就会变得不透明。

Answer 2

来自MDN About custom events-它们主要用于创建综合事件。

...此类事件通常称为综合事件，而不是浏览器本身触发的事件。

综合事件是围绕浏览器本地事件的跨浏览器包装。它为开发人员提供了更多控制权，并使添加标准本机事件中不存在的额外功能成为可能，例如添加额外的数据（如David Walsh的文章中所建议的）。

合成事件的另一种用法是创建事件的池，因此您可以重用事件，而不必从头开始创建它们。 React is using that method在幕后。

Answer 3

这是一个笼统的解释，但我认为了解事件驱动的体系结构背后的想法很有用。

TL; DR

如果希望某人对程序进行扩展，则可以使用自定义事件，否则根据他们的需要；通常这发生在某种框架级别，您无法预测应用程序的最终行为。

事件具有与之相关的三个部分-定义，触发和附加。

浏览器公开了许多内置事件，例如> git config --type=bool --get-urlmatch http.sslVerify https://gitlab.dev false等，可用于自定义浏览器的行为。在这里，“定义”和“触发”部分由浏览器（开发人员）为您完成。您作为消费者，可以通过向其添加功能来对其进行扩展。

那么，为什么浏览器想到创建一个事件并将其命名为onload？为什么不能叫onload？因为浏览器希望为您提供功能，以使其能够扩展您选择的任何功能；它可以给出的最佳名称是 onload ，因为这就是幕后故事！您可以神奇在程序中任何地方附加它，以修改浏览器的行为-因为浏览器已编程为调用附加到它的任何内容。这种无处不在使它变得超级容易和有用。不能猜到fetchMySuperContent是您想要做的。还有其他人可以做些其他事情。

我想您可以说这也是自定义事件的目的；除了这里的作者是框架开发人员，而消费者是您或我想要扩展它的人。

这是间接功能和关注分离功能的一个很好的例子。

Answer 4

创建自定义事件使您可以访问具有其自己的属性和方法的事件对象。如果不需要使用这些属性或方法，则应调用常规函数，并且不要将其作为自定义事件触发。

以下是事件的文档，用于指定属性和方法： Events in MDN

JavaScript中的自定义事件与仅调用常规函数有何不同？

我的理解方式：

4 个答案:

观察者设计模式可以解决什么问题？

观察者设计模式描述了什么解决方案？