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性能更好，但频繁的尺寸变化仍然可能导致性能问题。以下是一些优化技巧：
-
节流（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节流 避免不必要的DOM操作： 尽量减少回调函数中的DOM操作，可以将计算结果缓存起来，只在必要时更新DOM。
及时取消观察： 如果元素不再需要监听，应及时调用
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 我的组件;
}
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 (
{cards.map(card => (
{card.content}
))}
);
}
export default CardList;在这个例子中，我们监听容器的宽度变化，并根据宽度计算每行应该显示的卡片数量，然后动态调整卡片的宽度。这样就可以实现一个自适应的卡片布局。
总结
ResizeObserver是一个强大的API，可以让你轻松监听元素的尺寸变化，并根据这些变化动态调整布局或其他行为。通过合理使用ResizeObserver，可以构建出更加灵活、响应式的Web应用。
