如何自己实现一个发布观察者模式

什么是观察者模式？
观察者模式定义了对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知，并自动更新。观察者模式属于行为型模式，行为型模式关注的是对象之间的通讯，观察者模式就是观察者和被观察者之间的通讯。

观察者模式有一个别名叫“发布-订阅模式”，或者说是“订阅-发布模式”，订阅者和订阅目标是联系在一起的，当订阅目标发生改变时，逐个通知订阅者。我们可以用报纸期刊的订阅来形象的说明，当你订阅了一份报纸，每天都会有一份最新的报纸送到你手上，有多少人订阅报纸，报社就会发多少份报纸，报社和订报纸的客户就是上面文章开头所说的“一对多”的依赖关系。
什么是发布者模式
其实24种基本的设计模式中并没有发布订阅模式，上面也说了，他只是观察者模式的一个别称。

但是经过时间的沉淀，似乎他已经强大了起来，已经独立于观察者模式，成为另外一种不同的设计模式。

在现在的发布订阅模式中，称为发布者的消息发送者不会将消息直接发送给订阅者，这意味着发布者和订阅者不知道彼此的存在。在发布者和订阅者之间存在第三个组件，称为消息代理或调度中心或中间件，它维持着发布者和订阅者之间的联系，过滤所有发布者传入的消息并相应地分发它们给订阅者。

举一个例子，你在微博上关注了A，同时其他很多人也关注了A，那么当A发布动态的时候，微博就会为你们推送这条动态。A就是发布者，你是订阅者，微博就是调度中心，你和A是没有直接的消息往来的，全是通过微博来协调的（你的关注，A的发布动态）。
观察者模式和发布订阅模式有什么区别？

观察者模式： 观察者（Observer）直接订阅（Subscribe）主题（Subject），而当主题被激活的时候，会触发（Fire Event）观察者里的事件。

发布订阅模式： 订阅者（Subscriber）把自己想订阅的事件注册（Subscribe）到调度中心（Topic），当发布者（Publisher）发布该事件（Publish topic）到调度中心，也就是该事件触发时，由调度中心统一调度（Fire Event）订阅者注册到调度中心的处理代码。

实现一个观察者模式

var EventBus = {
    event: {
        // click:[]
    },
    //订阅事件
    addEvent: function (eventName, funName) {
        if (this.event[eventName] == undefined) {
            this.event[eventName] = []
        }
        this.event[eventName].push(funName)

    },
    // 发布事件
    emitEvent: function (eventName) {
        this.event[eventName].forEach(item => {
            item()
        })
    },
    //移除事件
    removeEvent: function (eventName, funName) {
        this.event[eventName].forEach((item, i) => {
            if (item == funName) {
                this.event[eventName].splice(i, 1)
            }
        })
        // console.log(this.event[eventName].indexOf(funName));
    }
}
var fn1 = function () {
    console.log('我已经买好票了');
}
var fn2 = function () {
    console.log('我已经准备好东西了');
}
var fn3 = function () {
    console.log('我已经取好票了');
}
EventBus.addEvent('去成都', fn1)
EventBus.addEvent('去成都', fn2)
EventBus.addEvent('去成都', fn3)
EventBus.removeEvent('去成都', fn3)
EventBus.emitEvent('去成都');

实现订阅发布者模式

var EventHub = {
    event: {
        // event:[]
    },
    // 订阅事件
    addEvent: function (eventName, funcT) {
        if (this.event[eventName] == undefined) {
            this.event[eventName] = []
        }
        this.event[eventName].push(funcT)
        console.log(this.event);
    },
    // 发布事件
    emitEvent: function (eventName) {
        this.event[eventName].forEach(item => {
            item()
        })
    }
}


function Person(name, age) {
    this.name = name
    this.age = age
}
Person.prototype.personAddEvent = function (Ename, Fn) {
    EventHub.addEvent(Ename, Fn)
}
Person.prototype.personEmitEvent = function (Ename) {
    EventHub.emitEvent(Ename)
}
var person1 = new Person('xiaoming', 18)
person1.personAddEvent('出去玩', function () {
    console.log('打篮球');
})
person1.personEmitEvent('出去玩')

和上面观察者模式不同的是，发布订阅者模式多了一个事件中心，对于事件的处理逻辑都是在事件中心中来实现的，而观察者模式，每一个订阅者都有自己的事件处理逻辑。

观察者模式和发布订阅者模式的名字解释来自于https://blog.csdn.net/