MutationObserver监视对DOM 树所做更改的功能妙用

MutationObserver是一种Web API，它可以监视对DOM树所做的更改，并在更改发生时触发回调函数。它可以监视DOM的三类更改：子节点树的更改、属性的更改以及文本内容的更改。MutationObserver的用途非常广泛，特别是在与React、Vue等前端框架结合使用时，可以帮助我们轻松地实现数据绑定、自定义指令等功能。

MutationObserver的基本用法

MutationObserver构造函数的第一个参数是一个回调函数，当DOM发生了更改时，会调用这个回调函数。MutationObserver的第二个参数是一个选项对象，它可以指定MutationObserver要监视的DOM更改类型和某些细节。

基本用法示例：

// 选取需要监视的节点
const targetNode = document.getElementById('my-id');

// 创建一个新的 MutationObserver 监视对 targetNode 的更改
const observer = new MutationObserver((mutations) => {
  console.log(mutations);
});

// 监视目标节点的所有更改
observer.observe(targetNode, { attributes: true, childList: true, subtree: true });

在上面的代码中，我们选取了一个id为“my-id”的DOM节点，并创建了一个新的MutationObserver对象。这个新的对象将监视目标节点的所有更改，包括节点的子节点、属性和文本内容的更改。

MutationObserver的妙用

MutationObserver除了可以用来实现数据绑定、自定义指令等常见的前端需求，还可以用来实现一些非常有趣的特效。

下面是两个示例：

监视滚动事件并隐藏指定节点

这个示例演示了如何使用MutationObserver来监视滚动事件，并且在滚动到指定位置时隐藏页面上的某个节点。我们只需要在页面上指定一个用于触发隐藏操作的目标元素，然后计算出它距离页面顶部的距离。接着，我们可以使用MutationObserver来监视页面滚动事件，当我们滚动到指定位置时，就可以隐藏指定节点。

<div id="article" style="position: absolute; top: 0;">
  <!-- 文章内容 -->
</div>

<button id="scroll-top-button">Back to Top</button>

const articleElement = document.getElementById('article');
const scrollTopButton = document.getElementById('scroll-top-button');
const observer = new MutationObserver(() => {
  const scrollTop = document.documentElement.scrollTop;
  if (scrollTop >= articleElement.offsetTop) {
    scrollTopButton.style.display = 'block';
  } else {
    scrollTopButton.style.display = 'none';
  }
});
observer.observe(document.documentElement, { attributes: true, childList: true, subtree: true });

scrollTopButton.addEventListener('click', () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
});

在上面的代码中，我们首先获取了文章内容和返回顶部按钮的DOM元素，然后创建了一个MutationObserver对象来监视页面的滚动事件。在回调函数中，我们计算出了页面距离顶部的距离，并根据这个距离来隐藏或显示返回顶部按钮。

在页面滚动到指定位置时，我们就可以通过点击返回顶部按钮来快速回到页面顶部。

监视鼠标移动事件并绘制连线

这个示例演示了如何使用MutationObserver来监视鼠标移动事件，并在页面上绘制出鼠标移动的连线。我们需要在页面上创建一个canvas元素，并在鼠标移动时，在canvas上绘制连线。为了实现这一功能，我们需要调用canvas的相关API，如beginPath()、lineTo()等。

<canvas id="canvas" style="background-color: #fff; border: 1px solid #ddd;"></canvas>

const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
const observer = new MutationObserver(() => {
  if (isDrawing) {
    context.lineTo(event.clientX, event.clientY);
    context.stroke();
  }
});
observer.observe(document.documentElement, { attributes: true, childList: true, subtree: true });

let isDrawing = false;
canvas.addEventListener('mousedown', () => {
  isDrawing = true;
  context.beginPath();
});
canvas.addEventListener('mousemove', () => {
  if (isDrawing) {
    context.lineTo(event.clientX, event.clientY);
    context.stroke();
  }
});
canvas.addEventListener('mouseup', () => {
  isDrawing = false;
});

在上面的代码中，我们首先获取了canvas元素和绘制上下文对象context。然后，我们创建了一个MutationObserver对象来监视鼠标移动事件，当鼠标移动时，我们可以在canvas上绘制出连线。在mousedown和mouseup事件中，我们处理了连线的开始和结束状态。

这个示例只是简单地演示了MutationObserver的妙用，实际上，它可以用来实现更多有趣的特效，例如实时更新界面、拖拽实现划线等。