本站于2023年9月4日。收到“大连君*****咨询有限公司”通知
说我们IIS7站长博客，有一篇博文用了他们的图片。
要求我们给他们一张图片6000元。要不然法院告我们
为避免不必要的麻烦，IIS7站长博客，全站内容图片下架、并积极应诉
博文内容全部不再显示，请需要相关资讯的站长朋友到必应搜索。谢谢！
另祝：版权碰瓷诈骗团伙，早日弃暗投明。
相关新闻：借版权之名、行诈骗之实，周某因犯诈骗罪被判处有期徒刑十一年六个月
叹！百花齐放的时代,渐行渐远!
一、定义
观察者模式定义了一种一对多的依赖关系，让多个观察者对象同时监听某一个主题对象(通知者)。这个主题对象观察到被观察者发生变化时，会通知所有的观察者对象，使它们能够自己更新自己
这里涉及了几个角色及他们自己功能:
- 观察者对象：可以更新自己
- 主题对象：可以添加观察者，移除观察者，通知观察者
- 被观察者：被主题对象监视，当被观察者发生变化时，主题对象会通知观察者更新自己的状态
二、使用场景
当一个对象改变需要同时改变其他对象的时候，而且不需要知道有多少个对象需要改变
三、举个例子
如果干巴巴的概念描述晦涩难懂，举个生活中常见的例子说明一下
场景1：
写字楼中，电脑跟前。一堆程序员趁老板出差的机会在电脑上NBA球赛，时不时激动的大喊大叫。此时，老板出差回来，刚好碰个正着，场面一度尴尬。
解决方案：
为了避免在公司划水摸鱼时，被进门的老板抓到，几个人想了个方案，贿赂前台小姐姐。当老板以后再进公司门的时候，小姐姐立马通知程序员们，让他们恢复到工作的状态
场景2：
写字楼中，电脑跟前。一堆程序员趁老板出差的机会在电脑上NBA球赛，时不时激动的大喊大叫。此时，老板出差回来。前台小姐姐看到老板回来，立马给看球赛的小哥哥们发通知。此时小哥哥们赶紧切换成工作的状态。
场景2就是使用了观察者模式。当老板回来时，程序员们需要改变划水的状态，由前台小姐姐负责通知他们
| 人物 |
角色 |
功能 |
| 程序员 |
观察者 |
可以改变自己的状态 |
| 前台小姐姐 |
主题(通知者) |
收集、移除及保存需要通知的程序员(观察者)，给程序员发送通知 |
| 老板 |
被观察者 |
被前台小姐姐观察 |
|
通过案例应该分清观察者模式中的各个对象及各个对象的功能了。接下来进行coding
四、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>
