Resize Observer API：监听元素内容框尺寸变化

Resize Observer API：当元素“膨胀”或“瘦身”时，我们的感官神经

各位屏幕前的靓仔靓女们，大家好！我是你们的老朋友，一个在代码世界里摸爬滚打多年的老码农。今天，咱们不聊那些高深莫测的算法，也不谈那些云里雾里的架构，咱们来聊点实际的、接地气儿的——Resize Observer API！

你有没有遇到过这样的场景：网页上的某个元素，例如一个图片、一个文本框，或者一个容器，它的尺寸会随着窗口大小的改变、内容的变化，甚至用户操作而发生改变？🤔 相信我，你肯定遇到过！

而我们这些可怜的程序员，为了让网页在各种情况下都能呈现出最佳效果，就得时刻关注这些元素的尺寸变化。以前，我们只能靠着window.onresize事件，像个勤劳的小蜜蜂一样，不停地监听整个窗口的变化，然后自己手动计算各个元素的新尺寸，再进行相应的调整。

这种方式，就像用锤子砸钉子一样，简单粗暴，但效率不高，而且容易造成性能问题。试想一下，如果你的网页上有十几个，甚至几十个元素需要监听，那window.onresize事件就会像脱缰的野马一样，疯狂地触发，你的浏览器就会变得卡顿不堪，用户体验直线下降。📉

那么，有没有一种更优雅、更高效的方式来监听元素的尺寸变化呢？

答案是肯定的！那就是我们今天的主角——Resize Observer API！

什么是Resize Observer API？

顾名思义，Resize Observer API就是一个“尺寸观察者”。它可以像一个训练有素的侦察兵一样，默默地观察着指定元素的内容框（content box）的尺寸变化，并在尺寸发生变化时，及时通知你。

你可以把它想象成一个非常敏感的触角，只要元素的内容框稍微“膨胀”或“瘦身”，它就能立刻感知到，并把信息传递给你。是不是很神奇？✨

Resize Observer API的优势

相比于传统的window.onresize事件，Resize Observer API具有以下几个显著优势：

性能更佳： Resize Observer API是异步执行的，它不会阻塞主线程，因此不会影响网页的渲染性能。
更精确： Resize Observer API只会监听指定元素的尺寸变化，而不是整个窗口的变化，因此可以更精确地捕捉到目标元素的尺寸变化。
更灵活： Resize Observer API可以监听多个元素的尺寸变化，而且可以根据需要选择不同的观察模式。
更优雅： 使用Resize Observer API的代码更加简洁、易读，更符合现代Web开发的理念。

总而言之，Resize Observer API就像一把锋利的瑞士军刀，可以帮助我们更高效、更优雅地处理元素尺寸变化的问题。

Resize Observer API的使用方法

接下来，我们就来一起学习一下Resize Observer API的使用方法。

1. 创建一个ResizeObserver实例

首先，我们需要创建一个ResizeObserver实例。这个实例就像我们的侦察兵，负责监听元素的尺寸变化。

const resizeObserver = new ResizeObserver(entries => {
  // 当被观察元素的尺寸发生变化时，会执行这里的回调函数
  console.log("元素尺寸发生变化！", entries);
});

在创建ResizeObserver实例时，我们需要传入一个回调函数。这个回调函数会在被观察元素的尺寸发生变化时被调用。回调函数接收一个entries参数，它是一个ResizeObserverEntry对象的数组，每个ResizeObserverEntry对象包含了关于一个被观察元素的尺寸变化信息。

2. 开始观察一个元素

创建好ResizeObserver实例后，我们就可以开始观察一个或多个元素了。

const element = document.getElementById("my-element");
resizeObserver.observe(element);

observe()方法接收一个DOM元素作为参数，表示我们要开始观察这个元素的尺寸变化。

3. 处理尺寸变化

当被观察元素的尺寸发生变化时，ResizeObserver实例的回调函数会被调用。我们可以在回调函数中获取元素的最新尺寸，并进行相应的处理。

const resizeObserver = new ResizeObserver(entries => {
  for (let entry of entries) {
    const width = entry.contentRect.width;
    const height = entry.contentRect.height;

    console.log("元素的新宽度：", width);
    console.log("元素的新高度：", height);

    // 在这里进行相应的处理，例如调整布局、更新UI等
  }
});

在回调函数中，我们可以通过entry.contentRect属性获取元素的最新尺寸。contentRect属性是一个DOMRectReadOnly对象，包含了元素的宽度、高度、x坐标、y坐标等信息。

4. 停止观察一个元素

当我们不再需要观察某个元素的尺寸变化时，可以调用unobserve()方法来停止观察。

resizeObserver.unobserve(element);

5. 停止观察所有元素

如果我们想要停止观察所有元素，可以调用disconnect()方法。

resizeObserver.disconnect();

ResizeObserverEntry对象

在回调函数中，我们接收到一个entries参数，它是一个ResizeObserverEntry对象的数组。每个ResizeObserverEntry对象包含了关于一个被观察元素的尺寸变化信息。

ResizeObserverEntry对象具有以下属性：

属性	类型	描述
`contentRect`	`DOMRectReadOnly`	元素的content box的尺寸信息，包括宽度、高度、x坐标、y坐标等。