MutationObserver监听DOM变化教程

MutationObserver 是浏览器提供的 API，能监听 DOM 的增删改变化。结合它我们可以构建一个轻量级、响应式的自定义视图框架，无需依赖 React 或 Vue 等大型库。

理解 MutationObserver 基本用法

MutationObserver 可以监听节点添加、属性修改、文本内容变化等。创建观察器后，指定目标元素和配置项即可启动监听。

基础示例：

const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    if (mutation.type === 'childList') {
      console.log('节点结构变化：', mutation);
    }
    if (mutation.type === 'attributes') {
      console.log('属性变化：', mutation.target, mutation.attributeName);
    }
  });
});

// 开始监听某个容器
observer.observe(document.getElementById('app'), {
  childList: true,
  subtree: true,
  attributes: true,
  attributeFilter: ['class', 'style']
});

这个机制让我们能在 DOM 发生任何变动时介入处理，是实现响应式更新的关键。

设计简单的数据绑定与模板系统

要实现视图框架，需要将数据变化映射到 DOM 上。我们可以通过解析模板中的表达式，结合 MutationObserver 检测动态区域的变化。

例如，支持类似 {{ message }} 的插值语法：

• 遍历文本节点，查找 {{ }} 模式并提取绑定字段
• 建立数据字段到 DOM 节点的映射关系
• 当数据更新时，找到对应节点并替换内容

简单实现：

function bindText(node, data, keyPath) {
  const update = () => {
    const value = keyPath.split('.').reduce((obj, k) => obj[k], data);
    node.textContent = value;
  };
  // 初次渲染
  update();
  // 将更新函数挂载以便后续调用
  node._updateFn = update;
}

结合 Observer 实现自动更新

单纯监听 DOM 不够，我们要反向驱动——数据变则视图更新。可以使用 Proxy 监听数据模型，在属性变化时触发 DOM 更新。

示例：

function reactive(data, onUpdate) {
  return new Proxy(data, {
    set(target, key, value) {
      target[key] = value;
      onUpdate(key); // 通知更新
      return true;
    }
  });
}

然后在 onUpdate 中调用所有关联的 _updateFn：

const appData = reactive({
  message: 'Hello'
}, (key) => {
  document.querySelectorAll('[data-bind]').forEach(node => {
    if (node._updateFn) node._updateFn();
  });
});

利用 MutationObserver 处理动态组件或指令

对于运行时插入的新元素（如通过 innerHTML 添加），我们需要检测这些动态内容并初始化绑定。

使用 MutationObserver 监听新增节点，并对符合条件的元素进行编译处理：

const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    mutation.addedNodes.forEach(node => {
      if (node.nodeType === 1) { // 元素节点
        if (node.hasAttribute && node.hasAttribute('v-text')) {
          const key = node.getAttribute('v-text');
          bindText(node, appData, key);
        }
        // 递归检查子节点
        node.querySelectorAll('[v-text]').forEach(el => {
          bindText(el, appData, el.getAttribute('v-text'));
        });
      }
    });
  });
});

observer.observe(document.body, {
  childList: true,
  subtree: true
});

这样即使通过 JS 动态插入带指令的元素，也能自动完成数据绑定。

基本上就这些。通过 Proxy 监听数据变化，配合 MutationObserver 捕获 DOM 结构更新，再辅以简单的模板解析，就能实现一个微型但可用的视图框架。虽然功能不如主流框架全面，但在特定场景下足够灵活高效。