JavaScript内核与高级编程之：`JavaScript`的`MutationObserver`：如何监听 `DOM` 树的动态变化，其与事件冒泡的区别。

各位靓仔靓女们，晚上好！我是你们的老朋友，今天咱们聊点刺激的——MutationObserver，一个能让你像开了上帝视角一样观察 DOM 树的家伙。

别害怕，虽然名字听起来高大上，但其实它就是个“好奇宝宝”，专门盯着 DOM 树的一举一动，一旦发现什么变化，立马通知你。而且，它跟事件冒泡可不是一回事，咱们今天就好好掰扯掰扯。

一、MutationObserver 是个啥？

简单来说，MutationObserver 是一个 JavaScript API，用于异步监听 DOM 树的变化。它能监听到节点的新增、删除、属性修改、文本内容修改等等。

想想看，如果你想在用户修改输入框内容后立即更新页面上的其他元素，或者在某个元素被添加到页面后执行一些初始化操作，MutationObserver 就能派上大用场。

二、MutationObserver 怎么用？

使用 MutationObserver 主要分为三个步骤：

创建观察者实例： 用 new MutationObserver(callback) 创建一个观察者实例。callback 是一个函数，当观察到变化时会被调用。
配置观察选项： 通过 observe(target, options) 方法来配置观察选项。target 是你想要观察的 DOM 节点，options 是一个对象，用于指定要观察的变化类型。
开始观察： 调用 observe() 方法后，观察者就开始工作了，一旦 DOM 树发生指定的变化，callback 函数就会被执行。

代码示例：

// 1. 创建观察者实例
const observer = new MutationObserver(mutations => {
  mutations.forEach(mutation => {
    console.log('Mutation detected!', mutation);
    // 在这里处理观察到的变化
  });
});

// 2. 配置观察选项
const targetNode = document.getElementById('my-element'); // 假设页面上有一个 id 为 my-element 的元素
const config = {
  attributes: true,  // 观察属性变化
  childList: true,   // 观察子节点变化
  subtree: true,     // 观察后代节点的变化
  characterData: true, // 观察文本节点的变化
  attributeOldValue: true, // 记录属性修改前的值
  characterDataOldValue: true // 记录文本节点修改前的值
};

// 3. 开始观察
observer.observe(targetNode, config);

// 如果不再需要观察，可以停止观察
// observer.disconnect();

config 选项详解：

选项名	描述
`attributes`	布尔值，是否观察属性变化。
`childList`	布尔值，是否观察子节点的变化（新增、删除）。
`subtree`	布尔值，是否观察目标节点的所有后代节点的变化。
`characterData`	布尔值，是否观察文本节点（`Text` 节点）的数据变化。
`attributeOldValue`	布尔值，如果 `attributes` 为 `true`，则是否记录属性修改前的值。
`characterDataOldValue`	布尔值，如果 `characterData` 为 `true`，则是否记录文本节点数据修改前的值。
`attributeFilter`	数组，指定要观察的属性名。如果设置了此选项，则只有指定的属性发生变化时才会触发回调函数。例如：`attributeFilter: ['class', 'style']` 只会监听 `class` 和 `style` 属性的变化。

mutation 对象详解：

callback 函数接收一个 mutations 数组作为参数，每个 mutation 对象代表一个变化。mutation 对象包含以下属性：

属性名	描述
`type`	字符串，表示变化的类型。可能的值有：`"attributes"`（属性变化）、`"childList"`（子节点变化）、`"characterData"`（文本节点数据变化）。
`target`	`Node` 对象，表示发生变化的节点。
`addedNodes`	`NodeList` 对象，表示新增的节点列表。只有当 `type` 为 `"childList"` 时有效。
`removedNodes`	`NodeList` 对象，表示被移除的节点列表。只有当 `type` 为 `"childList"` 时有效。
`previousSibling`	`Node` 对象，表示被添加或移除的节点的前一个兄弟节点。只有当 `type` 为 `"childList"` 时有效。
`nextSibling`	`Node` 对象，表示被添加或移除的节点的后一个兄弟节点。只有当 `type` 为 `"childList"` 时有效。
`attributeName`	字符串，表示被修改的属性名。只有当 `type` 为 `"attributes"` 时有效。
`attributeNamespace`	字符串，表示被修改属性的命名空间。只有当 `type` 为 `"attributes"` 时有效，并且属性使用了命名空间。
`oldValue`	字符串，表示修改前的值。如果 `attributeOldValue` 或 `characterDataOldValue` 为 `true`，则此属性有效。对于 `"attributes"` 类型的变化，表示修改前的属性值；对于 `"characterData"` 类型的变化，表示修改前的文本节点数据。

三、MutationObserver 与事件冒泡的区别

这可是个重点！很多人容易把 MutationObserver 和事件冒泡搞混。虽然它们都和 DOM 树有关，但本质上完全不同。

