前言echarts-for-react在echarts轻量级封装的基础上,提供了一个小而实用的图表尺寸适配容器尺寸的功能,而这个功能背后就是本文要介绍的size-sensor。源码介绍size-sensor的源码非常精简,主要是原生APIResizeObserver方案和对象元素方案的检测和API统一。代码会先检查当前运行时是否支持原生APIResizeObserver,如果不支持,则使用对象元素方案。下面我们讨论这两种选择。基于浏览器的原生API——ResizeObserver用于监测Element内容框或边框大小或SVGElement边框大小,并调用回调函数。MDN:https://developer.mozilla.org.../***@param{ResizeObserverEntry}条目-用于在更改后获取每个元素的新大小*@param{ResizeObserver}观察者*@seehttps://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry*/functionhandleResize(entries,observer){for(letentryofentries){//...}}consttarget=文档。getElementById('main')constobserver=newResizeObserver(handleResize)//开始监听指定DOM元素observer.observe(target)//结束监听指定DOM元素observer.unobserve(target)//结束所有DOM元素monitorobserver.disconnect()注意:在handleResize中修改target的大小不会导致递归调用handleResize函数。基于object元素的兼容方案实现了object元素用于嵌入图像、音频、视频、Java小程序、ActiveX、PDF、Flash等外部资源,因此也会像iframe元素一样生成独立的浏览器上下文.Window实例在浏览器上下文中的大小将与对象元素保持一致,因此您可以通过订阅浏览器上下文中Window实例的resize事件来监控容器的大小。functionbind(target,handle){if(getComputedStyle(target).position==='static'){target.style.position='relative'}letobject=document.createElement('object')object.onload=()=>{object.contentDocument.defaultView.addEventListener('resize',handle)//在初始化期间触发handle()一次}object.style.display='block'object.style.position='absolute'object.style.top=0object.style.let=0object.style.width='100%'ob??ject.style.height='100%'ob??ject.style.pointerEvents='none'object.style.zIndex=-1对象。style.opacity=0object.type='text/html'target.appendChild(object)object.data='about:data'return()=>{if(object.contentDocument){object.contentDocument.defaultView.removeEventListener('resize',handle)}if(object.parentNode){object.parentNode.removeChild(object)}}}这里也可以将object元素换成iframe元素,只需将object.data换成iframe.src即可。注意:修改句柄中target的大小会导致句柄函数被递归调用。ResizeObserver的polyfill兼容方案——MutationObserverRepos:https://github.com/que-etc/re...Repos:https://github.com/juggle/res...尊重原创,转载请注明出处:https//www.cnblogs.com/fsjoh...胖约翰
