目录

深入理解 JavaScript 中的 MutationObserver:原理与实战案例

一、MutationObserver 简介

二、MutationObserver 的工作原理

1、基本用法

2、observe 方法的配置项

三、实战案例

案例 1:监控动态内容加载

案例 2:监控属性变化

案例 3:防止 DOM 劫持

案例 4:优化页面性能

四、总结


作者:watermelo37

涉及领域:Vue、SpingBoot、Docker、LLM、python等

---------------------------------------------------------------------

温柔地对待温柔的人,包容的三观就是最大的温柔。

---------------------------------------------------------------------

深入理解 JavaScript 中的 MutationObserver:原理与实战案例

        在前端基于Vue的开发中,我们会用watch来监听数据的变化,甚至还可以通过deep属性的配置项来监听对象内部的变化(侦听器watch用法详解,vue2与vue3中watch的变化与差异),我们也知道在 Vue2 中 watch 的底层是通过 Vue 中的一个叫做 hasChange 的函数来判断参数是否变化,而深层监听则是添加了遍历的操作,在 Vue3 中由于使用 proxy 替代了defineProperty ,便利程度大大提高。可是如果我们想监听的不只是数据的变化,而涉及到DOM的变化呢?

        JavaScript 提供了多种 API 来操作 DOM 结构。而在操作 DOM 时,我们经常需要监测 DOM 的变化,这时候,MutationObserver 就显得格外有用。在这篇博客中,我们将详细介绍 MutationObserver 的工作原理,并通过几个实战案例帮助你全面掌握如何在实际项目中使用 MutationObserver。

         同时mutationObserver在事件循环中会放入微队列,拥有最高优先级的执行顺序,什么是事件循环?JS实现异步的基础是什么?具体内容详见:最细最有条理解析:事件循环(消息循环)是什么?为什么JS需要异步

一、MutationObserver 简介

        MutationObserver 是 HTML5 引入的一种用于监听 DOM 树变化的接口。它可以在 DOM 树发生以下变化时执行回调函数:

  1. 元素的子树发生变化(子节点的添加、删除或重排序)。
  2. 元素的属性发生变化。
  3. 元素的文本内容发生变化。

        与传统的 DOM 事件(如 DOMSubtreeModified、DOMNodeInserted、DOMNodeRemoved 等)相比,MutationObserver 提供了更高效和更灵活的 API。

二、MutationObserver 的工作原理

        MutationObserver 通过异步方式监测 DOM 变化,这意味着当 DOM 变化发生时,MutationObserver 不会立即执行回调函数,而是将这些变化存入一个队列中,并在本轮 JavaScript 执行完之后,才批量处理这些变化。这种异步批量处理的机制,使得 MutationObserver 更加高效。

1、基本用法

        使用 MutationObserver 的基本步骤如下:

  • 创建一个 MutationObserver 实例,传入一个回调函数。
  • 使用 observe 方法开始监听目标节点及其相关的变化。
  • 当不再需要监听时,使用 disconnect 方法停止观察。
// 1. 创建一个 MutationObserver 实例,并传入回调函数
const observer = new MutationObserver((mutationsList, observer) => {
  for (let mutation of mutationsList) {
    if (mutation.type === 'childList') {
      console.log('A child node has been added or removed.');
    } else if (mutation.type === 'attributes') {
      console.log('The ' + mutation.attributeName + ' attribute was modified.');
    }
  }
});

// 2. 开始监听目标节点
const targetNode = document.getElementById('myElement');
const config = { attributes: true, childList: true, subtree: true };

observer.observe(targetNode, config);

// 3. 停止监听
// observer.disconnect();

2、observe 方法的配置项

        observe 方法接受两个参数:目标节点和一个配置对象。配置对象用于指定要观察哪些类型的变化。常用配置项包括:

  • attributes: 当元素的属性变化时触发回调(默认为 false)。
  • childList: 当目标节点的子节点被添加或删除时触发回调(默认为 false)。
  • subtree: 当设置为 true 时,监视目标节点及其所有后代节点的变化(默认为 false)。
  • characterData: 当节点的文本内容变化时触发回调(默认为 false)。
  • attributeOldValue: 当属性变化时,记录变化前的属性值(默认为 false)。
  • characterDataOldValue: 当文本节点变化时,记录变化前的文本内容(默认为 false)。
  • attributeFilter: 一个属性名称的数组,指定监听的属性变化(如果不设置,则监听所有属性)。

三、实战案例

        通过以下几个案例,我们来探讨 MutationObserver 的实际应用场景和优势。

案例 1:监控动态内容加载

        在一些 SPA(单页应用)中,内容是通过 AJAX 动态加载到页面上的。我们可以使用 MutationObserver 监控这些动态内容的加载,并在加载完成后进行一些操作(如绑定事件、修改样式等)

// 动态内容加载容器
const contentContainer = document.getElementById('content');

