观察者模式(又被称为发布-订阅(publish/subscribe)模式,属于行为型模式的一种,它定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象。这个主题对象在状态变化时,会通知所有的观察者对象,使他们能够自动更新自己
观察者模式 在软件设计中是一个对象,维护一个依赖列表,当任何状态发生改变自动通知它们。
发布-订阅模式 消息的发送方,叫做发布者(publishers),消息不会直接发送给特定的接收者,叫做订阅者。
左边相当于微信里的微商-顾客之间的关系。右边相当于商家-淘宝-顾客之间的关系
观察者模式:顾客关注了微商的商品,微商会记住顾客关注的商品,一旦上新就直接 私聊 通知所有关注这个商品的顾客。这里的顾客就相当于观察者,这里的微商就相当于主题
订阅发布模式:顾客通过淘宝(app或者网站)关注了商家的商品,商家一旦上新就通过淘宝(app或者网站)向关注了它的顾客 群发 消息。这里的顾客就是订阅者,这里的淘宝就是事件总线,这里的商家就是发布者
只要我们曾经在dom节点上面绑定过事件函数,那我们就使用过观察者模式,应为js和dom之间就是实现了一种观察者模式
document.body.addeventlistener("click", function() { alert("hello world") },false ) document.body.click() //模拟用户点击
// 定义商家 let merchants = {} // 定义预定列表 merchants.orderlist = {} // 将增加的预订者添加到预定客户列表中 merchants.listen = function(id, info) { if(!this.orderlist[id]) { this.orderlist[id] = [] } this.orderlist[id].push(info) console.log('预定成功') } //发布消息 merchants.publish = function(id) { let infos = this.orderlist[id] // 判断是否有预订信息 if(!infos || infos.length === 0) { console.log('您还没有预订信息!') return } // 如果有预订信息,则循环打印 infos.foreach((el, index) => { console.log('尊敬的客户:') el.call(this, arguments) console.log('已经到货了') }) } merchants.remove = function(id, fn) { // 撤销订单 var infos = this.orderlist[id] if(infos instanceof array){ infos.foreach((el, index) => { el === fn && this.orderlist[id].splice(index, 1) }) } console.log('撤销成功') } // 定义一个预订者customera,并指定预定信息 let customera = function() { console.log('黑色至尊版一台') } let customerb = function() { console.log('白色至尊版一台') } let customerc = function() { console.log('红色至尊版一台') } // customera 预定手机,并留下预约电话 merchants.listen('15888888888', customera) // 预定成功 merchants.listen('15888888888', customerb) // 预定成功 merchants.listen('15777777777', customerb) // 预定成功 merchants.listen('15777777777', customerc) // 预定成功 merchants.remove('15888888888', customerb) // 撤销成功 // 商家发布通知信息 merchants.publish('15888888888') merchants.publish('15777777777') 预定成功 预定成功 预定成功 预定成功 撤销成功 尊敬的客户: 黑色至尊版一台 已经到货了 尊敬的客户: 白色至尊版一台 已经到货了 尊敬的客户: 红色至尊版一台 已经到货了
对于观察者模式还只是浅薄的认识,如有不对,还请大佬们指出,感谢(✿◕‿◕✿)
参考链接
如对本文有疑问, 点击进行留言回复!!
javascript从入门到跑路-----小文的js学习笔记(19)------- js的垃圾回收机制
Agora 开源 | 一个 Demo,帮你快速实现社交直播四大场景
网友评论