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

观察者模式

定义

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

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

区别

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

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

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

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

订阅发布模式：顾客通过淘宝（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订阅发布模式