浏览器 JS 中的有哪些 Observer，详细介绍四个 Observer 的使用方式

乐闻

2024年02月24日 01:30· 阅读 628

前言

当我们谈到前端开发时，观察者模式（Observer Pattern）是一个非常强大的设计模式，它允许我们订阅和监测某些数据或事件的变化。

在JavaScript的世界里，浏览器提供了几种不同的Observer接口，它们让开发者能够感知并作出反应对于DOM的变动、用户的交互以及性能等方面的改变。

今天，我将为大家介绍几种常见的Observer，并给出简明的解释与示例。

MutationObserver：监听DOM的变动

MutationObserver 是一种能够监听DOM元素变化的接口。它能够告诉你当DOM发生改变时的具体信息，比如节点的增加、删除或属性的变化。下面是一个简单的示例，展示了如何使用 MutationObserver。

javascript
// 创建一个观察者对象
const observer = new MutationObserver(mutations => {
  mutations.forEach(mutation => {
    console.log(mutation);
  });
});

// 配置观察选项
const config = { childList: true, attributes: true };

// 选择目标节点
const targetNode = document.getElementById('some-id');

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

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

IntersectionObserver：监听元素与视口的交叉状态

IntersectionObserver 允许你配置当元素进入或离开视口时的回调函数。这对于实现图片懒加载、无限滚动等功能非常有用。下面是如何使用 IntersectionObserver 的例子。

javascript
// 创建观察者对象
const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // 元素进入视口
      entry.target.classList.add('visible');
    } else {
      // 元素离开视口
      entry.target.classList.remove('visible');
    }
  });
});

// 选择目标节点并观察
const target = document.querySelector('.some-element');
observer.observe(target);

// 取消观察
// observer.unobserve(target);

ResizeObserver：监听元素的尺寸变化

ResizeObserver 提供了一个强大的接口来监测元素的大小变化。当你需要根据元素大小调整布局或功能时，这会非常有用。下面是使用 ResizeObserver 的一个例子。

javascript
// 创建观察者对象
const resizeObserver = new ResizeObserver(entries => {
  for (let entry of entries) {
    console.log('Size changed', entry.contentRect);
  }
});

// 选择目标元素并观察
const box = document.querySelector('.resize-box');
resizeObserver.observe(box);

// 停止观察
// resizeObserver.unobserve(box);

PerformanceObserver：监测性能相关的事件

PerformanceObserver 是用于监测页面性能的Observer。它可以告诉你资源加载时间、用户首次绘制时间等性能指标。下面是如何使用 PerformanceObserver。

javascript
// 创建一个性能观察者对象
const perfObserver = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log(entry);
  }
});

// 开始观察
perfObserver.observe({entryTypes: ['mark', 'measure']});

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

其他Observer

除了上述提到的一些Observer外，还有一些其他的Observer，例如：

MediaQueryList.addListener 和 MediaQueryList.removeListener：用于响应媒体查询状态的变化。
FileReader：虽不严格是Observer，但提供了类似于观察文件读取状态的事件,的监听器。
NetworkInformation API中的 change事件监听器：用于追踪用户的网络连接状态变化。

这些Observer和监听器的运用为前端开发带来了无限的可能性，使得页面可以做出灵活的反应以提升用户体验。

结合实践的应用场景

以下是一些实际应用中可能会使用到Observer的场景：

MutationObserver: 当你需要构建一个动态的、响应式的UI组件时，如一个可以自我更新的评论列表。
IntersectionObserver: 如果你正在开发一个图片画廊，并希望图片在滚动到可视范围内时才开始加载。
ResizeObserver: 当你的网站需要兼容多种屏幕大小，并且在元素尺寸改变时需要重新布局或加载不同的资源。
PerformanceObserver: 如果你在进行性能优化，并希望监视和分析网站的性能指标，以便做出改进。

总结

Observer模式在前端开发中扮演了重要的角色，它们让我们能够构建出更加动态、响应快速并且用户体验极好的应用。正如我们所见，浏览器中的各种Observer提供了一套强大的工具，可以帮助我们实现这些目标。无论是DOM的变化、用户的界面交互、还是性能的监控，这些Observer都能让我们以一种优雅且有效的方式来处理它们。

标签：

JavaScript Browser