参考MDN手册;
缘由
最近一直学探究一下前端MVC的原理,所以有空便去看看vue.js的源码。无意间发现的它的一个核心工作原理。
MutationObserver
官网介绍这个东西可以检测DOM变化,它是用来取代 Mutation Events 的。
大概用法如下:
var target = document.querySelector('body');
var observer = new MutationObserver(function (mutations,self) {
mutations.forEach(function (mutation) {
console.log(mutation);
});
});
var config = {attributes: true, childList: true, characterData: true};
observer.observe(target, config);
代码解释:
1. 获取BODY的DOM。
2. 创建MutationObserver,传入回调函数(回调函数获得的第一个参数是一个 MutationRecord的数组,第二个参数是MutationObserver自己的实例)
3. config对象是配置你想监测的DOM变化。
4. observer.observe方法配置监测对象和监测信息。
MDN里面介绍MutationObserver是延迟异步监测。即其他JS脚本运行结束后,才会调用MutationObserver一次性传入所有的DOM变化。
config对象的配置信息可参考MDN里面的MutationObserverInitEDIT。
属性 | 描述 |
---|---|
childList | true为监测子节点的变化 |
attributes | true为监测自身节点的属性变化 |
characterData | 如果目标节点为characterData节点(一种抽象接口,具体可以为文本节点,注释节点,以及处理指令节点)时,也要观察该节点的文本内容是否发生变化 |
subtree | true为目标节点下面的子树全部被监测 |
attributeOldValue | true为要记录目标节点属性变化前的属性值 |
characterDataOldValue | true为要记录目标节点(文本节点)变化前的值 |
attributeFilter | 一个属性名数组(不需要指定命名空间),只有该数组中包含的属性名发生变化时才会被观察到,其他名称的属性发生变化后会被忽略想要设置那些删选参数的话 |
修改DOM节点后的运行结果
得到了MutationRecord数组,这样我们就可以做很多坏事了,嘿嘿~以后又新感悟再补充~