使用 ResizeObserver解决页面尺寸变动,echarts或地图等自适应的一种方法(监听特定DOM元素尺寸变化)

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 对象代表一个被观察的元素，并提供以下信息：

1. target: 被观察的元素。
2. contentRect: 一个 DOMRectReadOnly 对象，包含元素的尺寸和位置信息。可以使用 contentRect.width 和 contentRect.height 获取元素的新尺寸。
3. borderBoxSize: （可选）如果浏览器支持，这个属性会包含元素的边框尺寸。

2.4 停止观察

// 停止观察特定元素
resizeObserver.unobserve(dom);

// 停止观察所有元素,可在页面销毁阶段进行性能释放
resizeObserver.disconnect();

2.5 浏览器支持

ResizeObserver 是现代浏览器的新特性，主要支持在较新的浏览器版本中。在使用之前，请确保目标浏览器支持该 API

2.6 注意事项

1. ResizeObserver 不应过度使用，否则可能导致性能问题。确保只监听必要的元素。
2. 如果存在复杂的组件层次结构，确保合理管理 ResizeObserver 实例，避免内存泄漏。
3. ResizeObserver 是一个强大的工具，为你提供了监控 DOM 元素尺寸变化的方法。通过合理使用它，你可以实现自适应布局和图表调整等功能，同时确保应用程序的性能。