本文详细解析 JavaScript 中的观察者模式，阐述其定义、核心角色（主题与观察者）及适用场景。通过职场通知案例直观理解模式逻辑，并提供完整的 JavaScript 代码实现，包括通知者类、观察者类及模拟调用过程，帮助开发者掌握该设计模式的实际应用。
一、定义
观察者模式确立了一种一对多的依赖机制，使得多个观察者对象能够同时监听同一个主题对象（即通知者）。当主题对象的状态发生变动时，它会自动通知所有注册的观察者，促使它们执行各自的更新逻辑。
在此模式中，主要涉及三类角色及其对应职责：
- 观察者对象：具备自我更新的能力。
- 主题对象：负责管理观察者的生命周期，包括添加、移除观察者，以及在状态变化时向所有观察者发送通知。
- 被观察者：处于被监视状态，一旦其状态发生改变，主题对象便会触发通知机制，告知观察者进行状态同步。
二、使用场景
适用于当一个对象的状态改变需要同时影响其他多个对象，且具体影响哪些对象在运行前并不明确的情况。
三、举个例子
若仅停留在抽象概念层面，理解起来可能较为晦涩，下面通过一个贴近生活的职场案例进行说明。
场景1：
在写字楼内，几位程序员趁老板出差期间，在电脑上观看 NBA 比赛，并时不时发出激动的欢呼声。此时，老板突然出差归来，正好撞见这一幕，场面一度十分尴尬。
解决方案：
为了避免在工作时间摸鱼时被进门的老板当场抓包，几位程序员商量出一个对策：贿赂前台小姐姐。此后，每当老板进入公司，小姐姐会立即通知程序员们，让他们迅速切换回工作状态。
场景2：
在写字楼内，几位程序员趁老板出差期间，在电脑上观看 NBA 比赛，并时不时发出激动的欢呼声。此时，老板突然出差归来。前台小姐姐看到老板进门后，立即向正在看球赛的程序员们发送通知。程序员们收到通知后，迅速切换至工作状态。
场景2 即为观察者模式的实际应用。当老板（被观察者）出现时，程序员们（观察者）需要改变当前状态，而这一过程由前台小姐姐（主题/通知者）负责通知执行。
| 人物 | 角色 | 功能 |
|---|---|---|
| 程序员 | 观察者 | 可以改变自己的状态 |
| 前台小姐姐 | 主题(通知者) | 收集、移除及保存需要通知的程序员(观察者)，给程序员发送通知 |
| 老板 | 被观察者 | 被前台小姐姐观察 |
通过上述案例，应当能够清晰区分观察者模式中各个对象及其具体功能。接下来进行代码实现。
四、Coding
1、前台小姐姐类（通知者类）
/*
* desc:通知者类
* 1、存储观察者
* 2、添加观察者
* 3、移除观察者
* 4、通知观察者
*/
class Dep {
constructor() {
//存储观察者
this.subs = []
}
/**
* 添加观察者
* @param {观察者对象} sub
*/
addSubs(sub) {
//确保观察者都有update方法
if (sub && sub.update) {
this.subs.push(sub)
}
}
/**
* 移除观察者
* @param {需要移除的观察者对象} sub
*/
removeSub(sub) {
this.subs.forEach((item, index) => {
if (sub.id === item.id) {
this.subs.splice(index, 1)
return;
}
})
}
/**
* 通知观察者，调用所有观察者内部的update的方法，改变自身状态
* */
notify() {
this.subs.forEach(sub => {
sub.update()
})
}
}
2、程序员类（观察者类）
/**
* 观察者对象
*/
class watcher {
constructor(name) {
this.name = name
}
//观察者对象都有自己的update方法，来改变自己的工作状态
update() {
console.log(`${this.name}收到通知，改变工作状态。`)
}
}
/**
* 观察者对象
*/
class watcher {
constructor(name) {
this.name = name
}
//观察者对象都有自己的update方法，来改变自己的工作状态
update() {
console.log(`${this.name}收到通知，改变工作状态。`)
}
}
3、模拟老板回公司，前台小姐姐通知程序员
<script src="./js/Dep.js"></script>
<script src="./js/Watcher.js"></script>
<script>
//同事张三
const tongshi1 = new watcher("张三")
//同事李四
const tongshi2 = new watcher("李四")
//前台小姐姐要知道哪些同事需要通知，把需要通知的同事收集起来
const xiaojiejie = new Dep();
xiaojiejie.addSubs(tongshi1)
xiaojiejie.addSubs(tongshi2)
//等待老板归来....
//等等等....
//等等等....
//等等等....
//等等等....
//老板回来了
//当老板回来时，前台小姐姐调用自己的notify方法通知程序员们 改变自身状态
xiaojiejie.notify()
</script>
到此这篇关于 JavaScript 设计模式之观察者模式的介绍及使用背景的文章就介绍到这了，更多相关观察者模式内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！