Introduction
在前端开发中，我们常常会需要对某个元素的大小变化做出相应的处理。这个过程需要使用 ResizeObserver API 来监听元素大小的变化。然而，这个 API 的使用并不是很方便，它需要手动处理一些回调函数等问题。为了方便使用这个 API，我们可以使用一个 npm 包：eventx-resizeobserver-event 来辅助我们处理这个问题。
Install
我们可以使用 npm 来安装 eventx-resizeobserver-event 包，命令如下：
npm install eventx-resizeobserver-event --save
安装完成后，在使用时需要引入该包：
import ResizeObserverEvent from 'eventx-resizeobserver-event'
Usage
eventx-resizeobserver-event 提供了一种灵活的方式来监听元素大小的变化。它通过类的继承实现了 ResizeObserver API 的事件监听机制，同时提供了各种方法来方便地处理元素大小变化的问题。
直接监听元素大小变化
我们可以直接使用 ResizeObserverEvent 类来监听元素的大小变化。具体实现如下：
const observer = new ResizeObserverEvent()
observer.observe(document.body, () => {
console.log('Element resized!')
})在这个例子中，我们创建了一个ResizeObserverEvent 对象，并使用 observe 方法来监听 document.body 元素的大小变化。当元素大小变化时，我们将打印一条调试信息。
使用事件订阅
ResizeObserverEvent 还实现了一个事件订阅机制，可以使用 on() 方法来注册回调函数来处理元素大小变化事件。具体实现如下：
const observer = new ResizeObserverEvent()
observer.on('resize', (event) => {
console.log(event)
})
observer.observe(document.body)在这个例子中，我们注册了一个回调函数来处理 resize 事件。当元素大小变化时，会触发这个事件，并且执行我们注册的回调函数。
使用事件委托
有些情况下，我们需要监听很多元素的大小变化，这时候一一注册回调函数就不现实了。这个时候，我们可以使用事件委托机制，将所有元素的事件委托给一个元素来处理同一个事件。具体实现如下：
const observer = new ResizeObserverEvent()
observer.delegate('click', '.resize-elements', (event) => {
console.log(event.target)
})
observer.observe(document.body)在这个例子中，我们注册了一个委托事件委托机制来处理所有 .resize-elements 类的元素的大小变化事件。当元素大小变化时，会触发这个事件，并且执行我们注册的回调函数。
Conclusion
eventx-resizeobserver-event 是一个非常方便的工具，可以让我们更容易地监听元素大小的变化。在实际开发中，我们经常会遇到需要监听元素大小变化的场景。使用这个包可以让我们减少很多繁琐的工作，并且使代码更加简洁和易于维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065b43c6eb7e50355dbde2