console
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 1.观察者构造函数
class Observer {
constructor(name, fn) {
this.name = name
this.fn = fn || function () { }
}
}
// 创建观察者（多个）
const njzr = new Observer('年级主任', (state) => {
console.log('因为: ' + state + ' , 你是哪个班的')
})
const bzr = new Observer('班主任', (state) => {
console.log('因为: ' + state + ' , 把你爸找来')
})
const xz = new Observer('校长', (state) => {
console.log('因为: ' + state + ' , 骂你的班主任')
})
// 2.被观察者的构造函数
class Subject {
constructor(state) {
// 记录自己的状态
this.state = state
// 记录观察者：数组用来保存观察着我的人
this.observsers = []
}
// 设置自己的状态
setState(val) {
this.state = val
// 状态一经改变就需要把 我的所有观察者 的技能都触发
this.observsers.forEach(item => {
// 告诉他我改变成了什么状态
item.fn(this.state)
})
}
// 添加观察者
addObserver(obs) {
// 默认进行去重处理
this.observsers = this.observsers.filter(item => item !== obs)
this.observsers.push(obs)
}
// 删除观察者
delObserver(obs) {
this.observsers = this.observsers.filter(item => item !== obs)
}
}
// 创造被观察者（多个）
const xiaoming = new Subject('学习')
xiaoming.addObserver(njzr)
xiaoming.addObserver(bzr)
xiaoming.addObserver(xz)
xiaoming.setState("上课打游戏")
const xiaohong = new Subject('学习')
xiaohong.addObserver(bzr)
xiaohong.addObserver(xz)
console.log(xiaoming)
console.log(xiaohong)
</script>
</body>
</html>