聊一下发布订阅和观察者模式的区别

100 阅读1分钟

他们功能是一样的, 主要区别在于是否存在第三者, 观察者模式中,Subject是知道Observer的存在的,而发布订阅模式中,Publisher是不知道Subscriber存在的

// 定义一个主体对象
class Subject {
    constructor() {
        this.Observers = [];
    }
    add(observer) {
        //添加
        this.Observers.push(observer)
    }
    remove(observer) {
        //移除
        this.Observers.filter(item => item === observer);
    }
    notify() {
        this.Observers.forEach(item => {
        item.update();
    })
}}

//定义观察着对象
class Observer {
    constructor(name) {
        this.name = name
    }
    update() {
        console.log(`my name is:${this.name}`);
    }
}
    //测试
let sub = new Subject();
let obs1 = new Observer('aaa');
let obs2 = new Observer('bbb');
sub.add(obs1);
sub.add(obs2);
sub.notify();

let pubSub = {
    subs: [],
    subscribe(key, fn) {
        //订阅
        if (!this.subs[key]) {
            this.subs[key] = [];
        }
        this.subs[key].push(fn);
    },
    publish(...arg) {
        //发布
        let args = arg;
        let key = args.shift();
        let fns = this.subs[key];
        if (!fns || fns.length <= 0) return;
        for (let i = 0, len = fns.length; i < len; i++) {
            fns[i](args);
        }
    },
    unSubscribe(key) {
        delete this.subs[key]
    }
} 
//测试
pubSub.subscribe('name', name => {
    console.log(`your name is ${name}`);
})
pubSub.subscribe('gender', gender => {
    console.log(`your name is ${gender}`);
})
pubSub.publish('name', '11111');  // your name is leaf333
pubSub.publish('gender', '19');  // your gender is 18

观察者与被观察者是松耦合关系, 发布者与订阅者不存在耦合关系