观察者、中介者、发布订阅模式

观察者(Observer)

观察者和被观察者之间相互依赖，被观察者有所改变后直接广播一条信息给观察者，信息也可以包含一些数据
应用：Vue2.x的响应式源码

// 观察者
class Observe {
    update (...params) {
        console.log(...params, 'Observe观察者')
    }
}
class Observe1 {
    update (...params) {
        console.log(...params, 'Observe1观察者')
    }
}
// 目标
class Target {
    constructor () {
        this.observers = []
    }
    add(observer) {
        this.observers.push(observer);
    }
    remove(observer) {
        this.observers.filter( ob => ob !== observer);
    }
    count () {
        return this.observers.length
    }
    get (i) {
        return this.observers[i]
    }
    notify (msg) {
        let i = 0;
        let len = this.count()
        let item
        for(; i < len; i++) {
            item = this.get(i)
            item.update(msg)
        }
    }
}
let target = new Target
console.log(target)
btn1.onclick = function () {
    target.add(new Observe)
    target.notify('你好，在吗')
}
btn2.onclick = function () {
    target.add(new Observe1)
    target.notify('在的')
}

中介者(Mediator)

通过一个中间方，提供订阅/发布两个方法，订阅需要订阅的名称，以及回调函数，发布需要订阅名称以及参数
应用：Vue2.x中的eventBus

// 中介者
let mediator = (function () {
    let topics = {};
    // 订阅：订阅A组件中的某个方法
    let subscribe = function subscribe(topic, callback) {
        !topics[topic] ? topics[topic] = [] : null;
        topics[topic].push({
            context: this,
            callback
        });
    };
    // 发布：B组件中到某个阶段，可以通知之前订阅的方法执行
    let publish = function publish(topic, ...params) {
        if (!topics[topic]) return;
        topics[topic].forEach(item => {
            let {
                callback,
                context
            } = item;
            callback.call(context, ...params);
        });
    };
    return {
        subscribe,
        publish
    };
})();
btn1.onclick = function () {
    mediator.subscribe('body', (...params) => {
        console.log(...params, '订阅阶段')
    })
}
btn2.onclick = function () {
    mediator.publish('body', [1,2,3,4])
}

发布订阅(Publish Subscribe)