JS `ResizeObserver`：监听元素尺寸变化，实现响应式组件

各位观众老爷，大家好！欢迎来到今天的“JS ResizeObserver：监听元素尺寸变化，实现响应式组件”专场。今天咱们不讲那些虚头巴脑的理论，直接上干货，用最接地气的方式，把ResizeObserver这玩意儿给安排明白了！

一、啥是ResizeObserver？（别慌，不是外星科技）

先别被这高大上的名字吓着，ResizeObserver其实就是个“元素尺寸变化监听器”。简单来说，就是你给它指定一个或者几个元素，它就盯着这些元素，一旦这些元素的尺寸（宽、高）发生了变化，它就立马通知你，然后你就可以根据新的尺寸，干一些你想干的事儿，比如重新排版、调整字体大小、甚至跳个广场舞（误）。

你可以把它想象成一个尽职尽责的门卫，时刻盯着你家的门（元素），一旦有人想偷偷摸摸地改变你家的房子的结构（尺寸），它就立刻敲锣打鼓地通知你！

二、ResizeObserver能干啥？（应用场景大揭秘）

ResizeObserver的应用场景那可真是相当广泛，只要你想根据元素的尺寸变化做点啥，它都能派上用场。

响应式布局： 这是ResizeObserver最常见的应用场景。比如，你想让一个容器里的文字根据容器的宽度自动调整字体大小，或者你想让一个图片在不同屏幕尺寸下显示不同的版本，ResizeObserver都能帮你轻松搞定。
自定义滚动条： 某些情况下，你想自己实现一个滚动条，而不是使用浏览器默认的滚动条。ResizeObserver可以监听滚动容器的尺寸变化，从而调整滚动条的长度和位置。
图表和数据可视化： 图表和数据可视化组件往往需要根据容器的尺寸进行调整，以保证图表能够完整地显示，并且具有良好的可读性。ResizeObserver可以帮助你实现这一点。
第三方组件集成： 有时候，你想在自己的项目中集成一些第三方组件，但是这些组件可能没有很好的响应式支持。ResizeObserver可以帮助你监听这些组件的尺寸变化，然后手动调整它们的样式。
性能优化： 传统的resize事件会频繁触发，导致性能问题。ResizeObserver采用了更高效的算法，只有在元素尺寸真正发生变化时才会触发回调，从而避免了不必要的性能开销。

总而言之，只要你觉得需要根据元素的尺寸变化做点什么，都可以考虑使用ResizeObserver。

三、ResizeObserver怎么用？（代码实战演练）

光说不练假把式，接下来咱们直接上代码，看看ResizeObserver到底怎么用。

3.1 创建ResizeObserver实例

首先，你需要创建一个ResizeObserver的实例。

const observer = new ResizeObserver(entries => {
  // 回调函数，当被监听的元素尺寸发生变化时会被调用
  console.log("元素尺寸发生变化了！");
  console.log(entries);
});

这里的entries是一个数组，包含了所有被监听的元素的信息，每个元素都是一个ResizeObserverEntry对象。

3.2 监听元素

创建好ResizeObserver实例之后，你需要告诉它你想监听哪些元素。

const element = document.getElementById("myElement");
observer.observe(element);

这里的element就是你想监听的元素，可以是任何DOM元素。

3.3 处理尺寸变化

当被监听的元素尺寸发生变化时，ResizeObserver的回调函数会被调用。你可以在回调函数中获取元素的新的尺寸，并根据新的尺寸做一些你想做的事情。

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

    console.log(`元素的新宽度：${width}，新高度：${height}`);

    // 这里可以根据新的尺寸做一些事情，比如调整字体大小、重新排版等等
    if (width < 500) {
      element.style.fontSize = "12px";
    } else {
      element.style.fontSize = "16px";
    }
  }
});

const element = document.getElementById("myElement");
observer.observe(element);

在这个例子中，我们获取了元素的新宽度和新高度，然后根据宽度调整了元素的字体大小。

3.4 停止监听

当你不再需要监听某个元素时，可以停止监听。

observer.unobserve(element);

如果你想停止监听所有元素，可以调用disconnect方法。

