理解javascript的设计模式之发布订阅模式

举一个发布订阅模式通俗易懂的生活上面的例子：

小明去逛商场的时候，看中一双鞋子，售货员却告知他没有号码了，但是这双鞋店里面还会补货。这个时候小明该怎么做呢？每天来这个商场看一下有没有补货？这个看起来有点笨吧，正常情况下，应该是告诉售货员如果补货了，那么请联系我。剩下的事情就交给售货员去做了：当店里补货了，售货员小姐姐会打开客户花名册，把需要通知的客户遍历发送通知的短信/电话

这么说来我们的代码中事实上就是很常见这种情况的，只是初级的开发者并没有把它总结成这种发布订阅模式，比如：

DOM事件
在DOM上面绑定过事件函数，就是在使用发布-订阅模式了；
比如说一个点击事件，我们给body绑定点击事件函数，但是我们没有办法去预知用户将会在什么时候点击。实际操作是：我们订阅了body的这个click事件。当body被点击的时候，就会向订阅者发布了这个消息，订阅者就去执行这个cliclk的事件函数
代码实现：


document.body.addEventListener('click',function(){
    alert(1111)
},false) //增加订阅者
document.body.click();//模拟用户点击，发布

以上有几个关键点：

谁来当这个发布者（就是例子中的售货员）
例子中售货员是有一本记录订阅客户的花名册的，那么代码中也需要一个容器来存放订阅者的信息
如何实现发布？上述例子中的售货员是挨个来电话通知的，那么就是要用到遍历的方法去触发了

上述例子转化成代码，如下：

var salesperson = {} //第一步，创建一个售货员
salesperson.note =[] //第二步，有个缓存的小本本，记录的容器
salesperson.listen=function(fn){  //增加订阅者
    this.note.push(fn);     //记到小本本上，即将订阅信息填进缓存列表
}
salesperson.trriger=function(){ //进行发布
    for(var i=0,fn;fn=this.note[i++];){
        fn.apply(this,arguments)
    }
}

这样就实现了一个简单的发布订阅者模式，但是代码存在着一些漏洞，比如发布的时候只一味的去遍历，并没有去判断发布的消息是否是订阅者需要的

理解javascript的设计模式之发布订阅模式

猜你喜欢