浏览器 常用的Observer，你用过几个？

在日常的开发中，我们经常要监听元素的大小变化、滚动变化、属性变化等等；浏览器其实已为我们提供了API,不需要再为了监听元素变化而辛苦的写一堆代码，即影响性能，又不够优雅，下面介绍下我们常用的几个Observer。

一、IntersectionObserver()

IntersectionObserver 提供了一种异步观察目标元素与其祖先元素或顶级文档 视口（viewport）交叉状态的方法。其祖先元素或视口被称为根（root）。

let options = {
  // root: document.querySelector(null),
  rootMargin: "0px",
  threshold: 1.0,
};

let observer = new IntersectionObserver(([entry]) => {
    if (entry.isIntersecting) {
      // 判断是否在视口内
    }
}, options);

let target = document.querySelector("#mydiv");
observer.observe(target);
// 停止监听
observer.unobserve()

二、MutationObserver()

MutationObserver 接口提供了监视对 DOM 树所做更改的能力。

// 选择需要观察变动的节点
const targetNode = document.getElementById("some-id");

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

// 当观察到变动时执行的回调函数
const callback = function (mutationsList, observer) {
  for (let mutation of mutationsList) {
    if (mutation.type === "childList") {
      console.log("A child node has been added or removed.");
    } else if (mutation.type === "attributes") {
      console.log("The " + mutation.attributeName + " attribute was modified.");
    }
  }
};

// 创建一个观察器实例并传入回调函数
const observer = new MutationObserver(callback);

// 开始观察目标节点
observer.observe(targetNode, config);

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

三、ResizeObserver()

Resize Observer API 提供了一种高性能的机制，通过该机制，代码可以监视元素的大小更改，并且每次大小更改时都会向观察者传递通知。

const resizeObserver = new ResizeObserver((entries) => {
// 发生变化了
});
// 开始观察
resizeObserver.observe(document.querySelector("div"));
// 结束观察
resizeObserver.unobserve()