浏览器原生提供的观察者模式，一个不容忽视的强大功能

前端

2023-12-30 18:01:45

观察者模式，又称发布-订阅模式，是一种软件设计模式，它允许对象订阅事件，以便在事件发生时收到通知。浏览器原生提供的观察者模式就是这一模式的一个实现，为开发人员提供了一种简单而强大的方式来处理特定的场景。

观察者模式的优势

观察者模式具有以下优势：

松散耦合： 观察者和被观察者之间是松散耦合的，这意味着它们可以独立于彼此进行更改。
可扩展性： 新观察者可以随时添加或删除，而无需修改被观察者。
代码重用： 观察者模式可以提高代码重用性，因为它可以将观察者逻辑与被观察者逻辑分离。

浏览器原生观察者的实现

浏览器原生提供了几个观察者接口，包括：

MutationObserver： 用于监听DOM元素的更改。
ResizeObserver： 用于监听元素大小的更改。
IntersectionObserver： 用于监听元素是否可见。

使用案例：MutationObserver

MutationObserver是一个强大的观察者接口，可用于监听DOM元素的更改。以下是MutationObserver的一些常见用例：

表单验证： 监听表单输入的变化，并立即提供反馈。
实时搜索： 监听搜索字段中的更改，并根据用户输入动态更新搜索结果。
页面加载跟踪： 监听页面DOM加载完成，并触发事件处理程序。

示例代码：

// 创建一个观察者
const observer = new MutationObserver((mutations) => {
  // 遍历突变数组
  mutations.forEach((mutation) => {
    // 根据突变类型执行操作
    if (mutation.type === 'attributes') {
      // 属性发生了更改
    } else if (mutation.type === 'childList') {
      // 子节点发生了更改
    }
  });
});

// 开始观察元素
observer.observe(element, {
  attributes: true,
  childList: true,
});