关于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'], // 标签所带的属性都可增加，包含自定义属性
  });