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应用。
以上就是js怎样监听元素尺寸变化 ResizeObserver使用指南的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1507032.html
微信扫一扫 
支付宝扫一扫 
