博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
[转] JavaScript设计模式之发布-订阅模式(观察者模式)-Part1
阅读量:5842 次
发布时间:2019-06-18

本文共 4817 字,大约阅读时间需要 16 分钟。

《JavaScript设计模式与开发实践》读书笔记。

发布-订阅模式又叫观察者模式,它定义了对象之间的一种一对多的依赖关系。当一个对象的状态发生改变时,所有依赖它的对象都将得到通知。

例如:在segmentfault我们关注了某一个问题,这个时候可以说是订阅了这个问题的消息。当该问题有了新的回答、评论的时候,segmentfault系统就会遍历关注了这个问题的用户,一次给用户发消息。

现在看看如何一步步实现发布-订阅模式。

  • 首先,指定好发布者(如 segmentfault 的 问题系统)

  • 接着,给发布者添加一个缓存列表,用于存放回调函数以便通知订阅者(问题系统的记录表)

  • 最后,当发布者发布消息的时候,会遍历缓存列表,依次触发里面的回调函数(遍历记录表,逐个发消息)

我们还可以在回调函数里面加入一些参数,订阅者可以接收这些参数,进行各自的处理。

var sgQuestionSystem = {};    // 定义segmentfault的问题系统/*  * 缓存列表 * clientList: { *    key: [ *        id: 
, // 唯一标识 * fn: null // 存放回调函数 * ] * } * */sgQuestionSystem.clientList = {};/* * 添加订阅者(订阅函数),将订阅的类型与回调函数加入缓存列表 * key: 消息的类型 * id: 订阅的唯一标识 * fn: 订阅的回调函数*/sgQuestionSystem.listen = function(key, id, fn) { if(!this.clientList[key]) { // 若缓存列表没有该类型的消息,给该类消息初始化 this.clientList[key] = [] } this.clientList[key].push({ // 将订阅的id, 回调函数添加到对应的消息列表里 id: id, fn: fn }) } // 发布消息(发布函数), 依次通知订阅者 sgQuestionSystem.trigger = function () { var key = Array.prototype.shift.call(arguments), // 取出消息类型 fns = this.clientList[key]; // 取出该消息对应的回调函数集合 if(!fns || fns.length == 0) { // 若订阅列表没有该类型的回到函数,则返回 return false; } for(var i = 0; i< fns.length; i++) { fns[i].fn.apply(this, arguments); // arguments是发布消息时附送的参数,去掉了key } }

现在,我们来进行一些简单的测试:

// 张三订阅问题AsgQuestionSystem.listen('questionA', 3, function(questionTitle, content) { console.log('张三您在早前订阅了问题:questionA'); console.log('现' + questionTitle + '有了新动态'); console.log('内容为:' + content); }); // 李四订阅问题A sgQuestionSystem.listen('questionB', 4, function(questionTitle, content) { console.log('李四您在早前订阅了问题:questionB'); console.log('现' + questionTitle + '有了新动态'); console.log('内容为:' + content); }) // 问题系统发布消息 sgQuestionSystem.trigger('questionA', '问题A', '王五回答了问题A'); sgQuestionSystem.trigger('questionB', '问题B', '吴六回答了问题B');

至此,我们实现了一个简单的发布-订阅模式,订阅者可以订阅自己感兴趣的事件了。

各位看官,看累了吗?

看累的话点一下收藏,以便您看续集。若您还是精力充沛,那就继续撸吧。


上部分,我们实现了一个问题系统的发布-订阅模式,现在,我们要实现一个文章的发布-订阅模式,这时候,该怎么办?将上面的代码ctrl + c, ctrl + v, 再改下名字?还是有更好的解决方案?

答案显然是有的,我们可以将发布-订阅功能模块提取出来,放在一个单独的对象里面:

