实用的javaScript API

ResizeObserver:

1. ResizeObserver API 在 JavaScript 中用于监控元素尺寸的变化。这对于响应式设计特别有用，比如在元素大小变化时调整布局或功能。

   ResizeObserver() {
      let _this = this;
      // 选择你想监听的元素
      const element = document.querySelector(".contract-pc-pricePanel");

      // 创建一个新的ResizeObserver实例并传入一个回调函数
      this.resizeObserver = new ResizeObserver((entries) => {
        for (let entry of entries) {
          // entry的contentRect属性包含了元素的尺寸信息
          const { width, height } = entry.contentRect;
          // console.log(`Element's size: ${width}px x ${height}px`);
          _this.heightBig = height;
        }
      });

      // 使用observe方法订阅对元素的观察
      this.resizeObserver.observe(element);
    },

2.停止观察：如果不再需要观察变化，可以使用 unobserve 方法停止观察一个元素，或者用 disconnect 停止观察所有元素。

resizeObserver.unobserve(myElement); // 停止观察特定元素
resizeObserver.disconnect(); // 停止观察所有元素

IntersectionObserver：

1.IntersectionObserver API 在 JavaScript 中用于异步监视目标元素与其祖先元素或顶级文档视窗（viewport）的交叉状态。这个 API 对于实现诸如图片懒加载、无限滚动、动画触发等功能特别有用.

const observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
        // 每个 entry 都是一个 IntersectionObserverEntry 对象
        if (entry.isIntersecting) {
            // 处理元素可见的情况
            console.log(entry.target, '进入视口');
        } else {
            // 处理元素不可见的情况
            console.log(entry.target, '离开视口');
        }
    });
}, options);

2.  设置选项：在创建 IntersectionObserver 时，可以提供一个选项对象来定制其行为。选项包括：

• root：指定用作视口的元素。如果不指定或为 null，则默认使用浏览器视窗。
• rootMargin：类似于 CSS 的 margin，用来扩展或缩小 root 的边界，从而增大或减小检测区域。
• threshold：一个数字或数字数组，指定观察器的触发阈值。比如，如果设置为 0.5，则当目标元素至少有 50% 可见时，回调函数将被触发。

// 创建一个配置选项对象
const options = {
  root: null, // 使用默认的视窗作为视口
  rootMargin: '0px', // 不改变视口的大小
  threshold: 0.5 // 目标元素有一半在视口内时触发
};

// 创建 IntersectionObserver 实例
const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // 处理目标元素可见
      console.log(entry.target, '可见');
    }
  });
}, options);

// 观察目标元素
const target = document.querySelector('.target-element');
observer.observe(target);

3.观察元素：使用 observe 方法来指定要监视的目标元素。

const target = document.querySelector('.target-element');
observer.observe(target);

4.停止观察：使用 unobserve 方法来停止监视某个特定元素，或者使用 disconnect 方法来停止监视所有元素。

observer.unobserve(target);  // 停止观察特定元素
observer.disconnect();       // 停止观察所有元素