JS 手写系列 (一)观察者模式

151 阅读1分钟

预设:

Observer - 观察者, 具有自己的id, 包含callback来对收到的消息进行反馈

Subject - 被观察者,添加事件,发布事件

message - {type, info}

class Observer {
    constructor(id) {
        this.id = id;
    }
    
    callback(message) {
        if(message.type === 'event') {
            console.log(message.info);
        }
        if(message.type === 'task') {
            console.log(message.info)
        }
        //...自由补充
    }
    
    getId() {
        return this.id;
    }
}


class Subject {
    constructor() {
        this.observerList = []
    }
    
    add(observer) {
        const index = this.observerList.findIndex(ob => ob.getId() === observer.getId())
        if(index<0) {
            this.observerList.push(observer)
        }
    }
    
    publish(message) {
        console.log('publish')
        this.observerList.forEach(ob => ob.callback(message))
    }
}


const subject = new Subject(); 
const p1 = new Observer(1); 
const p2 = new Observer(2);

subject.add(p1);
subject.add(p2);
const message1 = {
    type: 'task', 
    info: 'new task happened'
}
const message2 = {
    type: 'event', 
    info: 'new message happened'
}
subject.publish(message1);
subject.publish(message2);