可以用来监听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'], // 标签所带的属性都可添加，包括自定义属性
  });