关于javascript:可以用来监听Dom类名样式变化的方法-MutationObserver

应用状况

在最近的我的项目中，牵扯到了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'], // 标签所带的属性都可增加，包含自定义属性
  });