每次调用addEventListener()方法时，都会将指定的EventListener兼容对象添加到事件侦听器列表中，以用于在其上调用的EventTarget上的指定事件类型。 事件目标可以是文档中的Element，Document本身，Window或任何其他支持事件的对象（例如XMLHttpRequest）。
从该描述中，我们可能会发现，每次将window.addEventListener('resize', callback)到body元素对象时，都会在resize事件侦听器列表中添加。
在React中，您可能会经常看到类似的方法：
componentDidMount() {
window.addEventListener('resize', this .handleResize)
}
componentWillUnmount() {
window.removeEventListener('resize', this .handleResize)
}
它可以工作，但是正如我们前面提到的，调整大小事件列表将随您重用该组件而增长。 最终，您将获得如下照片：
Chrome DevTools在主线程上显示活动图表。
看起来不好，我会说。 它可能导致您什么？ 首先，它很难调试并且代码不可扩展。 如果在每次调整大小事件触发时需要做些事情怎么办？ 会很难吧？ 您需要转到正在监听resize事件的每个组件并进行更改。 其次，这可能会导致您表现不佳。
让我们改善
我们需要什么？
- 一个调整大小的事件侦听器
- 每个组件应有可能在必要时监听调整大小事件，并且在卸载组件时不应监听
听起来像“发布/订阅”模式可能在这里有所帮助。
这是系统中的对象可以订阅其他对象的位置，并在发生感兴趣的事件时通知它们。 〜 阿迪·奥斯曼尼
让我们创建一个对象，我们可以在其中订阅，取消订阅和发布：
看看Publish / Subscribe UMD软件包以获得更好的用法：
然后，我们需要有一个地方，我们可以监听调整大小事件并在事件触发时发布给每个订阅者。
首先，让我们创建一个将在应用程序之间共享的全局对象，并设置resizeEvent属性。
DOM准备就绪后，监听窗口事件。
因此，我们创建了订阅者/发布者，在整个应用程序中的一个地方监听调整大小的事件，并在事件触发时发布给每个订阅者。 剩下什么？ 好的，让我们从组件中订阅事件。
而已 ：）
您可以对每个窗口事件侦听器使用subPub。 结果，我们有了清晰的窗口调整大小事件侦听器列表，并且代码更具可伸缩性。
在此处找到完整的代码示例（页面Resize_SubPub）：
感谢您的阅读。 提出建议，评论，想法：)
如果您喜欢，拍手，在 medium ， twitter ， github 上关注我 ， 与您的朋友分享 ✌️
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
