resize事件对比ResizeObserver事件

前言

前端开发离不开元素缩放事件，当浏览器窗口变化时，为了适用内容我们可能需要对元素的大小进行处理，也有可能对位置进行重定位。除此之外某个操作也有可能需要我们手动改变元素的尺寸和定位，这个时候我们也期望能够捕获到这些变化并进行响应处理。

resize event

最常见的的处理方式就是浏览器自带的事件机制，利用窗口的resize事件，我们能够很容易的监听到窗口的变化，并对此做出响应。但是这个resize事件也有局限性的地方，就是不能够对某个元素进行单独监听，例如我们手动对改动某个元素的样式时，resize事件是不能捕获到这个变化操作的。

ResizeObserver

这个时候就需要新特性ResizeObserver API上场了。

ResizeObserver的使用非常简单，大体上分为以下几个步骤：

• 通过new实例化一个resizeObserver对象
• 在实例化的入参中传入监听事件的实际操作
• 调用实例的observe方法，该方法入参接收一个元素，这里可以多次调用该方法，即同时监听多个元素
• 最后在需要的时候调用实例的unobserve方法销毁某个元素的监听事件
• 如果需要去除所有，请使用disconnect方法

结论

在我刚刚接触前端的时候，因为要考虑浏览器的兼容性，对于这种单个元素的resize事件，我们的方案就是针对性的在改变的源头处调用对应处理的事件，显然这样处理还是有很大的，尤其在响应式开发这一块。

有了ResizeObserver，我们在处理响应式布局这一块的需求时就轻松很多了。

当然，如果你需要考虑老版本的兼容性问题，可以在使用过程中引入这个resize-observer-polyfillnpm包，看介绍会发现实现原理是借助于MutationObserver这个API。

最后补充一个链接，上面讲述了使用ResizeObserver的几个注意点和最佳开发实践，想要多了解这个API的可以去参考下。