阅读 865

MutationObserver与ResizeObserver

1. 起因

最近在项目中遇到一个问题:需要监听某个dom元素的宽度变化,从而给此dom元素的某个子节点样式赋值。其实起初没有想到这么细,只是想到页面尺寸变化时赋值,即

// 搞个防抖
window.onresize = () => {
    return (() => {
      setTimeout(() => {
        ...
      }, 100)
    })()
  }
复制代码

但是想的太简单了,后来实际操作的时候发现还需要监听dom元素的宽度,这下子有点懵,上网查了一下,发现有个MutationObserver方法,特此来学习下

3. MutationObserver

来自MDN的详解

举个例子:

<div style="width: 200px" id="parent">
    <div id="some-id"></div>
</div>


#some-id{
	width: 100%;
	height: 100px;
	background-color: aqua;
}


var targetNode = document.getElementById('some-id')
var parentNode = document.getElementById('parent')
targetNode.innerHTML = `
    <div class="text">批量设置</div>
    <input class="input" style="left: 100px;width: 100px" />
    <input class="input" style="left: 100px;width: 100px" />
  `
 
// 先创建一个回调函数,mutation.type表示监听变化的类型
var callback = function(mutationsList) {
    for(var mutation of mutationsList) {
        if (mutation.type == 'attributes') {
     		console.log('The ' + mutation.attributeName + ' attribute was modified.');
     	} else if (mutation.type == 'childList') {
            console.log('A child node has been added or removed.');
        }
    }
 }
 
 // 创建对象实例
 var observer = new MutationObserver(callback)
 
 // config 包含需要监听的类型
 var config = { attributes: true, childList: true, subtree: true }
 
 // 开始执行监听,传入监听的dom对象与config
 observer.observe(targetNode, config)
 // 先注释掉
 // 阻止 MutationObserver 实例继续接收的通知
 // observer.disconnect()
 
 setTimeout(() => {
	parentNode.style.width = '400px'
	const inputNodes = targetNode.getElementsByTagName('input')
	console.log(inputNodes[0].offsetLeft)
}, 2000)
复制代码

关于config的配置: 参考

  1. childList:设置true,表示观察目标子节点的变化,比如添加或者删除目标子节点,不包括修改子节点以及子节点后代的变化
  2. attributes:设置true,表示观察目标属性的改变
  3. characterData:设置true,表示观察目标数据的改变
  4. subtree:设置为true,目标以及目标的后代改变都会观察
  5. attributeOldValue:如果属性为true或者省略,则相当于设置为true,表示需要记录改变前的目标属性值,设置了attributeOldValue可以省略attributes设置
  6. characterDataOldValue:如果characterData为true或省略,则相当于设置为true,表示需要记录改变之前的目标数据,设置了characterDataOldValue可以省略characterData设置
  7. attributeFilter:如果不是所有的属性改变都需要被观察,并且attributes设置为true或者被忽略,那么设置一个需要观察的属性本地名称(不需要命名空间)的列表

可是,跑一下上面的代码,发现并没有执行console.log('The ' + mutation.attributeName + ' attribute was modified.');明明some-id宽度都发生变化了。然后我把css的width: 100%改为100px,再让这个宽度变成200px,发现attributes条件下执行console了,原来config的attributes观察目标属性变化,是指css属性变化,width:100%,虽然宽度px是变了,但是这个属性没变,所以自然就不执行了

3. ResizeObserver

我觉得MutationObserver这个api在跟我玩文字游戏。百度不中用,科学上网后找到了个ResizeObserver

一看这mdn的介绍:

ResizeObserver 接口可以监听到 Element 的内容区域或 SVGElement的边界框改变

ResizeObserver避免了在自身回调中调整大小,从而触发的无限回调和循环依赖。
它仅通过在后续帧中处理DOM中更深层次的元素来实现这一点。
如果(浏览器)遵循规范,只会在绘制前或布局后触发调用
复制代码

妥妥就是我要的api了,还是上面的例子

省略...
// 新建obsever对象
const resizeObserver = new ResizeObserver(entries => {
	for (let entry of entries) {
		console.log(entry.target.offsetWidth)
	}
});
开始监听,传入dom对象
resizeObserver.observe(targetNode);
复制代码

console执行了!打印出父元素宽度变化后targetNode的宽度!!

文章分类
阅读
文章标签