Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

MutationObserver是什么? #173

Open
FrankKai opened this issue Dec 26, 2019 · 4 comments
Open

MutationObserver是什么? #173

FrankKai opened this issue Dec 26, 2019 · 4 comments

Comments

@FrankKai
Copy link
Owner

FrankKai commented Dec 26, 2019

  • MutationObserver概览
  • MutationObserver构造器
  • MutationObserver实战
@FrankKai
Copy link
Owner Author

MutationObserver概览

  • MutationObserver interface可以用来监测DOM树的变化。
  • MutationObserver 是旧的DOM3事件规范Mutation Events特性的一个替换。
  • 在DOM事件触发的时候,会触发MutationObserver中传入的callback。
  • DOM监听是不会立刻开始的,必须调用observer()方法才能监听。

@FrankKai
Copy link
Owner Author

MutationObserver构造器

var observer = new MutationObserver(callback);

callback接受MutationRecord和MutationObserver两个入参。MutationRecord描述的是变化;MutationObserver触发callback。

示例

  • 下面的例子创建了一个MutationObserver
  • 这个observer watch了一个node和它的所有children element的新增和移除,以及element上的attribute的变化。
callback function
function callback(mutationList, observer) {
    mutationList.forEach((mutation) => {
        switch (mutation.type) {
            case 'childList':
                // 关注mutation.addedNodes和mutation.removedNodes属性
                break;
            case 'attributes':
                // 关注mutation.target, mutation.attributeName, mutation.oldValue
               break;
        }
    })
}

callback() 函数会在observer用observe()开始监视DOM时,指定的观察请求配置相匹配的更改时,将调用callback()函数。
所发生的更改(对子列表的更改或对属性的更改)通过查看mutation.type属性。

创建并且启动observer

下面的代码设置了整个观察进度。

var targetNode = document.querySelector("#someElement");
var observerOptions = {
    childList: true,
    attributes: true,
    subtree: true, // 忽略或设置为false,只观察父节点的更改
}
var observer = new MutationObserver(callback);
observer.observe(targetNode, observerOptions);
  • targetNode上每次元素从DOM树上添加或者删除,callback都会调用;属性值发生变化,callback也会调用。
  • 直到disconnect()方法调用,targetNode才会从DOM树上移除。

@FrankKai
Copy link
Owner Author

FrankKai commented Dec 26, 2019

MutationObserver实战

自定义高德地图panel样式(与深度选择器效果相同的js方案)

<style lang="scss">
// 隐藏跳转高德地图的按钮
/deep/ .amap-call {
  display: none;
}
</style>
为什么要动态监听panel子节点?
  • 全局css会影响污染全局环境,其他地方的高德地图panel会被影响
  • scoped单文件组件中可以使用深度选择器修改样式,/deep/ .amap-all 或者 .map-container >>> .amap-all

不使用深度选择器的话,还有没有其他的方式去修改?
监听panel动态插入 .amap-all DOM或许可以试试。

实现步骤
  • 创建MutationObserver,监听高德地图panel DOM树变化
  • 创建callback,捕捉.amap-call class元素隐藏跳转高德地图的按钮
  • 组件销毁前disconnect()取消监听
代码实现
<div id="panel"></div>
 // 动态检测panel的amap-call节点
observePanelAmapCallNode() {
  const callback = (mutationList, observer) => {
    mutationList.forEach((mutation) => {
      switch (mutation.type) {
        case 'childList':
          // 关注mutation.addedNodes和mutation.removedNodes属性
          console.log(mutation, observer);
          if (mutation.addedNodes[0].className === 'amap-call') {
            mutation.addedNodes[0].style.display = 'none';
          }
          break;
        default: {
          console.log(mutation, observer);
        }
      }
    });
  };
  const targetNode = document.querySelector('#panel');
  const observerOptions = {
    childList: true,
    subtree: true,
  };
  this.panelAmapCallNodeObserver = new MutationObserver(callback);
  this.panelAmapCallNodeObserver.observe(targetNode, observerOptions);
},
// 取消监听observer
disconnectObserver() {
  this.panelAmapCallNodeObserver.disconnect();
},
mounted() {
    this.observePanelAmapCallNode();
}
beforeDestroy() {
    this.disconnectObserver();
}

默认样式(修改前)
image

自定义样式(修改后)
image

MutationObserver成功!

@FrankKai
Copy link
Owner Author

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant