观察者模式详解

Posted 2023-03-02 曾胖神父

什么是观察者模式？

定义

观察者模式中通常有两个模型，一个观察者(observer)和一个被观察者(Observed)。从字面意思上理解，即被观察者发生某些行为或者变化时，会通知观察者，观察者根据此行为或者变化做出处理。

图解

Demo

代码如下

//观察者模式
//主题，即被观察者
class Subject
    //构造函数
    constructor()
        //新建观察者存储数组
        this.observers=[]
    
    //添加观察者
    addObserver(observer)
    
        //往观察者存储数组添加观察者
        this.observers.push(observer);
    
    //移除观察者
    removeObserver(observer)
    
        //获取观察者在观察者存储数组的下标
        var index=this.observers.indexOf(observer);
        //判断下标是否合法即观察者是否存在
        if(index>-1)
        
            //如果存在，则从观察者存储数组中删除观察者
            this.observers.splice(index,1);
        
    
    //更新
    notify()
        //遍历所有观察者，并更新观察者
        this.observers.forEach(observer=>
            observer.update();
        )
    

//观察者类
class Observer
    //构造函数
    constructor()
        //初始化更新函数
        this.update=function()
    
    subscribeTo(subject)
        
        subject.addObserver(this);
    

let subject=new Subject();
let observer=new Observer();
observer.update=function()

    console.log('observer update');

observer.subscribeTo(subject);
subject.notify();