前言
看红宝书的时候学习到的一个新知识点，感觉很有意思。只能说是比较典型的观察者模式了(个人只是简单了解过一点点的设计模式，有误请评论)。
基本用法
使用MutationObserver可以观察整个文档、DOM树的一部分或某个元素。使用MutationObserver需要通过MutationObserver的构造函数实例化对象，参数是一个回调函数。
observe()方法
实例化出一个MutationObserver对象之后，这个对象实际上就是一个观察者，但是，这个观察者这个时候还不知道自己要观察什么。这个时候需要调用observer方法来将它和DOM关联起来。此方法接收两个必须参数：要观察其变化的DOM节点、一个用于控制观察哪些方面的配置对象。
const observer = new MutationObserver(() => {
console.log('DOM元素有变化')
})
observer.observe(document.body, {
attributes: true
})
document.body.className = 'foo'
console.log('script') // 先打印script，再打印DOM元素有变化上面设置了观察body元素的属性变化，所以修改className属性时会触发注册的回调函数，另外回调函数是异步执行的，所以会先打印script。
MutationRecord实例
回调函数会接收一个MutationRecord实例的数组。MutationRecord实例会包含发生变化的信息，包括发生了什么变化，哪个地方发生了变化。
const observer = new MutationObserver((mutationsRecord) => {
console.log(mutationsRecord)
})
observer.observe(document.body, {
attributes: true
})
document.body.setAttribute('name', 'clz')
连续修改会生成多个对应的 MutationRecord实例，下次回调执行时就会收到包含所有这些实例的数组，
顺序为变化事件发生的顺序：
const observer = new MutationObserver((mutationsRecords) => {
console.log(mutationsRecords)
})
observer.observe(document.body, {
attributes: true
})
document.body.setAttribute('name', 'clz')
document.body.setAttribute('name', 'czh')
document.body.setAttribute('name', 'ccc')
回调函数还可以接收第二个参数，就是MutationObserver的实例
const observer = new MutationObserver((mutationRecords, mutationObserver) => {
console.log(mutationRecords)
console.log(mutationObserver === observer) // true
});
observer.observe(document.body, { attributes: true });
document.body.setAttribute('name', 'clz')disconnect()方法
可以调用 disconnect()方法，来取消observer后续的观察，并且也会导致之前已经观察到，但是还没有执行毁掉的结果被抛弃。
const observer = new MutationObserver((mutationRecords, mutationObserver) => {
console.log(mutationRecords)
});
observer.observe(document.body, { attributes: true });
document.body.setAttribute('name', 'clz')
observer.disconnect()
document.body.setAttribute('name', 'czh')上面的例子不会打印任何结果，这就是因为disconnect()不仅取消掉了observer后续的观察，还抛弃了之前已经观察到但还没执行回调的结果。
如果我们想disconnect()不影响之前已经观察道德结果的话，可以使用setTimeout()让之前的回调执行完毕再调用disconnect()。因为MutationObserver的回调是微任务，而setTimeout()是宏任务，执行完一开始的同步任务后，会先执行微任务，再执行宏任务。
const observer = new MutationObserver((mutationRecords, mutationObserver) => {
console.log(mutationRecords)
});
observer.observe(document.body, { attributes: true });
document.body.setAttribute('name', 'clz')
setTimeout(() => {
observer.disconnect()
document.body.setAttribute('name', 'czh')
}, 0)上面这个例子会打印只有一个MutationRecord实例的数组。
复用MutationObserver
如果我们想要观察多个节点，不需要新建很多个MutationObserver对象。只需要多次调用observe()方法，就能够复用一个MutationObserver对象观察不同的目标节点。还可以通过 MutationRecord的target属性可以标识发生变化的目标节点。
const observer = new MutationObserver((mutationRecords) => {
console.log(mutationRecords)
console.log(mutationRecords.map(x => x.target))
})
let childA = document.createElement('div')
let childB = document.createElement('span')
document.body.appendChild(childA)
document.body.appendChild(childB)
observer.observe(childA, { attributes: true })
observer.observe(childB, { attributes: true })
// observer.disconnect() // 一刀切，会停用全部观察
childA.setAttribute('name', 'clz')
childB.setAttribute('age', 21)
重用 MutationObserver
上面我们有试过通过调用disconnect()方法来结束观察的，结束观察之后这个观察者不就没事干了吗？
为了不让这个观察者无所事事，可以重新使用它，让它观察新的目标节点(也可以是之前观察过的节点)，实际方法还是调用observe()方法。
const observer = new MutationObserver(() => {
console.log('change')
})
observer.observe(document.body, { attributes: true })
// 使用异步任务，防止disconnect影响到上面的观察
setTimeout(() => {
observer.disconnect() // 结束观察
document.body.setAttribute('name', 'clz') // 结束观察了，不会输出东西
})
setTimeout(() => {
// 重用观察者
observer.observe(document.body, { attributes: true })
document.body.setAttribute('name', 'clz')
})
document.body.setAttribute('name', 'clz')上面的例子会打印两次change。接下来就来分析一波。
- 首先，
observer.observe()添加观察，之后遇到了两个定时器，因为是异步任务所以添加到任务队列中。也就是说此时不会结束观察，最后的属性设置就会触发回调函数。 - 同步任务执行完之后，就开始执行异步任务，第一个定时器就会结束观察了，所以之后的属性设置不会触发回调
- 但是，第二个定时器又重用该定时器，还是让它观察
body，所以之后又生效了，再次触发回调函数
