JS设计模式七:发布-订阅模式
发布-订阅模式简述
发布---订阅模式又叫观察者模式,它定义了对象间的一种一对多的关系,让多个观察者对象同时监听某一个主题对象,当一个对象发生改变时,所有依赖于它的对象都将得到通知。
以网购为例:
假设小红看上了一双鞋子,但该鞋子已经断货了,卖家承诺她到货通知。与此同时,小明、小花灯也关注了这双鞋子。
在这个场景中,卖家就是发布者,小红等人都属于订阅者。当鞋子到货时,会依次通知到每个人。
发布订阅模式的优点:
- 支持简单的广播通信,当对象状态发生改变时,会自动通知已经订阅过的对象。
- 发布者与订阅者耦合性降低,发布者只管发布一条消息出去,它不关心这条消息如何被订阅者使用,同时,订阅者只监听发布者的事件名,只要发布者的事件名不变,它不管发布者如何改变;同理卖家(发布者)它只需要将鞋子来货的这件事告诉订阅者(买家),他不管买家到底买还是不买,还是买其他卖家的。只要鞋子到货了就通知订阅者即可。
发布订阅模式的缺点:
创建订阅者需要消耗一定的时间和内存。如果过度使用的话,反而使代码不好理解及代码不好维护等等。
如何实现发布订阅模式?
- 首先要想好谁是发布者(比如上面的卖家)。
- 然后给发布者添加一个缓存列表,用于存放回调函数来通知订阅者(比如上面的买家收藏了卖家的店铺,卖家通过收藏了该店铺的一个列表名单)。
- 最后就是发布消息,发布者遍历这个缓存列表,依次触发里面存放的订阅者回调函数。
实战
发布订阅模式是最经典的设计模式之一,介绍的文章也非常多。这里不打算过多介绍。直接上代码~~~
var Event = (function(){var list = {},listen,trigger,remove;listen = function(key,fn){if(!list[key]) {// 如果还没有订阅过此类消息,给该类消息创建一个缓存列表list[key] = [];}list[key].push(fn); // 订阅消息添加到缓存列表};trigger = function(){var key = Array.prototype.shift.call(arguments), // 取出消息类型名称fns = list[key]; // 取出该消息对应的回调函数的集合// 如果没有订阅过该消息的话,则返回if(!fns || fns.length === 0) {return false;}for(var i = 0, fn; fn = fns[i++];) {fn.apply(this,arguments); // arguments 是发布消息时附送的参数}};remove = function(key,fn){// 如果key对应的消息没有订阅过的话,则返回var fns = list[key];// 如果没有传入具体的回调函数,表示需要取消key对应消息的所有订阅if(!fns) {return false;}if(!fn) {fns && (fns.length = 0);}else {for(var i = fns.length - 1; i >= 0; i--){var _fn = fns[i];if(_fn === fn) {fns.splice(i,1);// 删除订阅者的回调函数}}}};return {listen: listen,trigger: trigger,remove: remove}
})();
// 测试代码如下:
Event.listen("color",function(size) {console.log("尺码为:"+size); // 打印出尺码为42
});
Event.trigger("color",42);
复制代码
JS设计模式七:发布-订阅模式相关推荐
- 从东京奥运会看js设计模式之发布订阅模式
开篇废话:本篇文章介绍发布-订阅模式,想必很多人听说过有一种观察者模式,网上既有资料说这是两种不同的设计模式,也有说这是一种模式,我倾向于认同他们是同一种设计模式.不必过于纠结 开篇楔子:东京奥运会已 ...
- JavaScript设计模式之发布-订阅模式(观察者模式)-Part1
<JavaScript设计模式与开发实践>读书笔记. 发布-订阅模式又叫观察者模式,它定义了对象之间的一种一对多的依赖关系.当一个对象的状态发生改变时,所有依赖它的对象都将得到通知. 例如 ...
- 设计模式-观察者模式 发布/订阅模式
设计模式-观察者模式 发布/订阅模式 代码 观察者接口 public interface IHanFeiZi{// 当吃早饭时public void havBreakFast();// 进行娱乐活动时 ...
- 【设计模式】692- TypeScript 设计模式之发布-订阅模式
前言 在之前两篇自测清单中,和大家分享了很多 JavaScript 基础知识,大家可以一起再回顾下~ 本文是我在我们团队内部"「现代 JavaScript 突击队」"分享的一篇内容 ...
- Javascript设计模式之发布-订阅模式
简介 发布-订阅模式又叫做观察者模式,他定义了一种一对多的依赖关系,即当一个对象的状态发生改变的时候,所有依赖他的对象都会得到通知. 回忆曾经 作为一名前端开发人员,给DOM节点绑定事件可是再频繁不过 ...
- JavaScript 设计模式之发布-订阅模式(上)
什么是发布订阅模式? 发布-订阅模式又叫观察者模式,它定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知.在JavaScript开发中,我们一般用事件模型来替 ...
- 浅谈js下的发布订阅模式(观察者模式)
场景 我们在做地图引擎的时候,会经常扩展一些插件,有些插件会动态根据地图渲染时机等做一些计算处理重新渲染等,这时候地图渲染时机如何通知到插件,就可以用到这个发布订阅模式来进行. 定义 发布订阅模式,也 ...
- JavaScript 设计模式之发布-订阅模式(下)
发布-订阅模式的通用实现 现在我们在上一篇文章中已经看到了如何让售楼处拥有接受订阅和发布事件的功能.假设现在小明又去另一个售楼处买房子,那么这段代码是否必须在另一个售楼处对象上重写一次呢,有没有办法可 ...
- JS 基础篇(发布订阅模式)
发布订阅模式的js文件 //发布者 var eventObj = {//缓存列表,存放订阅者的信息list:{},//添加订阅listen:function(key,fn){if(!this.list ...
- 设计模式之发布订阅模式
发布--订阅模式简介 发布--订阅模式又叫观察者模式,它定义对象间的一种一对多的依赖关系,多个观察者对象都依赖于一个目标对象,当目标对象的状态发生变化时,所有依赖于这个对象的观察者对象都会收到通知. ...
最新文章
- SSC:基于点云语义上下文的大规模激光SLAM的位置识别方法
- 付睿:对新事物的追寻之旅 | 优秀毕业生专访
- 西安python工资怎么样-在西安为什么对Python编程需求这么大?工资这么高?
- Fikker反向代理服务器的网站缓存加速/网站加速基础教程
- 大剑无锋之SQL求用户最近的登录时间【面试推荐】
- silverlight中数据绑定讲解
- 【HihoCoder - 1880】地铁环线 (前缀和,水题,模拟)
- matlab根据给定3点画圆弧_圆弧齿廓面齿轮齿顶尖化研究
- windows下SVN日志反馈中文乱码的解决方法
- 不同苹果账号体系的Capabilities情况
- C++ 进阶——object slicing 与虚函数与dynamic_cast
- linux系统中find怎么用,Linux系统中查找命令find的使用方法(一)
- php+access源码,php操作access源码
- Oracle 11g数据库基础教程(第2版)-课后习题-第六章
- hibernate历史版本下载
- Dell XPS BIOS强制降级方法
- proftpd java_Proftpd文件系统安装
- 计算机毕业设计Node.js+Express校园二手拍卖网(源码+程序+lw+远程调试)
- MS5351M时钟发生器芯片兼容SI5351-datdsheet
- [转] Xcode 高级调试技巧