var publishSubscribeEvent = {        /*      * 缓存列表     * clientList: {     *    key: [     *        id: 
, // 唯一标识 * fn: null // 存放回调函数 * ] * } * */ clientList: {}, /* * 添加订阅者(订阅函数),将订阅的类型与回调函数加入缓存列表 * key: 消息的类型 * id: 订阅的唯一标识 * fn: 订阅的回调函数 */ listen: function(key, id, fn) { if(!this.clientList[key]) { this.clientList[key] = [] } this.clientList[key].push({ id: id, fn: fn }) }, // 发布消息(发布函数), 依次通知订阅者 trigger: function () { var key = Array.prototype.shift.call(arguments), fns = this.clientList[key]; if(!fns || fns.length == 0) { return false; } for(var i = 0; i< fns.length; i++) { fns[i].fn.apply(this, arguments); } } }

再定义一个安装发布-订阅的函数installPublishSubscribeEvent,这个函数可以给所有对象都动态安装发布-订阅功能:

var installPublishSubscribeEvent = function(obj) {    for(var i in publishSubscribeEvent) { obj[i] = publishSubscribeEvent[i]; } }

再来测试一番,我们给文章对象 sgArticleSystem 动态添加发布-订阅功能:

var sgArticleSystem = {};installPublishSubscribeEvent(sgArticleSystem ); // 张三订阅文章A动态sgArticleSystem.listen('articleA', 3, function(articleTitle, content) { console.log('张三您在早前订阅了文章:articleA'); console.log('现' + articleTitle+ '有了新动态'); console.log('内容为:' + content); }); // 李四订阅文章B动态 sgArticleSystem.listen('articleB', 4, function(articleTitle, content) { console.log('李四您在早前订阅了文章:articleB'); console.log('现' + articleTitle+ '有了新动态'); console.log('内容为:' + content); }); // 文章系统发布消息 sgArticleSystem.trigger('articleA', 'JavaScript设计模式之发布-订阅模式', '作者修改了文章'); sgArticleSystem.trigger('articleB', 'JavaScript设计模式之策略模式', '王五用户评论了该文章');

好了,该代码经过自测是没有什么问题的,要是各位看官发现问题,欢迎反馈。现在,我们已经可以给我们指定的对象安装发布-订阅模式,但是,是不是还少了点什么功能呢?

答案就是少了取消订阅事件的功能。比如张三突然不想关注该问题的更新动态了,为了避免继续收到问题系统推送过来的消息,张三需要取消之前订阅的事件。现在,我们给 publishSubscribeEvent 对象增加 remove 方法。

publishSubscribeEvent.remove = function(key, id) {    var fns = this.clientList[key]; if(!fns) { // 如果key对应的消息没人订阅,直接返回 return false; } if(!id) { // 如果没传具体的唯一标识,则取消key的所有对应消息 fns && (fns.length = 0); } else { for(var l = fns.length - 1; l >=0; l--) { var _id = fns[l].id; if(_id == id) { fns.splice(l, 1); // 删除订阅者的回调函数 } } } } // 测试代码 var sgArticleSystem = {}; installPublishSubscribeEvent(sgArticleSystem ); // 张三的订阅 sgArticleSystem.listen('articleA', 3, function(articleTitle, content) { console.log('张三您在早前订阅了文章:articleA'); console.log('现' + articleTitle+ '有了新动态'); console.log('内容为:' + content); }); // 李四的订阅 sgArticleSystem.listen('articleA', 4, function(articleTitle, content) { console.log('李四您在早前订阅了文章:articleA'); console.log('现' + articleTitle+ '有了新动态'); console.log('内容为:' + content); }); sgArticleSystem.remove('articleA', 3); // 删除张三的订阅 sgArticleSystem.trigger('articleA', 'JavaScript设计模式之发布-订阅模式', '作者修改了文章');

上面的代码跟原著有所不同,原著是在删除订阅的时候是用对比回调函数的,而我是往缓存列表加了一个唯一的标识,用于识别。

转载于:https://www.cnblogs.com/chris-oil/p/8512105.html

你可能感兴趣的文章
WPF-21:WPF实现仿安卓的图案密码键盘(改进)
查看>>
Reids实战(7)数据类型五sorted sets
查看>>
PHP - 如何解析HTML文件
查看>>
持续集成之代码质量管理-Sonar [三]
查看>>
电脑管理员密码忘记了,如何解决
查看>>
MySQL5.6.26升级到MySQL5.7.9实战方案
查看>>
非域环境下安装并配置Project Server 2007(二)
查看>>
Hibernate主键生成种类
查看>>
【小窍门tip】oracle sequence 修改增量值
查看>>
MariaDB 10之并行复制--延迟测试结果
查看>>
为-微软-重写-TechNet Library-中-Microsoft Lync Server 2010
查看>>
统一沟通-技巧-10-Lync-公网证书-Go Daddy-Buy
查看>>
全媒体平台可以适度超前
查看>>
ExtJS 4.1有什么值得期待?
查看>>
ora-12545连接错误解决一例
查看>>
初窥QuickTest脚本录制
查看>>
甘肃银行借助HDIM打造综合数据保护平台
查看>>
linux命令格式,获取帮助及其目录结构简要理解
查看>>
22条你不知道的微营销干货
查看>>
Windows 10 TH2改进
查看>>