如何实现对节点尺寸动态变化的有效监测与检测

思路：

如果IE,直接注册onresize（这个点赞啊）

否则： 创建 type为text/html的object

设置position为absolute, 高度100%, 宽度100% （这样可以获得父容器的宽高）

设置pointer-events:none，利用点击穿透（让object窗体变成幽灵）

object元素的高度变化后，通知订阅者

resize事件节流

问题：

1. 创建object
2. 事件处理函数挂载了元素本身上

创建三个子元素，利用scroll事件来监测变化。

原理：

https://zhuanlan.zhihu.com/p/24887312
The scroll event is fired when the document view or an element has been scrolled.
当文档视图或者元素滚动的时候会触发 scroll 事件。
也就是说元素滚动的时候会触发这个事件，那么什么时候元素会滚动？当元素大于其父级元素，且父级元素允许其滚动的时候，该元素可以进行滚动。
换句话说，元素可以滚动意味着父子元素大小不一致，这是这个方法的核心。
那么我们需要让元素大小发生改变时，使得 scrollLeft 或者 scrollTop 发生改变，从而触发 scroll 事件，进一步得知其大小发生了改变。

visibility: hidden; opacity: 0; position: absolute;让自己变得虚无

addEventListener(“scroll”, scrollListener, true) 在捕捉阶段拦截事件，使用false无效

div.expand-trigger 变大

div.expand-trigger 变小

animationstart来监听显示，比如style.display = 'none’然后style.display = ‘block’

问题：

1. 额外创建四个元素节点以及一个style节点
2. 事件都挂载了元素本身身上，

原生自带的方案， 兼容性并不高, resize-observer-polyfill 基于resize和MutationOberver的polyfill实现了ResizeObserver。

 const resizeObserver = new ResizeObserver(entries => {for (let entry of entries) {console.log(entry.target.id, `height:${entry.contentRect.height}  width:${entry.contentRect.width}`);}});resizeObserver.observe(document.querySelector('#my_element'));resizeObserver.observe(document.querySelector('#my_element2'));