前端 Observer API 全家桶：Intersection、Resize 与 MutationObserver 深度实战

1
class ObserverKit {
2
  constructor() {
3
    this.intersectionObserver = null;
4
    this.resizeObservers = new Map();
5
  }
6

7
  // 1) 图片懒加载
8
  lazyImages(selector = 'img[data-src]', { rootMargin = '200px 0px' } = {}) {
9
    if (!('IntersectionObserver' in window)) {
10
      // 降级：直接加载所有图片
11
      document.querySelectorAll(selector).forEach((img) => {
12
        img.src = img.dataset.src;
13
      });
14
      return null;
15
    }
16

17
    const observer = new IntersectionObserver((entries, obs) => {
18
      entries.forEach((entry) => {
19
        if (!entry.isIntersecting) return;
20
        const img = entry.target;
21
        img.src = img.dataset.src;
22
        img.removeAttribute('data-src');
23
        obs.unobserve(img);
24
      });
25
    }, { rootMargin, threshold: 0 });
26

27
    document.querySelectorAll(selector).forEach((img) => observer.observe(img));
28
    this.intersectionObserver = observer;
29
    return observer;
30
  }
31

32
  // 2) 无限滚动
33
  infiniteScroll(sentinel, container, onLoadMore, { rootMargin = '100px 0px' } = {}) {
34
    let loading = false;
35

36
    const observer = new IntersectionObserver(async (entries) => {
37
      if (loading || !entries[0].isIntersecting) return;
38
      loading = true;
39
      observer.unobserve(sentinel);
40
      try {
41
        await onLoadMore();
42
      } finally {
43
        loading = false;
44
        observer.observe(sentinel);
45
      }
46
    }, { root: container, rootMargin, threshold: 0 });
47

48
    observer.observe(sentinel);
49
    return observer;
50
  }
51

52
  // 3) 元素尺寸变化（图表自适应）
53
  watchSize(target, callback, { debounce = 100 } = {}) {
54
    if (!('ResizeObserver' in window)) {
55
      window.addEventListener('resize', () => callback(target));
56
      return null;
57
    }
58
    let timer = null;
59
    const ro = new ResizeObserver(() => {
60
      clearTimeout(timer);
61
      timer = setTimeout(() => callback(target), debounce);
62
    });
63
    ro.observe(target);
64
    this.resizeObservers.set(target, ro);
65
    return ro;
66
  }
67

68
  // 4) DOM 变化 + 防抖
69
  watchDOM(target, callback, { debounce = 50, attributes = true, childList = true } = {}) {
70
    if (!('MutationObserver' in window)) return null;
71
    let timer = null;
72
    const mo = new MutationObserver(() => {
73
      clearTimeout(timer);
74
      timer = setTimeout(callback, debounce);
75
    });
76
    mo.observe(target, { attributes, childList, subtree: true });
77
    return mo;
78
  }
79

80
  destroy() {
81
    this.intersectionObserver?.disconnect();
82
    this.resizeObservers.forEach((ro) => ro.disconnect());
83
    this.resizeObservers.clear();
84
  }
85
}

1
const kit = new ObserverKit();
2

3
// 启动懒加载
4
kit.lazyImages();
5

6
// 无限滚动
7
const list = document.querySelector('#feed');
8
const sentinel = document.querySelector('#sentinel');
9
kit.infiniteScroll(sentinel, list, async () => {
10
  const items = await fetchMoreItems();
11
  items.forEach((it) => list.appendChild(renderItem(it)));
12
});
13

14
// 图表自适应
15
const chartEl = document.querySelector('#chart');
16
const chart = echarts.init(chartEl);
17
kit.watchSize(chartEl, () => chart.resize());