指的是在对象间定义一个一对多(被观察者与多个观察者)的关联,
当一个对象改变了状态所有其他相关的对象会被通知并且自动刷新。
核心概念:
·观察者 Observer
·被观察者(观察目标)Subject

<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>Document</title>
</head>
<body>
<script>
// 被观察者 (观察目标)
// 1 添加观察者
// 2 通知所有观察者
class Subject {
constructor () {
// 存储所有的观察者
this.observers = []
}
// 添加观察者功能
addObserver (observer) {
// 检测传入的参数是否为 观察者 实例
if (observer && observer.update) {
this.observers.push(observer)
}
}
// 通知所有观察者
notify () {
// 调用观察者列表中每个观察者的更新方法
this.observers.forEach(observer=> {
observer.update()
})
}
}
// 观察者
// 1 当观察目标发生状态变化时,进行”更新”
class Observer {
update () {
console.log(‘事件发生了,进行相应的处理…’)
}
}
// 功能测试
const subject = new Subject()
const ob1 = new Observer()
const ob2 = new Observer()
// 将观察者添加给要观察的观察目标
subject.addObserver(ob1)
subject.addObserver(ob2)
// 通知观察者进行操作(某些具体的场景下)
subject.notify()
</script>
</body>
</html>