发布订阅模式，在工作中它的能量超乎你的想象

阅读本文大约需要 9 分钟

不同的语言-相同的模式

最近在看设计模式的知识，而且在工作当中，做一些打点需求的时候，正好直接利用了发布订阅模式去实现的，这让我对发布订阅这种设计模式更加的感兴趣了，于是借此机会也和大家说说这个好东东吧！

其实在早期还是用jq开发的时代，有很多地方，我们都会出现发布订阅的影子，例如有trigger和on方法

再到现在的vue中，emit和on方法。他们都似乎不约而同的自带了发布订阅属性一般，让开发变得更加高效好用起来

那么废话不多说了，先来看看发布订阅模式到底何方神圣吧

发布订阅模式

说到发布订阅模式，它其实是一种对象间一对多的依赖关系(不是综艺节目以一敌百那种)，当一个对象的状态发送改变时，所有依赖于它的对象都将得到状态改变的通知

正所谓，字数不多，不代表作用不大，那继续来看下它的作用

作用

广泛应用于异步编程中(替代了传递回调函数)

对象之间松散耦合的编写代码

就这两点吗？没错，点不在多，够用就行。我们都知道有一句很著名的谚语，罗马不是一天建成的

当然，胖子也不是一天吃成的。所以我们要想实现一个自己的发布订阅模式，以后在工作中使用，也需要一点点来的，表捉急，先从最简单的说起

自定义事件

上面通过自定义事件实现了一个简单的发布订阅模式，不过从打印出来的结果来看，有点小尴尬。Why？

因为在正常的情况下，希望打印的是酱紫的：

之所以出现此种情况，那是在on方法的时候一股脑的都将fn函数全部放到了列表中。然而需要的只是一个简单的key值，就可以解决了。让我们改写一下上面的代码

来个通用的

现在来搞个通用的发布订阅模式实现，和刚才的差不多，不过这次起名也要隆重些了，直接叫event吧，看代码

这样其实就实现了一个可以使用的发布订阅模式了，其实说起来也是比较简单的，来一起屡屡思路吧

思路：

创建一个对象(缓存列表)

on方法用来把回调函数fn都加到缓存列表中

emit方法取到arguments里第一个当做key，根据key值去执行对应缓存列表中的函数

remove方法可以根据key值取消订阅

工作中的应用

插广告

先给大家看一个链接，在这个新闻转码页的项目中，我负责写下面推荐流的内容（就是喜欢的人还看了那里）。如下图所示

圈起来的广告部分，这里并不是我来负责的，需要另外一个负责对接广告业务的大牛来实现的。那么，他想要在我的推荐流中插入广告应该如何实现呢？

毕竟不能把我的代码给他，让他再拿去开发吧，这还不够费劲的呢，又要熟悉代码又要开始写广告插入的逻辑，很折腾的，时间不该这样的浪费掉

于是就用到了发布订阅模式了，我这边不需要关注广告插入的逻辑。我还是我，是颜色不一样的烟火，哈哈哈，扯远了

沟通后，我只需要把用户浏览到哪一页的page页码传给他即可。所以我只需要在我开发的代码中写一句话，利用上面实现的event来表示一下

打点

再来看一个链接，朋友。打点的用途主要是记录用户行为，所以在移动图搜新版开发的时候也会加入打点的代码，然后统计一下pv,uv,ctr等数据，那么直接看图说话

如图所示，当用户向上滑动的时候，会展示如下的内容（这才是我要讲的地方）