【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()。