用法在最近的项目中，涉及到在项目A中引用项目B中的公共组件，如顶部导航栏、cookies等，分别。不同技术栈vue&jq，在B项目不方便控制点击事件，监听Dom类或样式变化，操作时，使用MutationObserver方法，参考MDN：MutationObserver的observe()方法配置MutationObserver对象回调方法开始接收与给定选项匹配的DOM更改通知。根据配置，观察者会观察DOM树中的单个Node，也可能会观察指定节点的部分或全部后代。MutationObservermutationObserver.observe(target[,options])以目标DOM树中的一个DOM节点（可能是一个Element）为目标来观察变化，或者是被观察子节点树的根节点。options可选的一个可选的MutationObserverInit对象，该对象的配置项描述了DOM的哪些变化应该提供给当前观察者的回调。演示$('button.a').click(function(e){e.preventDefault();$('body').hasClass('test')?$('body').removeClass('test'):$('正文').addClass('测试');});$('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))');});让testObserver=newMutationObserver(function(mutations){mutations.forEach(mutation=>{console.log(mutation.target);});});/**Element**/testObserver.observe($('body')[0],{//子树:true,//所有下级节点（包括子节点和子节点节点的子节点）改变属性：true,//检测属性变化//childList:true,//检测子节点变化//characterData:true,//节点内容或节点文本的变化attributeFilter:['class','style'],//的所有属性可以添加标签，包括自定义属性});
