场景是这样的，之前的共事做了一个侧边栏，监听屏幕宽度显示不同的状态。
第一种状况：屏幕宽度足够时，侧边栏齐全开展，
第二种状况：达到肯定宽度时，缩起一点，只留下侧边栏中图标的局部。
如果再变窄，就间接暗藏侧边栏。
按理说，这是十分“智能”的侧边栏了，然而他的实现形式让我当初很头疼。
先说下他怎么实现的，第一种状态下，给父级一个openSiderbar类，width写死
第二种状态下，给父级换hideSidebar类，width写死
第三种状态下，给父级减少mobile类，transform挪动，从视觉上看不到菜单。
当初说下问题：右侧是canvas画布，我也要去兼容屏幕宽度，然而基于当初的侧边栏实现形式，没法间接对侧边栏addEventListener resize。
终于让我找到一个好办法了——MutationObserver
MutationObserver 接口提供了监督对 DOM 树所做更改的能力。它代替了旧的Mutation Events（DOM3 Events 标准）。
我只有给侧边栏app-wrapper绑定一个MutationObserver，判断如果批改的是类名属性，则触发resize办法。
具体代码如下：
// 这里没有应用addEventListener resize，是因为侧边栏的实现形式是依据类名transform挪动的。const targetNode = document.getElementsByClassName('app-wrapper')[0]// 观察器的配置（须要察看什么变动）// 还有其它可监听的属性，查阅：https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver/observeconst config = { attributes: true }// 当察看到变动时执行的回调函数const t = thisconst callback = function(mutationsList, observer) { for (const mutation of mutationsList) { if (mutation.type === 'attributes' && mutation.attributeName === 'class') { // 提早是为了期待侧边栏动画之后再计算 setTimeout(() => { t.onResize() }, 250) } }}// 创立一个观察器实例并传入回调函数this.observer = new MutationObserver(callback)// 以上述配置开始察看指标节点this.observer.observe(targetNode, config)PS:记得在beforeDestroy时this.observer.disconnect()。