监测元素resize

前言

近来有需求要作分页，听起来可能有点Low。 因此我要把Low的事情作得有点逼格。
分页自己没啥，可是数据量起来了，好比十万。 要是不作点处理， 那你的页面估计爽得很，机器也爽得很。 放心，我不会让你这么爽。

大量数据展示方案

比较流行的固然是虚拟滚动（无限滚动）。

1. 始终展现的是有限的固定节点。
2. 外层建立滚动层。

一句话，就是反复利用固定节点展示数据。

其中还有两个点

什么时候须要加载新的分页数据

1. scrollTop , clientHeight, scrollHeight
2. IntersectionObserver (chrome 55+)

如何知道容器宽高变化
本文就围绕着这个展开

由于使用的是react框架，使用了 react-window, react-window就是用来展示海量数据的react列表组件。
由于项目须要，还要不通尺寸一行展示不一样数量的数据。 确定有人就说，监听window.resize。

---

没错，监听resize必定程度，可是window.resize, 并不能让我知道容器自己的尺寸，当
然能够经过getComputedStyle获取。 要是window没有resize的状况呢。

---

我就想实时的知道尺寸的变化。

尺寸变化监测方案

监测元素resize这里有几种方案的测试和源码。

Cross-Browser, Event-based, Element Resize Detection

思路：

若是IE,直接注册onresize（这个点赞啊）

不然： 建立 type为text/html的object

设置position为absolute, 高度100%, 宽度100% （这样能够得到父容器的宽高）

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

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

resize事件节流

问题：

1. 建立object
2. 事件处理函数挂载了元素自己上

javascript-detect-element-resize

建立三个子元素，利用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. 事件都挂载了元素自己身上，

ResizeObserver

原生自带的方案， 兼容性并不高, 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'));

此外

固然，我以为还

1. 定时器 + getComputedStyle 也是很低成本的实现。
2. resize + MutationOberver 也是很简单的方案。