JS中ResizeObserver内置对象的使用初识
ResizeObserver 是一种用于观察元素大小变化的接口，可以非常方便地处理与布局相关的响应式设计。它提供了对元素大小变化的监听能力，特别适用于处理视图尺寸变化时的布局调整、组件刷新等操作。
文章目录
1. 基本概念
ResizeObserver 可以监听元素的内容区或边界的大小变化（比如宽度和高度）。当观察的元素尺寸发生变化时，会触发回调函数。
2. 使用场景
- 处理自适应布局：当页面元素的尺寸发生变化时，需要动态更新其相关联的元素。
- 图表和可视化：图表或图形需要响应容器的大小调整，确保内容始终适配。
- 动态内容：比如动态加载的内容或窗口大小调整时，可能需要重新计算和布局。
3. 使用方法
3.1 创建 ResizeObserver 实例
// 创建一个 ResizeObserver 实例，并传入一个回调函数
const resizeObserver = new ResizeObserver((entries, observer) => {
for (let entry of entries) {
const { width, height } = entry.contentRect; // 获取元素的最新尺寸
console.log(`Element size changed: ${width}px × ${height}px`);
}
});
entries是一个ResizeObserverEntry对象的数组，每个对象代表一个被观察的元素。entry.contentRect返回的是一个包含width、height、top、left等信息的矩形区域，表示元素的内容区域的最新尺寸。
3.2 观察元素
// 获取你想要观察的元素
const element = document.querySelector('#myElement');
// 开始观察该元素
resizeObserver.observe(element);
3.3 停止观察
如果你不再需要监听某个元素的尺寸变化，可以调用 unobserve 方法停止观察：
resizeObserver.unobserve(element);
如果你想停止所有观察，可以调用 disconnect 方法：
resizeObserver.disconnect();
4. 完整代码示例
假设我们有一个动态大小的容器，想要根据容器的尺寸变化调整其中的内容。
HTML
<div id="container" style="resize: both; overflow: auto; width: 300px; height: 200px; background-color: lightblue;">
<div id="content">内容区域</div>
</div>
<script src="resizeObserver.js"></script>
JavaScript（resizeObserver.js）
// 1. 创建 ResizeObserver 实例
const resizeObserver = new ResizeObserver((entries) => {
for (let entry of entries) {
const { width, height } = entry.contentRect;
// 输出容器的新尺寸
console.log(`Container size changed: ${width}px × ${height}px`);
// 调整 content 区域的大小，保持居中
const content = document.querySelector('#content');
content.style.fontSize = `${Math.min(width, height) / 10}px`;
}
});
// 2. 获取容器元素并开始观察
const container = document.querySelector('#container');
resizeObserver.observe(container);
5. 代码解析
- 在 HTML 中，
#container是可调整大小的元素。通过resize: both样式，用户可以手动调整该元素的大小。 - 在 JavaScript 中，首先创建一个
ResizeObserver实例，传入一个回调函数。当容器的尺寸发生变化时，该回调会被触发。 - 回调函数中，我们使用
entry.contentRect获取容器的最新宽度和高度。 - 然后，我们根据容器的最小尺寸来动态调整内容区域的字体大小，使其适应新的容器尺寸。
6. 适用场景
- 响应式布局：如上例中，我们动态调整字体大小或元素尺寸来适应父容器的变化。
- 图表绘制：当图表的容器大小变化时，需要更新图表的绘制区域以适配新的容器尺寸。
- 自适应设计：当页面布局中某些元素尺寸发生变化时，其他元素的尺寸也需要进行相应的调整。
7. 注意事项
- 性能：由于
ResizeObserver会在尺寸变化时频繁触发回调，因此需要小心处理回调中的逻辑，避免过度渲染或计算，以免造成性能问题。 - 浏览器支持：虽然现代浏览器大多支持
ResizeObserver，但在一些较老的浏览器中可能不完全支持，使用时可考虑加入相应的 polyfill。
8. 兼容性检查
对于一些旧版浏览器或需要兼容性处理的场景，可以使用 ResizeObserver 的 polyfill。例如：
npm install resize-observer-polyfill
然后在代码中引入 polyfill：
import ResizeObserver from 'resize-observer-polyfill';
这样可以确保在所有环境下都能使用 ResizeObserver。
总结来说，ResizeObserver 是一种高效的方式来监听元素大小变化，适用于多种响应式设计场景，但在使用时需要关注性能问题，尤其是在监听多个元素或频繁触发回调时。
原文地址：https://blog.csdn.net/cuijiying/article/details/145266167
免责声明：本站文章内容转载自网络资源，如侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！