html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>观察者模式</title>
</head>
<body>
<div class="eg2"></div>
<script>
// 观察者构造函数
class Observer {
constructor(name, fn = () => {}) {
this.name = name
this.fn = fn
}
}
// 创建观察者
const praepostor = new Observer('级长', (state) => {
console.log(`因为: ${state}, 你是哪个班的`)
})
const teacher = new Observer('老师', (state) => {
console.log(`因为: ${state}, 把你爸找来`)
})
const principal = new Observer('校长', (state) => {
console.log(`因为: ${state}, 骂你的班主任`)
})
// 被观察者的构造函数
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 zhangsan = new Subject('学习')
zhangsan.addObserver(praepostor)
zhangsan.addObserver(teacher)
zhangsan.addObserver(principal)
const lisi = new Subject('学习')
lisi.addObserver(teacher)
lisi.addObserver(principal)
console.log(zhangsan)
console.log(lisi)
</script>
</body>
</html>