// 创建观察者实例
const observer = new MutationObserver((mutationsList) => {
  for (let mutation of mutationsList) {
    if (mutation.type === 'childList') {
      console.log('New content has been loaded:', mutation.addedNodes);
      // 对新增的节点进行一些操作
      mutation.addedNodes.forEach(node => {
        if (node.nodeType === Node.ELEMENT_NODE) {
          // 绑定事件,或执行其他逻辑
          node.addEventListener('click', () => console.log('New element clicked!'));
        }
      });
    }
  }
});

// 配置选项
const config = { childList: true, subtree: true };

// 开始监控
observer.observe(contentContainer, config);

        在这个案例中,我们监控一个动态内容加载容器,当新的子节点被添加到容器中时,我们对新增的节点绑定点击事件。

案例 2:监控属性变化

        假设我们有一个需求,需要在某个元素的 data-status 属性发生变化时做出响应。MutationObserver 可以轻松实现这一需求。

// 目标节点
const statusElement = document.getElementById('status');

// 创建观察者实例
const observer = new MutationObserver((mutationsList) => {
  for (let mutation of mutationsList) {
    if (mutation.type === 'attributes' && mutation.attributeName === 'data-status') {
      console.log('Status changed to:', statusElement.getAttribute('data-status'));
    }
  }
});

// 配置选项
const config = { attributes: true, attributeFilter: ['data-status'] };

// 开始监控
observer.observe(statusElement, config);

案例 3:防止 DOM 劫持

        在一些恶意脚本或第三方插件注入的情况下,DOM 结构可能会被劫持。我们可以使用 MutationObserver 检测 DOM 结构的异常变化,从而做出防护措施。

// 目标节点
const body = document.body;

// 创建观察者实例
const observer = new MutationObserver((mutationsList) => {
  for (let mutation of mutationsList) {
    if (mutation.type === 'childList') {
      mutation.addedNodes.forEach(node => {
        if (node.nodeType === Node.ELEMENT_NODE && node.tagName === 'SCRIPT') {
          console.warn('Potentially malicious script detected!');
          // 移除恶意脚本
          node.parentNode.removeChild(node);
        }
      });
    }
  }
});

// 配置选项
const config = { childList: true, subtree: true };

// 开始监控
observer.observe(body, config);

案例 4:优化页面性能

        有时候我们可能需要对大量 DOM 操作进行批量处理,而不是每次操作都立即反应。MutationObserver 可以用来检测批量 DOM 变化并集中处理,从而优化页面性能。

        在这个例子中,我们批量向容器中添加了 1000 个子节点,而 MutationObserver 会统一处理这些 DOM 变化,有效减少了重绘和重排操作。

// 目标节点
const container = document.getElementById('container');

// 创建观察者实例
const observer = new MutationObserver((mutationsList) => {
  mutationsList.forEach(mutation => {
    if (mutation.type === 'childList') {
      // 批量处理逻辑
      console.log('Batch processing DOM changes');
    }
  });
});

// 配置选项
const config = { childList: true, subtree: true };

// 开始监控
observer.observe(container, config);

// 批量修改 DOM
const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
  const newDiv = document.createElement('div');
  newDiv.textContent = `Item ${i}`;
  fragment.appendChild(newDiv);
}
container.appendChild(fragment);

四、总结

        MutationObserver 是一个非常强大的 API,提供了一种高效、灵活的方式来监听和响应 DOM 变化。它解决了传统 DOM 事件监听器的诸多局限性,通过异步、批量的方式处理 DOM 变化,大大提高了性能和效率。在实际开发中,合理使用 MutationObserver 可以帮助我们更好地控制 DOM 操作,提高代码的健壮性和可维护性。

         只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~

        更多优质内容,请关注:

        你真的会使用Vue3的onMounted钩子函数吗?Vue3中onMounted的用法详解

        通过array.filter()实现数组的数据筛选、数据清洗和链式调用

        极致的灵活度满足工程美学:用Vue Flow绘制一个完美流程图

        el-table实现动态数据的实时排序,一篇文章讲清楚elementui的表格排序功能

        干货含源码!如何用Java后端操作Docker(命令行篇)

        JavaScript中闭包详解+举例,闭包的各种实践场景:高级技巧与实用指南

        PDF预览:利用vue3-pdf-app实现前端PDF在线展示

        Docker 入门全攻略:安装、操作与常用命令指南

        shpfile转GeoJSON且控制转化精度;如何获取GeoJSON?GeoJson结构详解

        巧用Array.forEach:简化循环与增强代码可读性

        通过array.reduce()实现数据汇总、条件筛选和映射、对象属性的扁平化、转换数据格式等

        Mapbox添加行政区矢量图层、分级设色图层、自定义鼠标悬浮框、添加天地图底图等

Logo

欢迎加入西安开发者社区!我们致力于为西安地区的开发者提供学习、合作和成长的机会。参与我们的活动,与专家分享最新技术趋势,解决挑战,探索创新。加入我们,共同打造技术社区!

更多推荐