JavaScript中最重要的5个Observer，看这一篇就够了

秋名山大前端

已于 2024-01-04 01:07:56 修改

阅读量1.3k

点赞数 25

文章标签： javascript 前端

于 2024-01-04 01:03:51 首次发布

本文链接：https://blog.csdn.net/weixin_44803406/article/details/135376106

版权

MutationObserver

简介：

MutationObserver用于监听DOM对象的变更，包括节点属性的变化、子节点的增删改等。提供了方便的方式监听DOM变化。

API介绍：

MutationObserver(callback)：创建新的实例，传入变动时的回调函数。
observe(target, config)：开始观察指定目标节点，传入目标节点和配置对象。
disconnect()：停止观察，断开与所有目标节点的关联。

基本使用：

const targetNode = document.getElementById("app");
const config = {
  attributes: true,
  childList: true,
  subtree: true,
  characterData: true
};

const callback = function (mutationsList, observer) {
  console.log(mutationsList);
};

const observer = new MutationObserver(callback);
observer.observe(targetNode, config);

常见场景：

适用于动态渲染Tag group内元素，例如实现简单的Todo List。

<!-- MutationObserver Todo List Demo -->
<!DOCTYPE html>
<html>
<head>
  <title>MutationObserver Todo List Demo</title>
  <style>
    #todo-list {
      list-style-type: none;
    }
  </style>
</head>
<body>
  <h1>Todo List</h1>
  <ul id="todo-list">
    <li>Complete homework</li>
    <li>Go shopping</li>
  </ul>
  <button id="addTask">Add Task</button>
  <button id="removeTask">Remove Task</button>
  <p id="taskCount">Task Count: 2</p>

  <script>
    // JavaScript code for MutationObserver
  </script>
</body>
</html>

IntersectionObserver

简介：

IntersectionObserver用于监听元素在视口中的可见比例变化，适用于性能优化。

API介绍：

IntersectionObserver(callback, options)：创建新的实例，传入变动时的回调函数和配置对象。
observe(target)：开始观察指定目标元素，传入目标元素。
unobserve(target)：停止观察指定目标元素。
disconnect()：停止观察，断开与所有目标元素的关联。

基本使用：

const target = document.getElementById('app');
const options = {
  root: rootTarget,
  rootMargin: '0px',
  threshold: 0.5
};

const intersectionObserver = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    console.log(entry);
  });
}, options);

intersectionObserver.observe(target);

常见场景：

适用于元素可见性变化时执行特定逻辑，例如优化性能。

<!-- Sticky Header with Shadow on Intersection -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sticky Header with Shadow on Intersection</title>
  <style>
    // CSS styles for the example
  </style>
</head>
<body>
  <div id="guard"></div>
  <header id="sticky-header" class="header-shadow">Sticky Header</header>
  <section>
    <p>Scroll down to trigger sticky and show shadow</p>
  </section>

  <script>
    // JavaScript code for IntersectionObserver
  </script>
</body>
</html>

ResizeObserver

简介：

ResizeObserver用于监听DOM尺寸的变化，提供实时获取元素尺寸的能力。

API介绍：

ResizeObserver(callback)：创建新的实例，传入尺寸变化时的回调函数。
observe(target)：开始观察指定目标元素，传入目标元素。
unobserve(target)：停止观察指定目标元素。
disconnect()：停止观察，断开与所有目标元素的关联。

基本使用：

const box = document.getElementById('box');
const resizeObserver = new ResizeObserver(entries => {
  entries.forEach(entry => {
    console.log(entry);
  });
});

resizeObserver.observe(box);

常见场景：

用于实时获取元素尺寸的变化，例如resize-detector。

<!-- ResizeObserver Demo with Resizable Box -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ResizeObserver Demo with Resizable Box</title>
  <style>
    // CSS styles for the example
  </style>
</head>
<body>
  <div id="resizable-box">Resize me!</div>

  <script>
    // JavaScript code for ResizeObserver
  </script>
</body>
</html>

PerformanceObserver

简介：

PerformanceObserver用于监听浏览器的性能事件，便于处理性能相关信息。

API介绍：

PerformanceObserver(callback)：创建新的实例，传入性能事件发生时的回调函数。
observe(options)：开始观察指定类型的性能事件，传入配置对象，指定entryTypes。
disconnect()：停止观察，断开与所有性能事件的关联。

常见entryTypes：

mark：标记时间戳的事件。
measure：performance.measure触发的事件。
frame：网页渲染的事件。
navigation：导航的事件，例如页面加载或重新加载。

基本使用：

function perf_observer(list, observer) {
  console.log(list);
}

const observer2 = new PerformanceObserver(perf_observer);
observer2.observe({ entryTypes: ["measure"] });

常见场景：

适用于对性能敏感的项目和长期性能监控，方便处理各种性能事件。

ReportingObserver

简介：

ReportingObserver用于监听浏览器报告的事件，例如废弃API、过时特性、网络错误等。这在监控SDK等方面经常使用，方便处理各种浏览器报告的事件。

API介绍：

ReportingObserver(callback)：创建新的实例，传入报告事件发生时的回调函数。
observe(options)：开始观察指定类型的报告事件，传入配置对象，指定types。
disconnect()：停止观察，断开与所有报告事件的关联。

基本使用：

const reportingObserver = new ReportingObserver(reports => {
  reports.forEach(report => {
    console.log(report);
  });
});

reportingObserver.observe({ types: ["deprecation", "intervention"] });

常见报告事件类型：

deprecation：废弃API的事件。
intervention：浏览器干预的事件。
crash：浏览器崩溃的事件。
error：一般的错误事件。

常见场景：

适用于监控废弃的API、浏览器干预、浏览器崩溃等情况，方便及时做出处理。

综述：

这篇文章深入研究了JavaScript中最重要的五个Observer，包括MutationObserver、IntersectionObserver、ResizeObserver、PerformanceObserver、ReportingObserver。每个Observer都提供了独特的监听机制，适用于不同的场景。从监听DOM变更到元素可见性、尺寸变化、性能事件以及浏览器报告，这些Observer为开发者提供了丰富的工具，使得处理复杂的Web开发场景更加得心应手。

通过对每个Observer的API介绍和基本使用，开发者可以更好地理解和利用它们，为Web应用的开发、性能优化、监控等方面提供强大的支持。综合运用这些Observer，开发者可以更加高效地处理各种复杂的前端场景，提升用户体验和系统性能。