Observer

Observer API

在 JavaScript 中，Observer API 是一种用于监听和响应对象、事件或数据流变化的模式。以下是一些常见的 Observer API 和相关设计模式的介绍：

1. Event Observers（事件监听器）

事件监听器是最常用的 Observer API，用于监听用户交互（如点击、键盘输入或鼠标移动）等事件。

示例代码：

const button = document.querySelector('button');
button.addEventListener('click', (event) => {
    console.log('Button clicked!', event);
});

使用场景：

• 表单提交
• 拖放交互
• 键盘快捷键

2. Mutation Observers（DOM 变化监听器）

Mutation Observers 用于监听 DOM 的变化，如节点的添加、删除或属性的修改。

示例代码：

const targetNode = document.querySelector('#target');
const observer = new MutationObserver((mutationsList) => {
    mutationsList.forEach((mutation) => {
        console.log('Mutation detected:', mutation);
    });
});
const config = {
    childList: true,
    attributes: true,
    subtree: true
};
observer.observe(targetNode, config);

使用场景：

• 监听动态内容更新
• 检测属性变化（如主题切换）
• 实时协作功能

3. Intersection Observers（视口监听器）

Intersection Observers 用于检测元素是否进入或离开视口，常用于懒加载图片或触发动画。

示例代码：

const targetElement = document.querySelector('#box');
const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
        if (entry.isIntersecting) {
            console.log('Element is in the viewport:', entry.target);
        } else {
            console.log('Element is out of the viewport:', entry.target);
        }
    });
});
observer.observe(targetElement);

使用场景：

• 懒加载图片
• 无限滚动
• 动画触发

4. Resize Observers（尺寸监听器）

Resize Observers 用于监听元素尺寸的变化，适用于响应式 UI 的开发。

示例代码：

const box = document.querySelector('#resizable');
const observer = new ResizeObserver((entries) => {
    entries.forEach((entry) => {
        const { width, height } = entry.contentRect;
        console.log(`New size: ${width}px x ${height}px`);
    });
});
observer.observe(box);

使用场景：

• 自适应组件
• 动态调整布局

5. PerformanceObserver

6. Object Property Observers（对象属性监听器）

通过 Proxy API，可以监听对象属性的变化。

示例代码：

const obj = { name: 'John', age: 30 };
const observedObj = new Proxy(obj, {
    set(target, property, value) {
        console.log(`Property ${property} changed from ${target[property]} to ${value}`);
        target[property] = value;
        return true;
    }
});
observedObj.name = 'Doe'; // Logs: Property name changed from John to Doe

使用场景：

• 状态对象的监听与验证
• 动态表单模型

6. Observable Patterns（如 RxJS）

RxJS 是一个强大的库，用于实现 Observer 模式，管理数据流。

示例代码：

import { Observable } from 'rxjs';
const observable = new Observable((subscriber) => {
    subscriber.next('First value');
    setTimeout(() => subscriber.next('Second value'), 1000);
    setTimeout(() => subscriber.complete(), 2000);
});
observable.subscribe({
    next: (value) => console.log('Received:', value),
    complete: () => console.log('Stream complete'),
});

使用场景：

• 管理异步数据流（如 HTTP 请求）
• 实时更新仪表盘

7. Observer 设计模式

Observer 模式是一种行为设计模式，允许对象在状态变化时通知其他对象，而无需直接引用它们。

示例代码：

class Subject {
    constructor() {
        this.observers = [];
    }
    addObserver(observer) {
        this.observers.push(observer);
    }
    notify(data) {
        this.observers.forEach(observer => observer.update(data));
    }
}
class Observer {
    constructor(name) {
        this.name = name;
    }
    update(data) {
        console.log(`${this.name} received data: ${data}`);
    }
}
const subject = new Subject();
const observer1 = new Observer('Observer 1');
const observer2 = new Observer('Observer 2');
subject.addObserver(observer1);
subject.addObserver(observer2);
subject.notify('Hello Observers!'); // 输出：Observer 1 received data: Hello Observers!

使用场景：

• 实现发布/订阅系统
• 数据绑定

总结

JavaScript 中的 Observer API 和模式提供了强大的工具，用于监听和响应各种变化。这些工具在现代前端开发中非常有用，可以帮助开发者构建动态、交互式的应用程序。