1.问题
项目中,页面做了响应式布局.大量使用了弹性布局,导致盒子没有固定的宽高,在菜单切换或者窗口缩放时,echarts或者地图元素就会出现扭曲,错版,填充不完全,溢出等问题.
当通过监听window的resize事件时,难以精准捕捉目标容器,同时echarts的resize()方法并不一定达到效果.
2. 解决方案
2.1 ResizeObserver 对象
ResizeObserver 是一个现代 JavaScript API，用于监听 DOM 元素的尺寸变化。在过去，监听元素尺寸变化通常依赖于 window 的 resize 事件，但这只能捕捉到窗口尺寸变化。ResizeObserver 为监控特定元素的尺寸变化提供了精确的方法，而不依赖于窗口尺寸。
2.2 使用(开始观察)
function handleResize(){
// 选择需要监听的 DOM 元素
this.dom = document.getElementById('id');
// 创建一个 ResizeObserver 实例，并传入回调函数
this.resizeObserver = new ResizeObserver((entries ) => {
// entries 是观察到的元素集合
for (let item of entries ) {
//发现当前发生尺寸变化的dom元素中,有目标元素
if(item.target === this.dom){
this.myEcharts.dispose()//销毁当前echarts实例或其他目标实例
this.setEcharts(data)//重新创建
}
}
});
// 开始观察元素尺寸变化
resizeObserver.observe(this.dom);
}
2.3 回调参数详解
回调函数的参数 entries 是一个包含 ResizeObserverEntry 对象的数组。每个ResizeObserverEntry 对象代表一个被观察的元素，并提供以下信息：
target: 被观察的元素。
contentRect: 一个 DOMRectReadOnly 对象，包含元素的尺寸和位置信息。可以使用 contentRect.width 和 contentRect.height 获取元素的新尺寸。
borderBoxSize: (可选)如果浏览器支持，这个属性会包含元素的边框尺寸。
2.4 停止观察
// 停止观察特定元素
resizeObserver.unobserve(dom);
// 停止观察所有元素,可在页面销毁阶段进行性能释放
resizeObserver.disconnect();
2.5 浏览器支持
ResizeObserver 是现代浏览器的新特性，主要支持在较新的浏览器版本中。在使用之前，请确保目标浏览器支持该 API
2.6 注意事项
ResizeObserver 不应过度使用，否则可能导致性能问题。确保只监听必要的元素。
如果存在复杂的组件层次结构，确保合理管理 ResizeObserver 实例，避免内存泄漏。
ResizeObserver 是一个强大的工具，为你提供了监控 DOM 元素尺寸变化的方法。通过合理使用它，你可以实现自适应布局和图表调整等功能，同时确保应用程序的性能。