浅析JavaScript设计模式——发布-订阅/观察者模式

tip：有问题或者需要大厂内推的+我脉脉哦：丛培森 ٩( ‘ω’ )و

观察者模式
定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知

前一段时间一直在写CSS3的文章
一直都没写设计模式
今天来写写大名鼎鼎观察者模式
先画张图

#观察者模式的理解#
我觉得还是发布-订阅模式的叫法更容易我们理解
（不过也有的书上认为它们是两种模式…）
这就类似我们在微信平台订阅了公众号
当它有新的文章发表后，就会推送给我们所有订阅的人

我们可以看到例子中这种模式的优点

• 我们作为订阅者不必每次都去查看这个公众号有没有新文章发布，
  公众号作为发布者会在合适时间通知我们
• 我们与公众号之间不再强耦合在一起。公众号不关心谁订阅了它，
  不管你是男是女还是宠物狗，它只需要定时向所有订阅者发布消息即可

很简单的道理，过年的时候，群发祝福短信一定要比挨个发短信方便的多

通过上面的例子映射出我们观察者模式的优点

• 可以广泛应用于异步编程，它可以代替我们传统的回调函数
  我们不需要关注对象在异步执行阶段的内部状态，我们只关心事件完成的时间点
• 取代对象之间硬编码通知机制，一个对象不必显式调用另一个对象的接口，而是松耦合的联系在一起
  虽然不知道彼此的细节，但不影响相互通信。更重要的是，其中一个对象改变不会影响另一个对象

可能看完这些一脸懵逼，不过没关系
下面我们会深入体会它的优点
#自定义事件#
其实观察者模式我们都曾使用过，就是我们熟悉的事件
但是内置的事件很多时候不能满足我们的要求
所以我们需要自定义事件

---

现在我们想实现这样的功能
定义一个事件对象，它有以下功能

• 监听事件（订阅公众号）
• 触发事件（公众号发布）
• 移除事件（取订公众号）

当然我们不可能只订阅一个公众号，可能会有很多
所以我们要针对不同的事件设置不同的"键"
这样我们储存事件的结构应该是这样的

//伪代码
Event = {
	name1: [回调函数1,回调函数2,...],
	name2: [回调函数1,回调函数2,...],
	name3: [回调函数1,回调函数2,...],
}

代码如下

var Event = (function(){
    var list = {},
        listen,
        trigger,
        remove;
    listen = function(key,fn){ //监听事件函数
        if(!list[key]){