JS MutationObserver 笔记

参考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数组，这样我们就可以做很多坏事了，嘿嘿~以后又新感悟再补充~