首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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

阅读本文大约需要 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等数据,那么直接看图说话

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

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20190926A05PMW00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券