js ResizeObserver作用

ResizeObserver 是一个 JavaScript API，它允许开发者观察 DOM 元素尺寸的变化，而不需要显式地进行定时轮询。这对于实现响应式布局、动态调整元素大小或者其他依赖于元素尺寸变化的功能非常有用。

主要用途

1. 响应式布局：

   • 当页面中的元素尺寸发生变化时，可以自动调整布局或者重新计算样式。

2. 懒加载：

   • 当图片或其他元素进入可视区域时，可以延迟加载这些元素，从而提高页面加载速度和用户体验。

3. 广告管理：

   • 根据广告容器的尺寸变化来调整广告的大小或位置。

4. 动态调整：

   • 根据父容器的大小变化来调整子元素的尺寸。

使用方法

ResizeObserver 接受一个回调函数作为构造函数参数，当被观察元素的大小发生变化时，这个回调函数会被调用。回调函数接收到一个事件队列，每个事件描述了一个或多个元素的大小变化情况。

示例代码

下面是一个简单的 ResizeObserver 使用示例：

const ro = new ResizeObserver((entries) => {
  entries.forEach((entry) => {
    console.log(`Element's new size is ${entry.contentRect.width}px wide!`);
    // 这里可以根据 entry.contentRect 的变化来调整样式或执行其他逻辑
  });
});

const observedDiv = document.querySelector('#myDiv');
ro.observe(observedDiv);

// 当不再需要观察时，可以取消观察
ro.unobserve(observedDiv);

// 清理 ResizeObserver 实例
ro.disconnect();

在这个例子中，我们创建了一个 ResizeObserver 实例，并监听一个名为 myDiv 的元素。当这个元素的尺寸发生变化时，控制台会打印出新的宽度信息。

注意事项

• ResizeObserver 可以同时观察多个元素，可以通过多次调用 observe 方法来添加更多的元素。
• 当不再需要观察某个元素时，应该调用 unobserve 方法来停止观察，以避免内存泄漏。
• 如果不再需要任何观察器，可以调用 disconnect 方法来彻底清理观察器实例。
• ResizeObserver 的回调可能会频繁触发，特别是在元素尺寸快速变化的情况下，因此需要注意性能优化。

ResizeObserver 是一个非常强大的工具，尤其适合现代 Web 应用中需要动态调整布局或样式的场景。如果你的应用需要根据元素尺寸的变化来进行调整，ResizeObserver 可以极大地简化这一过程。