大屏页面 - Githubissues

分析DataV

使用 MutationObserver 追踪 DOM 的变化和节流防抖来检测窗口的变化

MutationObserver 的使用

创建一个MutationObserver对象，这个对象有三个方法：

observe — 开始监听变化。需要两个参数 - 你需要观察的 DOM 和一个设置对象
disconnect — 停止监听变化

takeRecords — 在回调函数调用之前，返回最后一个批次的变化。


var mutationObserver = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
console.log(mutation);
});
});

// 开始监听页面中根 HTML 元素中的变化。 mutationObserver.observe(document.documentElement, { attributes: true, characterData: true, childList: true, subtree: true, attributeOldValue: true, characterDataOldValue: true });

现在，假设在 DOM 中你有一些非常简单的 div ：

`<div id="sample-div" class="test"> Simple div </div>`
复制代码使用 jQuery，你可以移除这个 div 的 class 属性：

`$("#sample-div").removeAttr("class");`

当我们开始观察，在调用 mutationObserver.observe(...) 之后我们将会在控制台看到每个 MutationRecord 的日志：
![image](https://user-gold-cdn.xitu.io/2018/5/6/163336d71f1af024?imageView2/0/w/1280/h/960/format/webp/ignore-error/1)

这个是由移除 class 属性导致的变化。

最后，为了在任务结束后停止对 DOM 的观察，你可以这样做：
```javascript
// 停止 MutationObserver 对变化的监听。
mutationObserver.disconnect();

分析的源码： https://github.com/DataV-Team/DataV/blob/bfc7cc7c574bedecaf7a7aa2b322e01c471a3b77/src/util/index.js https://github.com/DataV-Team/DataV/blob/72433f8ff127c387d91b56c75988c6ceb61f68a9/src/mixin/autoResize.js

ivan135 / learn-blog

大屏页面 #5

分析DataV

MutationObserver 的使用

解决dataV非全屏下无法显示全部内容的问题