欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

js 设计模式——观察者模式

程序员文章站 2023-10-31 22:18:28
观察者模式 定义 观察者模式(又被称为发布 订阅(Publish/Subscribe)模式,属于行为型模式的一种,它定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象。这个主题对象在状态变化时,会通知所有的观察者对象,使他们能够自动更新自己 注意(观察者模式和发布订阅是有不同的) 区 ......

观察者模式

定义

观察者模式(又被称为发布-订阅(publish/subscribe)模式,属于行为型模式的一种,它定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象。这个主题对象在状态变化时,会通知所有的观察者对象,使他们能够自动更新自己

注意(观察者模式和发布订阅是有不同的)

区别

观察者模式 在软件设计中是一个对象,维护一个依赖列表,当任何状态发生改变自动通知它们。

发布-订阅模式 消息的发送方,叫做发布者(publishers),消息不会直接发送给特定的接收者,叫做订阅者。

js 设计模式——观察者模式

左边相当于微信里的微商-顾客之间的关系。右边相当于商家-淘宝-顾客之间的关系

观察者模式:顾客关注了微商的商品,微商会记住顾客关注的商品,一旦上新就直接 私聊 通知所有关注这个商品的顾客。这里的顾客就相当于观察者,这里的微商就相当于主题

订阅发布模式:顾客通过淘宝(app或者网站)关注了商家的商品,商家一旦上新就通过淘宝(app或者网站)向关注了它的顾客 群发 消息。这里的顾客就是订阅者,这里的淘宝就是事件总线,这里的商家就是发布者

dom事件

只要我们曾经在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设计模式之观察者模式

观察者模式vs订阅发布模式