关于前端:JS事件侧边栏影响右侧宽度-监听类名MutationObserver

场景是这样的，之前的共事做了一个侧边栏，监听屏幕宽度显示不同的状态。

第一种状况：屏幕宽度足够时，侧边栏齐全开展，

第二种状况：达到肯定宽度时，缩起一点，只留下侧边栏中图标的局部。

如果再变窄，就间接暗藏侧边栏。

按理说，这是十分“智能”的侧边栏了，然而他的实现形式让我当初很头疼。

先说下他怎么实现的，第一种状态下，给父级一个 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/observe
const config = {attributes: true}

// 当察看到变动时执行的回调函数
const t = this
const 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()。