【JS】1684- 重学 JavaScript API - Resize Observer API

pingan8787

发布于 2023-09-01 10:30:19

3760

发布于 2023-09-01 10:30:19

文章被收录于专栏：前端自习课前端自习课

❝前期回顾： 1. Page Visi

🏝 什么是 Resize Observer API

Resize Observer API[1] 可以帮助我们监听元素尺寸的变化，并在尺寸变化时执行一些操作。例如，我们可以使用 Resize Observer API 来动态调整 UI 布局、加载或卸载图片等。

🎨 如何使用 Resize Observer API

使用 Resize Observer API 非常简单。接下来我会通过 3 个使用示例带大家熟悉 Resize Observer API。

1.监听元素尺寸的变化

在实际应用中，我们通常需要「监听元素尺寸的变化」，并在「尺寸变化时执行一些操作」。例如，我们可能需要动态调整 UI 布局，以适应不同尺寸的屏幕或设备。下面是一个监听元素尺寸变化的示例：

// 创建一个 ResizeObserver 实例
const observer = new ResizeObserver((entries) => {
  for (let entry of entries) {
    console.log(entry.target, entry.contentRect);

    // 动态调整 UI 布局
    const { width, height } = entry.contentRect;
    // ...
  }
});

// 监听一个元素
const element = document.getElementById("my-element");
observer.observe(element);

在上面的示例中，我们使用 Resize Observer API 来监听 ID 为 "my-element" 的元素的尺寸变化。在回调函数中，我们可以获取元素的尺寸信息，并使用这些信息来动态调整 UI 布局。

2.监听元素内部的尺寸变化

除了监听元素本身的尺寸变化外，我们还可以监听「元素内部」的尺寸变化。例如，当元素内部的文本或图像发生变化时，我们可能需要重新计算元素的尺寸，并相应地调整 UI 布局。下面是一个监听元素内部尺寸变化的示例：

// 创建一个 ResizeObserver 实例
const observer = new ResizeObserver((entries) => {
  for (let entry of entries) {
    console.log(entry.target, entry.contentRect);

    // 动态调整 UI 布局
    const { width, height } = entry.contentRect;
    // ...
  }
});

// 监听一个元素的内部尺寸变化
const element = document.getElementById("my-element");
observer.observe(element, { box: "content-box" });

在上面的示例中，我们使用 Resize Observer API 来监听 ID 为 "my-element" 的「元素内部」的尺寸变化。我们传递了一个选项对象，其中 box 属性设置为 content-box，表示要监听元素内部的尺寸变化。

3.React 中使用 Resize Observer API

当然，我们也可以在 React 或 Vue 中使用，还可以使用第三方库来简化 Resize Observer API 的使用。例如，在 React 中，您可以使用 react-resize-observer 库来监听元素的尺寸变化。以下是一个使用 react-resize-observer 库的示例：

import React, { useState } from "react";
import { ResizeObserver } from "@juggle/resize-observer";
import { useResizeObserver } from "react-resize-observer";

function MyComponent() {
  const [width, setWidth] = useState(0);
  const [height, setHeight] = useState(0);

  const onResize = (entry) => {
    const { width, height } = entry.contentRect;
    setWidth(width);
    setHeight(height);
  };

  const { ref } = useResizeObserver({ onResize, polyfill: ResizeObserver });

  return <div ref={ref}>My content goes here</div>;
}

在上面的示例中，我们使用了 react-resize-observer[2] 和 @juggle/resize-observer[3] 两个库来监听元素的尺寸变化。我们使用 useResizeObserver() hook 来创建一个 ResizeObserver 实例，并在回调函数中更新组件的状态。

👍 Resize Observer API 的实际应用

Resize Observer API 可以在很多实际场景中使用。下面是一些常见的应用场景：

1.响应式布局

使用 Resize Observer API 可以轻松实现「响应式布局」。例如，当屏幕尺寸发生变化时，我们可以监听根元素的尺寸变化，并相应地调整 UI 布局。以下是使用 Resize Observer API 实现的示例代码：

<!-- 响应式布局示例代码 -->
<div class="container" id="responsive-container">
  <div class="row">
    <div class="col-sm-4">
      <p>First column content</p>
    </div>
    <div class="col-sm-4">
      <p>Second column content</p>
    </div>
    <div class="col-sm-4">
      <p>Third column content</p>
    </div>
  </div>
</div>

<script>
  const container = document.getElementById("responsive-container");

  const resizeObserver = new ResizeObserver((entries) => {
    for (let entry of entries) {
      const { width } = entry.contentRect;
      if (width >= 768) {
        container.classList.add("large-device");
      } else {
        container.classList.remove("large-device");
      }
    }
  });

  resizeObserver.observe(container);
</script>

<style>
  .large-device .col-sm-4 {
    width: 33.33%;
  }
</style>

2.图片懒加载

使用 Resize Observer API 可以实现「图片懒加载」。例如，当图片元素进入可视区域时，我们可以监听其尺寸变化，并在元素完全加载后显示图片。以下是一个使用 Resize Observer API 实现图片懒加载的示例代码：

<!-- HTML -->
<img data-src="https://example.com/image.jpg" alt="My image" />

<script>
  // JavaScript
  const observer = new ResizeObserver((entries) => {
    for (let entry of entries) {
      if (entry.isIntersecting) {
        const img = entry.target;
        const src = img.getAttribute("data-src");
        if (src) {
          img.setAttribute("src", src);
          img.removeAttribute("data-src");
        }
      }
    }
  });

  const images = document.querySelectorAll("img[data-src]");
  images.forEach((img) => {
    observer.observe(img);
  });
</script>

在上面的代码中，我们使用 Resize Observer API 来监听图片元素的尺寸变化。当图片元素进入可视区域时，我们将其 data-src 属性中的 URL 赋值给其 src 属性，从而实现图片懒加载的效果。同时，我们使用 Intersection Observer API 来监听图片元素是否进入可视区域。注意，在上面的代码中，我们还需要为图片元素设置一个 data-src 属性，其中包含要加载的图片的 URL。这样可以避免在页面加载时立即加载所有图片，从而提高页面性能。

3.自适应 UI 组件

使用 Resize Observer API 可以轻松实现自适应 UI 组件。例如，当 UI 组件内部的元素数量或尺寸发生变化时，我们可以监听其尺寸变化，并相应地调整 UI 布局。

🧭 Resize Observer API 的兼容性

Resize Observer API 是一个比较新的 Web API，目前仅在现代浏览器中得到支持。以下是 Resize Observer API 的兼容性情况：

Chrome 64+ ✅
Firefox 69+ ✅
Safari 14.1+ ✅
Edge 79+ ✅
Opera 51+ ✅

image.png

详细兼容性情况可以在 Can I Use[4] 网站上查看。

📋 Resize Observer API 优缺点

接下来看看 Resize Observer API 的优点和缺点：

1.优点

可以用于检测元素大小的变化，而无需轮询或使用其他检测技术。
它能够监听「多个元素」的大小变化，并且只在元素大小发生变化时才会触发回调函数。
可以检测到「任何元素」的大小变化，不仅限于可见元素。
相比于其他检测技术（如 window.resize 事件），Resize Observer API 更加稳定，因为它可以避免由于事件的频繁触发而导致的性能问题。