JavaScript DOM 高级篇

好的兄弟🔥，这是JavaScript DOM 高级篇的核心知识点合集，包含实战常用、高频面试点、组件封装思路，🌈彩色图标+通俗解释，硬核但不烧脑：

---

🧠 一、MutationObserver：监听 DOM 变化

✅ 用于：监听元素增删、属性变化、文本改动等（无轮询）

const observer = new MutationObserver((mutations) => {
  console.log(mutations); // 变化记录
});
observer.observe(targetElement, {
  childList: true,
  attributes: true,
  subtree: true,
});

🔧 应用场景：

• 弹窗、评论区动态插入监听

• 页面变化驱动业务逻辑（如统计PV）

---

👁️ 二、IntersectionObserver：监听元素是否进入视口

✅ 用于：懒加载、曝光埋点、吸顶菜单等场景

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('元素进入可视区域');
    }
  });
});
observer.observe(document.querySelector("#target"));

---

🎯 三、自定义事件 & 事件总线（组件通信）

✅ 自定义事件：

const event = new CustomEvent("myEvent", { detail: { foo: 123 } });
element.dispatchEvent(event);

element.addEventListener("myEvent", e => {
  console.log(e.detail.foo); // 123
});

✅ 事件总线（Event Bus 简版）：

const Bus = new EventTarget();
Bus.addEventListener("msg", e => console.log(e.detail));
Bus.dispatchEvent(new CustomEvent("msg", { detail: "hello" }));

🚀 用于多个模块/组件通信，不用硬绑定

---

🏗️ 四、Virtual DOM 简析

• 真实 DOM 改动慢，操作多了性能差

• 虚拟 DOM 是 JS 中的“对象树”，diff 算法只更新必要的部分

• 常用于框架底层（React、Vue）

✅ 手写简单 virtualDOM 渲染器（了解原理）

---

🧱 五、模板引擎 + DOM 拼接优化

// 模板字符串拼接 HTML
const html = `
  <li>
    <h3>${item.title}</h3>
    <p>${item.desc}</p>
  </li>
`;
container.innerHTML += html;

📌 注意防止 XSS，动态拼接时最好用 .textContent 或 DOM 创建节点方式更安全

---

🧠 六、DOM 性能优化技巧

技巧	说明
📦 批量更新用 DocumentFragment	一次插入多个元素不频繁重绘
🧹 减少重排重绘	用 style.classList 替代逐条 .style.xx
🎯 事件节流/防抖	滚动 resize 高频事件控制回调频率
📌 事件委托替代重复绑定	子元素太多时，委托父级更轻

---

📦 七、封装组件化 UI（原生）

目标是：封装可复用的组件，支持属性传参、事件绑定、动态渲染👇

function createCard({ title, desc }) {
  const div = document.createElement("div");
  div.className = "card";
  div.innerHTML = `<h3>${title}</h3><p>${desc}</p>`;
  return div;
}
container.appendChild(createCard({ title: "新闻", desc: "今天下雨了" }));

📌 可以进一步加配置、事件回调，自定义生命周期，更接近类 Vue/React 的写法。

---

🔐 八、安全相关（XSS、DOM 污染）

危险行为	推荐做法
innerHTML 插入用户数据	🚫避免，改用 textContent
动态 script/css 注入	做好白名单过滤
点击劫持	设置 X-Frame-Options

---

✅ 总结：高级 DOM 的关键词

MutationObserver、IntersectionObserver、CustomEvent、Virtual DOM、
事件总线、DocumentFragment、组件封装、节流防抖、XSS防护