监听dom变化-Mutation observers

一、背景

通常，为了响应某个变化而执行一段逻辑，我们可以将这段逻辑的调用，放在这个变化的入口或者出口。所谓入口，是指这个变化发生的源头，所谓出口，是指这个变化发生之后走的逻辑。

这么说可能比较抽象，举个例子，页面上有个输入框，用户可以输入数字，也可能是通过后端推送的websocket更改输入框的数字，我们要在数字变化的时候触发个逻辑。有两种选择，一是入口。因为改变数字的原因，我们全都知道，所以可以监听输入框的Input事件，在这个事件里面触发对应的逻辑，同时在websocket的回调里触发对应的逻辑，此为入口触发。所谓出口，是指我们监听数字，只要数字变化，不管原因是什么，都触发对应的逻辑。比如vue里面的watch。

一般来说，在入口触发，可以更精确的控制，因为这里可以明确数据来源。在出口控制，则更加方便。这里根据实际需求来选择。

通常，在vue里面，通过框架对数据进行了双向绑定，其实就是在数据变化的出口(set方法)控制，因此可以知道数据什么时候变化了。

不过有一个小小的问题，就是dom元素。因为dom元素的属性非常多，且有自定义属性，dom又是动态的，所以vue没办法对dom做监听，我们一般只能在入口，也就是监听dom的各种事件，去触发对应的逻辑。

那么，有没有方式统一监听dom的变化呢？有的，就是Mutation observers API。这个api可以监听某个dom节点以及它的子节点的属性变化。

二、使用

来看个简单的demo

const content = document.querySelector(".content");
//观察器的配置
const option = {
  attributes: true,
  childList: true,
  characterData: true,
  subtree: true,
  attributeFilter: ["class"],
  attributeOldValue: true,
  characterDataOldValue: true,
};

/**
 * 属性变化之后触发的回调函数
 * @param {Array<MutationRecord>} mutationsList 触发的属性变化记录，是一个数组
 * @param {MutationObserver} observer 观察者
 */
const callback = function (mutationsList, observer