关于数据分析:人人都能学会数据分析mk

6次阅读

共计 1783 个字符，预计需要花费 5 分钟才能阅读完成。

MutationObserver 是一个能够监听 DOM 构造变动的接口。当 DOM 对象树产生任何变动时，MutationObserver 会失去告诉。

MutationObserver 是一个结构器，承受一个 callback 参数，用来解决节点变动的回调函数，返回两个参数：

mutations：节点变动记录列表（sequence<MutationRecord>）observer：结构 MutationObserver 对象。

MutationObserver 对象有三个办法，别离如下：

observe：设置察看指标，承受两个参数，target：察看指标，options：通过对象成员来设置察看选项
disconnect：阻止观察者察看任何扭转
takeRecords：清空记录队列并返回外面的内容

// 抉择一个须要察看的节点
var targetNode = document.getElementById('root')

// 设置 observer 的配置选项
var config = {attributes: true, childList: true, subtree: true}

// 当节点发生变化时的须要执行的函数
var callback = function (mutationsList, observer) {for (var mutation of mutationsList) {if (mutation.type == 'childList') {console.log('A child node has been added or removed.')
    } else if (mutation.type == 'attributes') {console.log('The' + mutation.attributeName + 'attribute was modified.')
    }
  }
}

// 创立一个 observer 示例与回调函数相关联
var observer = new MutationObserver(callback)

// 应用配置文件对指标节点进行观测
observer.observe(targetNode, config)

// 进行观测
observer.disconnect()

observe 办法中 options 参数有已下几个选项：

childList：设置 true，示意察看指标子节点的变动，比方增加或者删除指标子节点，不包含批改子节点以及子节点后辈的变动
attributes：设置 true，示意察看指标属性的扭转
characterData：设置 true，示意察看指标数据的扭转
subtree：设置为 true，指标以及指标的后辈扭转都会察看
attributeOldValue：如果属性为 true 或者省略，则相当于设置为 true，示意须要记录扭转前的指标属性值，设置了 attributeOldValue 能够省略 attributes 设置
characterDataOldValue：如果 characterData 为 true 或省略，则相当于设置为 true, 示意须要记录扭转之前的指标数据，设置了 characterDataOldValue 能够省略 characterData 设置
attributeFilter：如果不是所有的属性扭转都须要被察看，并且 attributes 设置为 true 或者被疏忽，那么设置一个须要察看的属性本地名称（不须要命名空间）的列表

MutationObserver 有以下特点：

 它期待所有脚本工作实现后才会运行，即采纳异步形式
它把 DOM 变动记录封装成一个数组进行解决，而不是一条条地个别解决 DOM 变动。它即能够察看产生在 DOM 节点的所有变动，也能够察看某一类变动

当 DOM 产生变动会触发 MutationObserver 事件。然而，它与事件有一个实质不同：事件是同步触发，也就是说 DOM 产生变动立即会触发相应的事件；MutationObserver 则是异步触发，DOM 产生变动当前，并不会马上触发，而是要等到以后所有 DOM 操作都完结后才触发。

举例来说，如果在文档中间断插入 1000 个段落（p 元素），会间断触发 1000 个插入事件，执行每个事件的回调函数，这很可能造成浏览器的卡顿；而 MutationObserver 齐全不同，只在 1000 个段落都插入完结后才会触发，而且只触发一次，这样较少了 DOM 的频繁变动，大大有利于性能。

正文完