应用状况

在最近的我的项目中，牵扯到了A我的项目中援用了B我的项目中的公共组件，比方顶部导航栏，cookie之类的，别离使用的不同的技术栈vue&jq，在不不便管制B我的项目中的点击事件时，监听Dom的class或style变动，而进行操作，应用到了MutationObserver

应用办法

参考MDN：MutationObserver的 observe() 办法配置了 MutationObserver 对象的回调办法以开始接管与给定选项匹配的DOM变动的告诉。依据配置，观察者会察看 DOM 树中的单个 Node，也可能会察看被指定节点的局部或者所有的子孙节点。MutationObserver
mutationObserver.observe(target[, options])
target

DOM树中的一个要察看变动的DOM Node (可能是一个Element) , 或者是被察看的子节点树的根节点。

options 可选

一个可选的MutationObserverInit 对象，此对象的配置项形容了DOM的哪些变动应该提供给以后观察者的callback。

demo

$('button.a').click(function(e) {    e.preventDefault();    $('body').hasClass('test')      ? $('body').removeClass('test')      : $('body').addClass('test');  });  $('button.b').click(function(e) {    e.preventDefault();    $('body').css('background-color') == 'rgb(255, 100, 50)'      ? $('body').css('background-color', 'rgb(255, 200, 255)')      : $('body').css('background-color', 'rgb(255, 100, 50)');  });  let testObserver = new MutationObserver(function(mutations) {    mutations.forEach(mutation => {      console.log(mutation.target);    });  });  /**Element**/  testObserver.observe($('body')[0], {    // subtree: true, // 所有上司节点（包含子节点和子节点的子节点）的变动    attributes: true, //检测属性变动    // childList: true, //检测子节点变动    // characterData: true, //节点内容或节点文本的变动。    attributeFilter: ['class', 'style'], // 标签所带的属性都可增加，包含自定义属性  });