在JS设计模式里面，咱们听到的莫属与发布订阅模式。在Vue里面很重要的双向绑定，就是基于发布订阅模式来实现的。之前听的比较多，但是没有更深入的了解，通过最近学习了下，想记录下自己理解的发布订阅模式是怎样的。

什么是发布订阅模式？

发布—订阅模式又叫观察者模式，它定义了对象间的一种一对多的关系，让多个观察者对象同时监听某一个主题对象，当一个对象发生改变时，所有依赖于它的对象都将得到通知。

发布订阅模式举例说明：
小李、小明、小张同时在网上看中了一款球鞋，但是此款球鞋已经售罄。如果想要买到这双球鞋的话，需要点击网页上的“到货通知”按钮，当球鞋补货后会同时通知已经”订阅”的小李、小明、小张。
这就是现实生活中的发布订阅模式。小李、小明、小张属于订阅者，而球鞋店铺属于发布者。这个过程是属于”异步”的，谁也不知道球鞋什么时候补货，但是当球鞋补货上架的那一刻就会通知到所有人。

简单的发布订阅模式

var obj = {

}
//添加订阅者
obj.on = function (name, fn) {
    //判断是否有该订阅输入，若无则创建数组容器，有则推到数组里面暂存
    if (!obj.name) {
        obj[name] = []
    }
    obj[name].push(fn)

}
//添加发布者
obj.emit = function (name, ...arg) {
    var _name = name
    //遍历发布的属性，依次执行函数
    for (var i = 0; i < obj[_name].length; i++) {
        obj[_name][i].call(this, ...arg)
    }
}

obj.on('notice', function (name, size) {
    console.log(name, '订阅了我')
    console.log('我的鞋码是:', size + '码');
    //小明订阅了我
    //我的鞋码是41

    //小张订阅了我
    //我的鞋码是44
})


obj.emit('notice', '小明', 41)
obj.emit('notice', '小张', 44)

JS中的发布订阅

addEventListener这个函数就是一个明显的基于发布订阅模式封装的API，它里面有传两个参数，一个是事件名，另一个是函数回调。使用addEventListener很好的解决了异步事件执行，通过这个函数也让我对设计模式有了一定的理解。