js ResizeObserver

`ResizeObserver` 是一个 JavaScript API，用于监听元素的大小变化。它可以用来替代传统的 `resize` 事件监听，更高效地检测元素大小的变化。

使用 `ResizeObserver` 需要以下步骤：

1. 创建一个 `ResizeObserver` 实例，并传入一个回调函数作为参数。

const observer = new ResizeObserver(entries => {
  // 在回调函数中处理元素大小变化的逻辑
});

2. 使用 `observe` 方法开始观察一个或多个目标元素。

const targetElement = document.querySelector('.target-element');
observer.observe(targetElement);

3. 在回调函数中处理元素大小变化的逻辑。

const observer = new ResizeObserver(entries => {
  for (const entry of entries) {
    const { width, height } = entry.contentRect;
    // 处理元素大小变化的逻辑
    console.log('Element resized: ', width, height);
  }
});

4. 当不再需要观察目标元素时，使用 `unobserve` 方法停止观察。

observer.unobserve(targetElement);

请注意，`ResizeObserver` API 目前在主流浏览器中的支持性还有限，所以在使用之前，请先检查浏览器的兼容性并提供相应的降级策略。