js实现oberve
实现 JavaScript 的观察者模式
观察者模式是一种设计模式，允许对象（观察者）订阅另一个对象（被观察者）的状态变化。当被观察者的状态发生变化时，它会通知所有观察者。
基本实现方式
创建一个 Subject 类作为被观察者，维护一个观察者列表并提供订阅和通知功能：
class Subject {
constructor() {
this.observers = [];
}
subscribe(observer) {
this.observers.push(observer);
}
unsubscribe(observer) {
this.observers = this.observers.filter(obs => obs !== observer);
}
notify(data) {
this.observers.forEach(observer => observer.update(data));
}
}创建 Observer 类作为观察者，实现 update 方法以响应通知：
class Observer {
update(data) {
console.log(`Received data: ${data}`);
}
}使用示例
实例化被观察者和观察者，建立订阅关系并触发通知：
const subject = new Subject();
const observer1 = new Observer();
const observer2 = new Observer();
subject.subscribe(observer1);
subject.subscribe(observer2);
subject.notify('State changed!');
subject.unsubscribe(observer2);
subject.notify('Another change');基于 Proxy 的实现
利用 ES6 的 Proxy 可以创建响应式对象，自动触发观察者通知：
function createObservable(target, observer) {
return new Proxy(target, {
set(obj, prop, value) {
obj[prop] = value;
observer.update({ prop, value });
return true;
}
});
}
const observer = {
update(change) {
console.log(`Property ${change.prop} set to ${change.value}`);
}
};
const user = createObservable({}, observer);
user.name = 'John'; // 自动触发观察者通知实际应用场景
- 表单输入验证：观察表单字段变化实时验证
- 状态管理：如 Redux 的 store 订阅机制
- 事件系统：DOM 事件监听的本质就是观察者模式
注意事项
- 避免内存泄漏：及时取消不再需要的观察者订阅
- 考虑通知顺序：观察者被通知的顺序通常是订阅顺序
- 性能优化：大量观察者时考虑批量通知或节流机制
