观察者模式

介绍

• 发布 & 订阅
  观察者订阅别人发布的内容，然后等待接收
• 一对多
  一个观察者可以同时订阅多个发布的内容

举例

1、点咖啡，点好之后坐等被叫

观察者模式js类图

观察者模式js类图.png

示例代码

// 主题，保存状态，状态变化之后出发所有观察者对象
class Subject {
    constructor() {
        this.state = 0;
        this.observers = [];
    }
    
    getState() {
        return this.state;
    }
    
    setState(state) {
        this.state = state;
        this.notifyAllObservers();
    }
    
    notifyAllObservers() {
        this.observers.forEach(observer => {
            observer.update();
        })
    }
    
    attach(observer) {
        this.observers.push(observer);
    }
}

// 观察者
class Observer {
    constructor(name, subject) {
        this.name = name;
        this.subject = subject;
        this.subject.attach(this);
    }
    
    update() {
        console.log(`${this.name} update, state: ${this.subject.getState()}`);
    }
}

// 测试
let s = new Subject();
let o1 = new Observer('o1', s);
let o2 = new Observer('o2', s);
let o3 = new Observer('o3', s);

s.setState(1);
s.setState(2);
s.setState(3);

观察者模式常用场景

• 网页事件绑定
• Promise
• jQuery callbacks
• nodejs自定义事件

网页事件绑定

观察者模式场景-网页事件绑定.png

Promise

观察者模式场景-Promise.png

jQuery callbacks

观察者模式场景-jQuery callbacks.png

nodejs自定义事件

观察者模式场景-nodejs自定义事件.png