为什么需要观察者模式
代码示例
应用场景
DOM事件监听：
数据绑定
自定义事件
Promise对象
Pub/Sub模式
观察者模式（Observer Pattern）是一种行为型设计模式，它定义了一种一对多的依赖关系，让多个观察者对象同时监听某一个主题对象，当主题对象发生变化时，它的所有观察者都会收到通知并进行相应的处理。
观察者模式包含两个角色：
主题（Subject）：被观察的对象，它维护了一个观察者列表，可以添加、删除观察者，以及通知观察者状态的变化。
观察者（Observer）：观察主题的对象，当主题状态发生变化时，它会接收到通知并进行相应的处理。
为什么需要观察者模式观察者模式的价值在于它可以将主题对象和观察者对象解耦，使得它们可以独立地进行扩展和修改，同时也可以降低代码的耦合度，提高代码的可维护性和可扩展性。
具体来说，观察者模式有以下几个价值：
易于扩展
观察者模式可以在不修改主题对象和观察者对象的情况下，增加新的观察者对象或者新的主题对象，从而实现系统的扩展性。
解耦
观察者模式将主题对象和观察者对象解耦，使得它们可以独立地进行扩展和修改，降低了它们之间的依赖关系，提高了系统的灵活性。
通信
观察者模式通过事件通知的方式，实现了主题对象和观察者对象之间的通信，使得它们可以相互交流和协作，从而实现系统的功能。
总之，观察者模式可以帮助我们更好地组织代码，降低代码的耦合度，提高代码的可维护性和可扩展性，应用广泛，是一种非常有价值的设计模式。
代码示例下面是一个简单的观察者模式的代码示例：
// 主题对象
class Subject {
constructor() {
this.observers = []; // 观察者列表
}
// 添加观察者
addObserver(observer) {
this.observers.push(observer);
}
// 删除观察者
removeObserver(observer) {
const index = this.observers.indexOf(observer);
if (index !== -1) {
this.observers.splice(index, 1);
}
}
// 通知所有观察者状态的变化
notify() {
for (const observer of this.observers) {
observer.update(this);
}
}
// 更改状态，并通知所有观察者
setState(state) {
this.state = state;
this.notify();
}
}
// 观察者对象
class Observer {
// 接收主题对象，并将自己添加到主题的观察者列表中
constructor(subject) {
subject.addObserver(this);
}
// 接收通知并进行相应的处理
update() {
console.log('Observer update:', this);
}
}
// 创建主题和观察者对象
const subject = new Subject();
const observer1 = new Observer(subject);
const observer2 = new Observer(subject);
// 更改主题状态，并通知所有观察者
subject.setState('new state');
这段代码中，我们首先定义了一个主题对象 Subject，它维护了一个观察者列表 observers，并提供了添加、删除观察者的方法，以及通知所有观察者状态变化的方法 notify。在 setState 方法中，我们将状态赋值给 state，并调用 notify 方法通知所有观察者。
然后定义了一个观察者对象 Observer，它在构造函数中接收主题对象 subject，并将自己添加到 subject 的观察者列表中。在 update 方法中，我们打印出观察者自身的信息。
最后创建了一个主题对象 subject，以及两个观察者对象 observer1 和 observer2。调用 setState 方法更改主题状态，并通知所有观察者。
应用场景观察者模式的应用场景很多，以下是几个常见的场景及对应的代码示例：
DOM事件监听：常见的如click事件、mouse事件、keyboard事件等，通过addEventListener()方法注册事件，当事件触发时，将自动调用回调函数。
// 注册事件监听
document.addEventListener('click', function() {
console.log('click事件触发了！');
});
数据绑定
当数据模型发生变化时，观测者模式可通知视图更新，保证数据与视图同步。
// 定义对象属性
let data = { name: '小明', age: 20 };
// 通过Object.defineProperty()方法添加get/set方法
Object.defineProperty(data, 'name', {
get: function() {
return this._name;
},
set: function(newName) {
console.log(`修改name属性为：${newName}`);
this._name = newName;
}
});
// 修改对象属性
data.name = '小红';
自定义事件
可通过自定义事件的方式实现观察者模式，当自定义事件触发时，所有订阅者都会得到通知并执行其回调函数。
// 创建自定义事件对象
const event = new Event('myCustomEvent');
// 注册事件监听
document.addEventListener('myCustomEvent', function(event) {
console.log('自定义事件触发了！');
});
// 触发自定义事件
document.dispatchEvent(event);
Promise对象
Promise对象可作为一种观察者模式实现异步编程，当Promise对象状态发生改变时，所有订阅者都会得到通知并执行其回调函数。
// 创建promise对象
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Promise执行成功！');
}, 1000);
});
// 注册promise状态变化的回调函数
promise.then(function(data) {
console.log(data);
});
Pub/Sub模式
Pub/Sub模式是一种松耦合的通信机制，可通过观察者模式实现。当发布者发布消息时，所有订阅者都会得到通知并执行其回调函数。
// 创建Pub/Sub对象
const pubsub = {
subscribers: {},
subscribe(eventName, handler) {
// 添加事件订阅者
if (!this.subscribers[eventName]) {
this.subscribers[eventName] = [];
}
this.subscribers[eventName].push(handler);
},
unsubscribe(eventName, handler) {
// 取消事件订阅者
if (!this.subscribers[eventName]) {
return;
}
const index = this.subscribers[eventName].indexOf(handler);
this.subscribers[eventName].splice(index, 1);
},
publish(eventName, data) {
// 发布事件
if (!this.subscribers[eventName]) {
return;
}
this.subscribers[eventName].forEach((handler) => {
handler(data);
});
},
};
// 订阅事件
pubsub.subscribe('myEvent', function(data) {
console.log(`收到myEvent事件，数据为：${data}`);
});
// 发布事件
pubsub.publish('myEvent', 'Hello World!');
以上就是一文带你理解JavaScript 观察者模式的详细内容，更多关于JavaScript 观察者模式的资料请关注软件开发网其它相关文章！