特性	`MutationObserver`	事件冒泡
触发时机	`DOM` 树发生变化时触发（异步）。	特定事件发生时触发（例如：点击、鼠标悬停等）。
监听目标	监听的是 `DOM` 树的结构和内容变化。	监听的是特定类型的事件。
传播方式	不会像事件一样冒泡或捕获。它直接在目标节点上触发回调函数。	事件会从触发事件的元素开始，沿着 `DOM` 树向上冒泡，直到 `document` 元素。也可以设置为捕获模式，从 `document` 元素向下传递到目标元素。
同步/异步	异步执行。这意味着 `MutationObserver` 的回调函数会在当前任务队列的末尾执行，不会阻塞主线程。	同步执行。事件处理函数会在事件发生时立即执行，可能会阻塞主线程。
使用场景	适用于需要监听 `DOM` 树变化的场景，例如：单页应用的状态管理、富文本编辑器、动态加载的内容等等。	适用于需要响应用户交互的场景，例如：按钮点击、表单提交、鼠标悬停等等。
性能影响	对性能的影响相对较小，因为它是异步执行的，不会阻塞主线程。但是，如果观察的范围过大或者回调函数执行时间过长，仍然可能影响性能。	如果事件处理函数执行时间过长，可能会阻塞主线程，导致页面卡顿。过度使用事件监听器也可能影响性能。
控制	可以通过 `disconnect()` 方法停止观察，通过 `takeRecords()` 方法获取所有未处理的变更记录。	可以通过 `stopPropagation()` 方法阻止事件冒泡，通过 `preventDefault()` 方法阻止事件的默认行为。

举个例子：

想象一下，你在一个购物网站上，有一个购物车列表。

MutationObserver 的用武之地： 当用户添加或删除购物车商品时，MutationObserver 可以监听到购物车列表 DOM 结构的变化，然后自动更新购物车总价。
事件冒泡的用武之地： 当用户点击“添加到购物车”按钮时，会触发一个 click 事件。这个事件会沿着 DOM 树向上冒泡，最终被按钮的父元素（例如：商品列表项）捕获，然后执行相应的事件处理函数，将商品添加到购物车。

总结：

MutationObserver 就像一个默默守护 DOM 树的卫士，它关注的是 DOM 结构的变化，而事件冒泡关注的是用户的交互行为。它们是两种不同的机制，服务于不同的目的。

四、高级用法与注意事项

使用 takeRecords() 获取未处理的变更记录：

takeRecords() 方法可以获取所有未处理的变更记录，并清空变更队列。这个方法通常在停止观察之前使用，以确保所有变更都得到处理。

observer.disconnect(); // 停止观察
const pendingMutations = observer.takeRecords(); // 获取未处理的变更记录
pendingMutations.forEach(mutation => {
  console.log('Pending mutation:', mutation);
  // 处理未处理的变更
});

避免无限循环：

在使用 MutationObserver 时，要特别注意避免无限循环。例如，如果在回调函数中修改了被观察的 DOM 节点，可能会再次触发回调函数，导致无限循环。

为了避免无限循环，可以采取以下措施：
- 在回调函数中设置一个标志位，用于判断是否需要执行修改操作。
- 使用 setTimeout() 函数延迟执行修改操作，将修改操作放到下一个任务队列中执行。
- 临时停止观察，执行修改操作后，再重新开始观察。
```
let isUpdating = false; // 标志位

const observer = new MutationObserver(mutations => {
  if (isUpdating) {
    return; // 如果正在更新，则直接返回
  }

  isUpdating = true; // 设置标志位

  mutations.forEach(mutation => {
    // 在这里处理观察到的变化
    // 注意：避免在回调函数中修改被观察的 DOM 节点，否则可能导致无限循环
  });

  isUpdating = false; // 重置标志位
});
```
性能优化：

虽然 MutationObserver 是异步执行的，对性能的影响相对较小，但是，如果观察的范围过大或者回调函数执行时间过长，仍然可能影响性能。

为了优化性能，可以采取以下措施：
- 尽量缩小观察范围，只观察需要监听的 DOM 节点。
- 避免在回调函数中执行耗时的操作。
- 使用 attributeFilter 选项，只监听特定的属性变化。
- 使用 debounce 或 throttle 技术，减少回调函数的执行频率。
兼容性：

MutationObserver 的兼容性很好，几乎所有现代浏览器都支持它。但是，为了兼容旧版本的浏览器，可以使用 polyfill。

五、实战演练

咱们来个更具体的例子。假设你有一个在线聊天应用，你想在用户发送消息后，自动滚动到聊天窗口的底部。

<div id="chat-window" style="overflow-y: scroll; height: 200px;">
  <div id="chat-messages">
    <!-- 聊天消息将在这里动态添加 -->
  </div>
</div>

<input type="text" id="message-input">
<button id="send-button">发送</button>

<script>
  const chatWindow = document.getElementById('chat-window');
  const chatMessages = document.getElementById('chat-messages');
  const messageInput = document.getElementById('message-input');
  const sendButton = document.getElementById('send-button');

  const observer = new MutationObserver(() => {
    // 滚动到聊天窗口底部
    chatWindow.scrollTop = chatWindow.scrollHeight;
  });

  observer.observe(chatMessages, { childList: true }); // 观察 chat-messages 元素的子节点变化

  sendButton.addEventListener('click', () => {
    const messageText = messageInput.value;
    if (messageText) {
      const messageElement = document.createElement('div');
      messageElement.textContent = messageText;
      chatMessages.appendChild(messageElement); // 添加消息到聊天窗口
      messageInput.value = ''; // 清空输入框
    }
  });
</script>

在这个例子中，MutationObserver 监听 chat-messages 元素的子节点变化。当用户发送消息后，新的消息会被添加到 chat-messages 元素中，MutationObserver 就会触发回调函数，将聊天窗口滚动到底部。

六、总结

MutationObserver 是一个强大的工具，可以让你轻松地监听 DOM 树的变化。它与事件冒泡不同，关注的是 DOM 结构的变化，而不是用户的交互行为。掌握 MutationObserver，可以让你编写更加灵活和高效的 JavaScript 代码。

希望今天的讲解对大家有所帮助！记住，多练习，多实践，才能真正掌握 MutationObserver 的精髓。下次再见！

发表回复 取消回复

发表回复取消回复