指的是在对象间定义一个一对多(被观察者与多个观察者)的关联,

    当一个对象改变了状态所有其他相关的对象会被通知并且自动刷新。

    核心概念:

    ·观察者 Observer

    ·被观察者(观察目标)Subject

    观察者模式 - 图1

    <!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>