在 DOM 中，观察器（Observer）是用于监听和响应某些变化的对象。以下是几种常见的 DOM 观察器：

1. MutationObserver

MutationObserver 用于监听 DOM 树的变化，比如节点的添加、删除或属性的变化。

示例代码

const observer = new MutationObserver((mutationsList, observer) => {
  for (let mutation of mutationsList) {
    console.log(mutation);
  }
});

// 选择要观察的目标节点
const targetNode = document.getElementById('example');

// 配置观察选项
const config = { attributes: true, childList: true, subtree: true };

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

// 停止观察
// observer.disconnect();

2. ResizeObserver

ResizeObserver 用于监听元素尺寸的变化，比如宽度和高度的变化。

示例代码

const resizeObserver = new ResizeObserver((entries) => {
  for (let entry of entries) {
    console.log('Element resized:', entry.contentRect);
  }
});

// 选择要观察的目标元素
const element = document.getElementById('example');

// 开始观察
resizeObserver.observe(element);

// 停止观察
// resizeObserver.unobserve(element);

// 断开观察器
// resizeObserver.disconnect();

3. IntersectionObserver

IntersectionObserver 用于监听元素与视口（或其他元素）交叉状态的变化，常用于懒加载、无限滚动等场景。

示例代码

const intersectionObserver = new IntersectionObserver((entries, observer) => {
  for (let entry of entries) {
    if (entry.isIntersecting) {
      console.log('Element is in view:', entry.target);
    } else {
      console.log('Element is out of view:', entry.target);
    }
  }
}, {
  root: null, // 默认为视口
  rootMargin: '0px',
  threshold: 0.1 // 10% 可见时触发回调
});

// 选择要观察的目标元素
const targetElement = document.getElementById('example');

// 开始观察
intersectionObserver.observe(targetElement);

// 停止观察
// intersectionObserver.unobserve(targetElement);

// 断开观察器
// intersectionObserver.disconnect();

4. PerformanceObserver

PerformanceObserver 用于监听性能相关的事件，比如资源加载时间、渲染时间等。

示例代码

const performanceObserver = new PerformanceObserver((list) => {
  const entries = list.getEntries();
  entries.forEach((entry) => {
    console.log('Performance entry:', entry);
  });
});

// 开始观察
performanceObserver.observe({ entryTypes: ['resource', 'mark', 'measure'] });

// 停止观察
// performanceObserver.disconnect();

5. ReportingObserver

ReportingObserver 用于监听浏览器报告的潜在问题，比如弃用的 API、浏览器错误等。

示例代码

const reportingObserver = new ReportingObserver((reports, observer) => {
  for (let report of reports) {
    console.log('Report:', report);
  }
}, {
  types: ['deprecation', 'intervention'],
  buffered: true
});

// 开始观察
reportingObserver.observe();

// 停止观察
// reportingObserver.disconnect();

总结

这些观察器在不同的场景中非常有用，可以帮助开发者更好地监控和响应 DOM 的变化、元素的可见性、性能问题等。根据具体需求选择合适的观察器，以便更高效地管理和优化应用。

版权所有

版权归属：tuyongtao1

许可证：署名 4.0 国际 (CC-BY-4.0)