JS监听元素尺寸变化？手把手教你用ResizeObserver！

今天golang学习网给大家带来了《JS监听元素尺寸变化？ResizeObserver简单实用指南》，其中涉及到的知识点包括等等，无论你是小白还是老手，都适合看一看哦~有好的建议也欢迎大家在评论留言，若是看完有所收获，也希望大家能多多点赞支持呀！一起加油学习~

JS监听元素尺寸变化的核心方法是使用ResizeObserver，它通过回调函数在元素尺寸改变时执行操作。1. ResizeObserver提供高效监听方式，避免传统window.onresize的性能问题；2. 用法简单，创建实例并指定回调函数后调用observe方法监听目标元素；3. 支持同时监听多个元素，根据变化动态调整布局；4. 可结合节流、防抖、减少DOM操作和及时取消观察等技巧优化性能；5. 在React中可通过useEffect和useRef实现组件挂载时监听及卸载时释放资源；6. 兼容性良好，老旧浏览器可引入polyfill支持；7. 实际应用如自适应卡片布局，可根据容器宽度动态调整每行卡片数量与宽度，实现响应式设计。

JS监听元素尺寸变化，核心在于使用ResizeObserver，它能让你在元素尺寸改变时执行回调函数，从而实现动态布局或其他响应式操作。

ResizeObserver提供了一种高效、可靠的方式来监听元素尺寸变化，避免了传统window.onresize带来的性能问题。

ResizeObserver的基本用法

ResizeObserver的使用非常简单，只需要创建一个ResizeObserver实例，并指定一个回调函数，然后观察目标元素即可。下面是一个基本的代码示例：

const observer = new ResizeObserver(entries => {
  for (let entry of entries) {
    const cr = entry.contentRect;
    console.log('Element:', entry.target);
    console.log('Element size:', cr.width, 'x', cr.height);
  }
});

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

这段代码会监听ID为myElement的元素的尺寸变化，并在控制台输出元素和尺寸信息。注意，回调函数接收一个entries数组，每个entry包含目标元素和它的尺寸信息。

如何处理复杂的布局场景？

实际开发中，布局往往非常复杂，可能需要监听多个元素的尺寸变化，并根据这些变化动态调整其他元素的样式。ResizeObserver可以同时观察多个元素：

const observer = new ResizeObserver(entries => {
  entries.forEach(entry => {
    const target = entry.target;
    const width = entry.contentRect.width;

    if (target.id === 'sidebar') {
      // 根据sidebar宽度调整main content的padding
      const mainContent = document.getElementById('main-content');
      mainContent.style.paddingLeft = `${width + 20}px`;
    } else if (target.id === 'main-content') {
      // ... 其他逻辑
    }
  });
});

observer.observe(document.getElementById('sidebar'));
observer.observe(document.getElementById('main-content'));

在这个例子中，我们同时监听了sidebar和main-content的尺寸变化，并根据sidebar的宽度动态调整main-content的paddingLeft。这种方式可以灵活应对各种复杂的布局需求。

ResizeObserver的性能优化技巧

虽然ResizeObserver相比window.onresize性能更好，但频繁的尺寸变化仍然可能导致性能问题。以下是一些优化技巧：

1. 节流（Throttling）和防抖（Debouncing）： 可以使用节流或防抖来限制回调函数的执行频率，避免过度渲染。

   function throttle(func, delay) {
     let timeoutId;
     let lastExecTime = 0;
   
     return function(...args) {
       const context = this;
       const currentTime = new Date().getTime();
   
       if (!timeoutId) {
         if (currentTime - lastExecTime >= delay) {
           func.apply(context, args);
           lastExecTime = currentTime;
         } else {
           timeoutId = setTimeout(() => {
             func.apply(context, args);
             lastExecTime = new Date().getTime();
             timeoutId = null;
           }, delay);
         }
       }
     };
   }
   
   const observer = new ResizeObserver(throttle(entries => {
     // ... 你的回调逻辑
   }, 100)); // 100ms节流

2. 避免不必要的DOM操作： 尽量减少回调函数中的DOM操作，可以将计算结果缓存起来，只在必要时更新DOM。

3. 及时取消观察： 如果元素不再需要监听，应及时调用observer.unobserve(element)或observer.disconnect()取消观察，释放资源。

ResizeObserver的兼容性问题及polyfill

ResizeObserver的兼容性相对较好，现代浏览器基本都支持。但对于一些老旧浏览器，可能需要使用polyfill。你可以使用resize-observer-polyfill：

npm install resize-observer-polyfill

然后在你的代码中引入polyfill：

import ResizeObserver from 'resize-observer-polyfill';

if (!window.ResizeObserver) {
  window.ResizeObserver = ResizeObserver;
}

// ... 你的代码

如何在React中使用ResizeObserver？

在React中使用ResizeObserver，可以使用useEffect hook：

import React, { useEffect, useRef } from 'react';

function MyComponent() {
  const elementRef = useRef(null);

  useEffect(() => {
    const observer = new ResizeObserver(entries => {
      const width = entries[0].contentRect.width;
      console.log('Component width:', width);
      // ... 根据宽度更新state或props
    });

    if (elementRef.current) {
      observer.observe(elementRef.current);
    }

    return () => {
      observer.disconnect(); // 组件卸载时取消观察
    };
  }, []); // 依赖为空数组，只在组件挂载和卸载时执行

  return <div ref={elementRef}>我的组件</div>;
}

export default MyComponent;

这个例子中，我们使用useRef获取组件的DOM元素，然后在useEffect中创建ResizeObserver并观察该元素。在组件卸载时，我们调用observer.disconnect()取消观察，避免内存泄漏。

实际应用场景：自适应卡片布局

一个常见的应用场景是自适应卡片布局。假设我们有一个卡片列表，希望每行显示的卡片数量能够根据容器的宽度自动调整。可以使用ResizeObserver来实现：

import React, { useState, useEffect, useRef } from 'react';

function CardList({ cards }) {
  const containerRef = useRef(null);
  const [cardWidth, setCardWidth] = useState(200); // 初始卡片宽度

  useEffect(() => {
    const observer = new ResizeObserver(entries => {
      const containerWidth = entries[0].contentRect.width;
      const cardsPerRow = Math.floor(containerWidth / cardWidth);
      // 假设卡片之间有10px的间距
      const newCardWidth = (containerWidth - (cardsPerRow - 1) * 10) / cardsPerRow;
      setCardWidth(newCardWidth);
    });

    if (containerRef.current) {
      observer.observe(containerRef.current);
    }

    return () => {
      observer.disconnect();
    };
  }, []);

  return (
    <div ref={containerRef} style={{ display: 'flex', flexWrap: 'wrap' }}>
      {cards.map(card => (
        <div
          key={card.id}
          style={{
            width: cardWidth,
            marginBottom: '10px',
            marginRight: '10px',
            border: '1px solid #ccc',
            padding: '10px',
            boxSizing: 'border-box',
          }}
        >
          {card.content}
        </div>
      ))}
    </div>
  );
}

export default CardList;

在这个例子中，我们监听容器的宽度变化，并根据宽度计算每行应该显示的卡片数量，然后动态调整卡片的宽度。这样就可以实现一个自适应的卡片布局。

总结

ResizeObserver是一个强大的API，可以让你轻松监听元素的尺寸变化，并根据这些变化动态调整布局或其他行为。通过合理使用ResizeObserver，可以构建出更加灵活、响应式的Web应用。

今天关于《JS监听元素尺寸变化？手把手教你用ResizeObserver！》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于JS的内容请关注golang学习网公众号！