一文讲清楚DOM动态观察器MutationObserver的原理和使用场景
一文讲清楚DOM动态观察器MutationObserver的原理和使用场景
1. 引出
- 前端的童鞋都应该了然一件事，不管是借助框架像vue/react/angular，还是原生开发，就是我们开发来开发去，操作来操作去，其实本质都是在对页面上的HTML内容进行CURD
- 那既然我们是在对HTML进行CURD，那我们是不是就可以对某个元素进行观察和监听，他是否发生了变化，从而做出相应的业务处理
- 比如我们在做前端的时候，有时候会加入一下三方框架，比如广告插件，我们原本想的是，你就只干你插件的事，不要给我变动我们页面本来的东西，结果呢，这个广告插件就是耍小聪明，偷偷往页面上插了一个button，引导用户点击跳转，从而实现引流
- 这可不是我能接受的，靠，我的流量怎么能跑你那边去了呢
- 又或者这个广告插件特么的可能因为商务关系不太好，给我的站点突然加了一个播放片子的视频，我靠，这可大方了
- 所以，我们要监测一下，这家伙有没有往页面上加东西，怎么检测呢，就用DOM动态观察器，MutationObserver
- 他能检测到DOM节点的详细变化，并且允许指定一个回调函数，在变化发生后回调执行，同时可以通过配置项，配置需要监测的内容，如下表
| 配置项 | 作用 |
|---|---|
| childList | 监听目标节点的子节点增删（如新增 / 删除 ） |
| attribute | 监听目标节点的属性变化，如class/id/src等 |
| characterData | 监听目标节点的文本内容变化，如textContent |
| subtree | 监听目标节点的所有后代节点，开启后，后代节点的变化也会被捕获 |
| attriubteOldValue | 出发回调时，返回属性变化前的值 |
| characterDataOldCalue | 触发回调时，返回文本变化前的值 |
| attributeFilter | 指定监听某下属性，如[src,class]等，减少全量不必要的监听 |
2. 原理
- 对设计模式比较了解的童鞋一眼就可以看出来，这是一个典型的观察者模式
- 观察者：MutationObserver
- 被观察者：目标DOM节点
- 触发逻辑：当被观察者的DOM发生指定类型的变化时，浏览器会将变化事件加入到微任务队列，带主线程空闲时，触发观察者的回调函数，传递变化详情
- 所以说，MutationObserver是异步的，属于微任务，浏览器会把短时间内的多次DOM变化合并为一次回调触发（采用防抖），避免频繁执行回调导致的性能问题
- 同时，因为MutationObserver是异步的，如果你想在Observer里面访问修改后的DOM状态，比如获取尺寸，需要包裹requestAnimationFrame
- 原理知道了，具体怎么用呢
3. 使用
- 分三步
- 第一步，创建observe
- 第二步，设置配置项，也就是你需要监听的类型
- 第三步，绑定目标DOM，开启监听
- 第四步，触发MutationObserve
- 第五步，关闭监听
- 上代码
<divid="target"class="unactive"></div><script>//第一步：创建MutationObserver实例，传入回调函数constobserver=newMutationObserver((mutationList,observer)=>{/** * mutationList是所有触发的DOM变化数组，每个元素都是一个MutationRecord对象 * observer是MutationObserver实例本身，用于关闭实例等操作 */for(constmutationofmutationList){ <