observer.disconnect();

3.5 完整示例

下面是一个完整的示例，展示了如何使用ResizeObserver监听一个元素的尺寸变化，并根据新的尺寸调整元素的字体大小。

<!DOCTYPE html>
<html>
<head>
  <title>ResizeObserver Example</title>
  <style>
    #myElement {
      width: 300px;
      height: 200px;
      background-color: #f0f0f0;
      padding: 20px;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <div id="myElement">
    这是一个测试元素，它的字体大小会根据容器的宽度自动调整。
  </div>

  <script>
    const observer = new ResizeObserver(entries => {
      for (const entry of entries) {
        const width = entry.contentRect.width;
        const element = entry.target;

        if (width < 300) {
          element.style.fontSize = "12px";
        } else if (width < 500) {
          element.style.fontSize = "14px";
        } else {
          element.style.fontSize = "16px";
        }
      }
    });

    const element = document.getElementById("myElement");
    observer.observe(element);
  </script>
</body>
</html>

你可以复制这段代码到你的编辑器中，然后打开浏览器查看效果。

四、ResizeObserverEntry对象（了解一下，不吃亏）

在ResizeObserver的回调函数中，你会收到一个entries数组，每个元素都是一个ResizeObserverEntry对象。这个对象包含了关于被监听元素的尺寸信息。

ResizeObserverEntry对象有以下几个属性：

属性	描述
`target`	被监听的DOM元素。
`contentRect`	一个`DOMRectReadOnly`对象，包含了元素的content box的大小信息，包括`width`、`height`、`top`、`left`、`bottom`、`right`等属性。 content box指的是元素的内容区域，不包括padding、border和margin。
`borderBoxSize`	一个`ResizeObserverSize`对象的数组，包含了元素的border box的大小信息。 `ResizeObserverSize`有`blockSize`和`inlineSize`属性，对应于高度和宽度。在大多数情况下，`borderBoxSize`数组只有一个元素。但是，在一些特殊情况下，比如当元素使用了`writing-mode`属性时，`borderBoxSize`数组可能会有多个元素。
`contentBoxSize`	一个`ResizeObserverSize`对象的数组，包含了元素的content box的大小信息。 `ResizeObserverSize`有`blockSize`和`inlineSize`属性，对应于高度和宽度。在大多数情况下，`contentBoxSize`数组只有一个元素。但是，在一些特殊情况下，比如当元素使用了`writing-mode`属性时，`contentBoxSize`数组可能会有多个元素。
`devicePixelContentBoxSize`	一个`ResizeObserverSize`对象的数组，包含了元素的content box的大小信息，以设备像素为单位。 `ResizeObserverSize`有`blockSize`和`inlineSize`属性，对应于高度和宽度。在大多数情况下，`devicePixelContentBoxSize`数组只有一个元素。但是，在一些特殊情况下，比如当元素使用了`writing-mode`属性时，`devicePixelContentBoxSize`数组可能会有多个元素。这个属性在需要精确控制像素级别的大小时非常有用。

其中，contentRect属性是最常用的，它包含了元素的content box的大小信息。

五、ResizeObserver的坑和注意事项（避坑指南）

ResizeObserver虽然好用，但是也有一些坑需要注意。

循环依赖： 在ResizeObserver的回调函数中，如果你修改了元素的尺寸，可能会导致ResizeObserver再次触发回调，从而造成循环依赖。为了避免这种情况，你应该尽量避免在回调函数中直接修改元素的尺寸。如果你必须修改元素的尺寸，可以使用requestAnimationFrame或者setTimeout来延迟修改。
性能问题： 如果你监听了大量的元素，或者回调函数中的逻辑比较复杂，可能会导致性能问题。为了避免这种情况，你应该尽量减少监听的元素数量，并且优化回调函数中的逻辑。
浏览器兼容性： ResizeObserver的兼容性还不是很好，在一些老版本的浏览器中可能无法使用。在使用ResizeObserver之前，你应该先检查浏览器的兼容性，或者使用polyfill。目前，主流浏览器都支持ResizeObserver，包括Chrome、Firefox、Safari和Edge。但是，IE浏览器不支持ResizeObserver。

六、ResizeObserver与`window.resize`事件的对比（知己知彼，百战不殆）

你可能会问，既然有window.resize事件，为什么还需要ResizeObserver？它们有什么区别？

特性	`window.resize`事件	ResizeObserver
监听对象	只能监听`window`对象的尺寸变化。	可以监听任何DOM元素的尺寸变化。
触发时机	当浏览器窗口的尺寸发生变化时触发。	当被监听的DOM元素的尺寸发生变化时触发。
触发频率	频繁触发，可能会导致性能问题。	采用更高效的算法，只有在元素尺寸真正发生变化时才会触发回调，从而避免了不必要的性能开销。
信息	只能获取窗口的尺寸信息。	可以获取被监听元素的详细尺寸信息，包括content box、border box等。
应用场景	适用于需要监听整个窗口尺寸变化的场景，比如响应式布局。	适用于需要监听单个DOM元素尺寸变化的场景，比如自定义滚动条、图表和数据可视化组件等。
性能	可能存在性能问题，需要进行节流或防抖处理。	性能更好，可以避免不必要的性能开销。
总结	`window.resize`事件更适合全局性的尺寸变化监听，而ResizeObserver更适合精细化的元素尺寸变化监听。

总而言之，window.resize事件和ResizeObserver各有优缺点，你需要根据具体的应用场景选择合适的方案。

七、实战案例：响应式图片组件（手把手教你做）

接下来，咱们来做一个实战案例，展示如何使用ResizeObserver实现一个响应式图片组件。

这个组件的功能是：根据图片的容器的宽度，自动选择合适的图片版本。

<!DOCTYPE html>
<html>
<head>
  <title>Responsive Image Component</title>
  <style>
    .responsive-image-container {
      width: 100%;
      max-width: 600px;
    }

    .responsive-image {
      width: 100%;
      display: block;
    }
  </style>
</head>
<body>
  <div class="responsive-image-container">
    <img class="responsive-image" src="" alt="Responsive Image">
  </div>

  <script>
    const imageContainer = document.querySelector(".responsive-image-container");
    const image = document.querySelector(".responsive-image");

    const imageUrls = {
      small: "small.jpg", // 宽度小于300px时使用的图片
      medium: "medium.jpg", // 宽度在300px到500px之间时使用的图片
      large: "large.jpg" // 宽度大于500px时使用的图片
    };

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

        let imageUrl = imageUrls.large; // 默认使用大图

        if (width < 300) {
          imageUrl = imageUrls.small;
        } else if (width < 500) {
          imageUrl = imageUrls.medium;
        }

        image.src = imageUrl;
      }
    });

    observer.observe(imageContainer);
  </script>
</body>
</html>

在这个例子中，我们首先定义了一个responsive-image-container容器和一个responsive-image图片元素。然后，我们定义了一个imageUrls对象，包含了不同尺寸的图片URL。

接下来，我们创建了一个ResizeObserver实例，监听responsive-image-container的尺寸变化。在回调函数中，我们根据容器的宽度选择合适的图片URL，并更新responsive-image的src属性。

这样，我们就实现了一个简单的响应式图片组件。

注意： 你需要准备small.jpg、medium.jpg和large.jpg这三个图片文件，并将它们放在与HTML文件相同的目录下。

八、总结（划重点啦！）

今天咱们深入浅出地学习了ResizeObserver，从概念到应用，从代码到实战，相信大家对ResizeObserver都有了更深入的了解。

ResizeObserver是一个强大的工具，可以监听元素的尺寸变化，并根据新的尺寸做一些你想做的事情。
ResizeObserver的应用场景非常广泛，包括响应式布局、自定义滚动条、图表和数据可视化组件等。
使用ResizeObserver时需要注意循环依赖、性能问题和浏览器兼容性。
ResizeObserver与window.resize事件各有优缺点，你需要根据具体的应用场景选择合适的方案。

希望今天的讲座能够帮助大家更好地理解和使用ResizeObserver，并在实际项目中发挥它的作用。

感谢大家的观看！我们下期再见！ (挥手告别)