场景是这样的，之前有个同事做了一个侧边栏，监视器屏幕的宽度显示不同的形式。第一种情况：屏幕宽度足够时，侧边栏完全展开；第二种情况：当达到一定宽度时，缩小一点，只留下侧边栏中图标的部分。如果变窄了，直接隐藏侧边栏就可以了。按理说这是一个很“聪明”的侧边栏，但是他的实现方式让我现在很头疼。先说说他是怎么实现的。在第一种形式中，给父级一个openSiderbar类。在第二种形式中，将父级更改为hideSidebar类。在第三种形式中，向父级添加一个openSiderbar类。移动类，transform移动，无法直观的看到菜单。下面说说问题：右边是canvas，想兼容屏幕宽度，但是基于目前的sidebar实现，直接resizesidebaraddEventListener是不可能的。最后我找到了一个好方法——MutationObserverMutationObserver接口提供了监视对DOM树所做的更改的能力。它取代了旧的MutationEvents（DOM3Events规范）。我只需要给sidebarapp-wrapper绑定一个MutationObserver，判断如果类名属性被修改，就会触发resize方法。具体代码如下：//这里没有使用addEventListenerresize，因为侧边栏的实现是根据类名transform移动的。consttargetNode=document.getElementsByClassName('app-wrapper')[0]//观察者的配置（需要观察哪些变化）//还有其他可以监听的属性，见：https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver/observeconstconfig={attributes:true}//观察到变化时执行的回调函数constt=thisconstcallback=function(mutationsList,observer){for(constmutationofmutationsList){if(mutation.type==='attributes'&&mutation.attributeName==='class'){//延时是要等侧边栏动画才计算setTimeout(()=>{t.onResize()},250)}}}//创建一个观察者实例，并传入回调函数this.observer=newMutationObserver(callback)//开始观察上面配置的目标节点this.observer.observe(targetNode,config)PS：记住beforeDestroy中的this.observer.disconnect()。
