JavaScript中最重要的5个Observer，看这一篇就够了
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。
DOCTYPE html>
<html>
<head>
<title>MutationObserver Todo List Demotitle>
<style>
#todo-list {
list-style-type: none;
}
style>
head>
<body>
<h1>Todo Listh1>
<ul id="todo-list">
<li>Complete homeworkli>
<li>Go shoppingli>
ul>
<button id="addTask">Add Taskbutton>
<button id="removeTask">Remove Taskbutton>
<p id="taskCount">Task Count: 2p>
<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);
常见场景：
适用于元素可见性变化时执行特定逻辑，例如优化性能。
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 Intersectiontitle>
<style>
// CSS styles for the example
style>
head>
<body>
<div id="guard">div>
<header id="sticky-header" class="header-shadow">Sticky Headerheader>
<section>
<p>Scroll down to trigger sticky and show shadowp>
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。
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 Boxtitle>
<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，开发者可以更加高效地处理各种复杂的前端场景，提升用户体验和系统性能。