说明：继续学习努力
PS：学习自---掘金的JavaScript设计模式核心原理与应用小册
一、概念
观察者模式定义了一种一对多的依赖关系，让多个观察者对象同时监听某一个目标对象，当这个目标对象的状态发生变化时，会通知所有观察者对象，使它们能够自动更新。
二、案例
代码+案例说明
- 1.案例说明
机器人作战
通过总控制系统添加/移除 作战机器人
机器人根据总系统发布的指令进行攻击撤退等操作
// 总控制类
class RobotControl {
constructor() {
this.robots = []; // 当前机器人编制
}
// 添加机器人 订阅者
add(robot) {
this.robots.push(robot);
}
// 删除机器人 订阅者
delete(robot) {
this.robots.forEach((item, index) => {
if(robot === item) {
this.robots.splice(index, 1)
}
})
}
// 通知机器人进行攻击
notifyAttack() {
this.robots.forEach((item)=>{
item.attack()
})
}
// 通知机器人进行撤退
notifyDefence() {
this.robots.forEach((item)=>{
item.defence()
})
}
}
// 机器人类
class Robot {
constructor(name) {
this.name = name;
}
attack() {
console.log(`机器人${this.name}发动导弹攻击`);
}
defence(name) {
console.log(`机器人${this.name}从战场撤退进行防御`);
}
}
const r1 = new Robot('r1');
const r2 = new Robot('r2');
const r3 = new Robot('r3');
const rc = new RobotControl();
rc.add(r1);
rc.add(r2);
rc.add(r3);
rc.notifyAttack();
rc.delete(r2)
rc.notifyDefence();
// 结果：
// 机器人r1发动导弹攻击
// 机器人r2发动导弹攻击
// 机器人r3发动导弹攻击
// 机器人r1从战场撤退进行防御
// 机器人r3从战场撤退进行防御
PS：后续的等总结完Vue2版本的再来完善
