javascript 观察者模式 发布订阅模式 本是古典 何须时尚 2022-04-24 10:14 158阅读 0赞 ## 观察者模式 ## 观察者模式,每一个观察者对象有两个方法 * 添加监听`subscribe` * 发布事件`publish` 观察者有个`list`存放所有的已经添加监听,当需要的时候,遍历当前观察者的`list`,达到发布给`list`的所有的观察者。 //观察者模式 class Hunter { constructor(name, level) { this.name = name; this.level = level; this.list = []; } publish(money) { console.log(this.level + '猎人' + this.name + '寻求帮助'); this.list.forEach(function (item, index) { item(money); }); } subscribe(target, fn) { console.log(this.level + '猎人' + this.name + '订阅了' + target.name); target.list.push(fn); } } let Ming = new Hunter('小白','白银') let Jin = new Hunter('小金','黄金') let Zhang = new Hunter('小张','黄金') let Peter = new Hunter('Peter','青铜') Ming.subscribe(Peter, function(money){ console.log('小白表示:' + (money > 200 ? '':'暂时很忙,不能') + '给予帮助') }) Jin.subscribe(Peter, function(money){ console.log('小金表示:给予帮助') }) Jin.subscribe(Peter, function(money){ console.log('小张表示:给予帮助') }) Peter.publish(180) // 白银猎人小白订阅了Peter // 黄金猎人小金订阅了Peter // 黄金猎人小金订阅了Peter // 青铜猎人Peter寻求帮助 // 小白表示:暂时很忙,不能给予帮助 // 小金表示:给予帮助 // 小张表示:给予帮 ## 发布订阅模式 ## * 调度中心,存放所有的`topic`和订阅事件 * `hunter` 发布订阅者 可以额外添加权限控制、节流操作等等。 //发布订阅模式 //定义工会 let HunterUnion = { type: 'hunt', topics: Object.create(null), subscribe: function (topic, fn) { if(!this.topics[topic]){ this.topics[topic] = []; } this.topics[topic].push(fn) }, publish: function (topic, money) { if(!this.topics[topic]) return; this.topics[topic].map(v=>v(money)) } } //定义猎人 class Hunter { constructor(name, level){ this.name = name; this.level = level; } publish(topic, money) { console.log(this.level + '猎人' + this.name + `寻求${ topic}帮助`); HunterUnion.publish(topic, money) } subscribe(topic, fn) { console.log(this.level + '猎人' + this.name + '订阅了' + topic); HunterUnion.subscribe(topic, fn) } } let Ming = new Hunter('小白','白银') let Jin = new Hunter('小金','黄金') let Zhang = new Hunter('小张','黄金') let Peter = new Hunter('Peter','青铜') Ming.subscribe('tiger', function(money){ console.log('小白表示:' + (money > 200 ? '':'暂时很忙,不能') + '给予帮助') }) Jin.subscribe('tiger', function(money){ console.log('小金表示:给予帮助') }) Jin.subscribe('sheep', function(money){ console.log('小金表示:给予帮助') }) Zhang.subscribe('tiger', function(money){ console.log('小张表示:给予帮助') }) Peter.publish('tiger', 200) Peter.publish('sheep', 100) // 白银猎人小白订阅了tiger // 黄金猎人小金订阅了tiger // 黄金猎人小金订阅了sheep // 黄金猎人小张订阅了tiger // 青铜猎人Peter寻求tiger帮助 // 小白表示:暂时很忙,不能给予帮助 // 小金表示:给予帮助 // 小张表示:给予帮助 // 青铜猎人Peter寻求sheep帮助 // 小金表示:给予帮助 [原文链接][Link 1] [Link 1]: https://mp.weixin.qq.com/s/B1Sp2A8MR8vm4g4EO24glw
相关 【JavaScript 设计模式】观察者模式与发布订阅模式 JavaScript 设计模式系列文章: [设计模式总览][Link 1] [工厂模式][Link 2] [单例模式][Link 3] [观察者模式/ Bertha 。/ 2022年12月04日 07:58/ 0 赞/ 179 阅读
相关 订阅发布和观察者模式 发布订阅模式 > 把多个方法暂存起来,最后一次触发执行 作用: 解偶 使用场景: 如,多个类或者函数内,可以分散订阅某个操作,最后统一发布。分散的好处就是不 ╰+攻爆jí腚メ/ 2022年08月28日 14:47/ 0 赞/ 140 阅读
相关 浅谈JavaScript设计模式——观察者模式(发布订阅模式) 观察者模式,又称为发布订阅模式,它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题对象的状态发生变化时就会通知所有的观察者对象,使得它们能够自动更新自己 分手后的思念是犯贱/ 2022年06月18日 08:51/ 0 赞/ 189 阅读
相关 观察者模式(发布-订阅者模式) 观察者模式定义了一种依赖关系,解决了主体对象和观察者之间功能的耦合,主要应用于大型项目的模块化开发中,解决团队开发中模块之间的通信问题,利用观察者模式还可以实现自定义事件。 素颜马尾好姑娘i/ 2022年05月22日 06:00/ 0 赞/ 167 阅读
相关 设计模式之观察者模式(发布订阅模式) 说明:本文参照《大话设计模式》中的案例做简要解析 观察者模式: 又叫发布-订阅模式,定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象。 深藏阁楼爱情的钟/ 2022年05月21日 10:39/ 0 赞/ 214 阅读
相关 javascript 观察者模式 发布订阅模式 观察者模式 观察者模式,每一个观察者对象有两个方法 添加监听`subscribe` 发布事件`publish` 观察者有个`list`存放所有的已经添加监 本是古典 何须时尚/ 2022年04月24日 10:14/ 0 赞/ 159 阅读
相关 JavaScript中观察者和发布订阅模式 可以参考文章: [https://juejin.im/post/5a14e9edf265da4312808d86][https_juejin.im_post_5a14e9e 超、凢脫俗/ 2022年01月27日 07:07/ 0 赞/ 177 阅读
相关 学习观察者模式与发布/订阅模式 > 最近学习了观察者模式和发布/订阅模式,但是一直有种不得要领的感觉,今天重新复习了一遍又有了新的思考,记录一下学习收获。 观察者模式 概念引用原文的话如下: > T 港控/mmm°/ 2022年01月20日 03:55/ 0 赞/ 220 阅读
相关 发布订阅模式(观察者模式) 设计模式的目的就是使类成为可复用的组件。 在观察者模式中观察者接口只注重被观察者,而被观察者接口只注重观察者,具体是观察者接口实现类中的哪一个并不在意,而被观察者也是如此。这 清疚/ 2021年12月15日 00:27/ 0 赞/ 225 阅读
还没有评论,来说两句吧...