观察者模式与MutationObserver 深入探讨

2023-12-08 12:35:22

Mutation Observer API 作为一种用来监视 DOM 变动的强大工具，在网页开发中发挥着重要作用。与传统的事件监听器不同，Mutation Observer API 可以让我们监听 DOM 树的任何变化，包括节点的增删、属性的变动以及文本内容的改变，从而实现更加灵活和细粒度的 DOM 操作。

Mutation Observer API 是一个异步 API，这意味着它不会阻塞页面的渲染和执行，也不会造成页面卡顿。在实现上，Mutation Observer API 采用了微任务的机制，即当 DOM 发生变化时，Mutation Observer API 会将相应的回调函数加入到微任务队列中，等待主线程的空闲时间再执行这些回调函数。这种设计使得 Mutation Observer API 能够在保证性能的同时，仍然能够及时地响应 DOM 的变化。

Mutation Observer API 的使用非常简单，首先需要创建一个 MutationObserver 对象，然后将这个对象与要监听的 DOM 元素关联起来，最后在 MutationObserver 对象上添加回调函数，用于处理 DOM 发生变化时触发的事件。

举个例子，如果我们想监听某个元素的文本内容变化，可以使用以下代码：

const target = document.getElementById('target');
const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.type === 'characterData') {
      console.log(`The text content of the element has changed to: ${mutation.target.textContent}`);
    }
  });
});

observer.observe(target, { characterData: true });