每次调用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):
感谢您的阅读。 提出建议,评论,想法:)