JavaScript常见设计模式之 发布订阅模式(观察者模式)

161 阅读1分钟

发布订阅subscribe

一 含义解释:

发布-订阅模式 又称观察者模式 当一个对象状态发生改变 ,所有依赖于他的对象都得到通知

现实世界举例:

1 微信订阅号

2 我订阅一台手机-等有货了 发布者给每个订阅者发消息

这个例子中 我是订阅者 卖家是发布者

二 作用

买家不需要时时刻刻盯着手机等待卖家发消息 如果后续还买 可以直接联系卖买家

三 具体使用

计算机世界

1 使用ajax或者axios

  • 前端对后端发起网络请求
  • 我们通常都会在回调函数中写上我们需要做的一系列操作,其实这个就相当于我们去订阅了这个网络请求,我们并不知道什么时候请求会结束,但是没关系,只需要订阅了这个请求,请求结束之后就会执行我们所订阅的操作。

2.DOM事件-onChange addEventListener

document.body.addEventListener('click', function() 
{
    alert('我被点击了') 
}, false) 

document.body.click() // 模拟用户点击

我们开发者是没法知道用户什么时候回去点击,所以我们订阅了document.body上的click事件,当body节点被点击时,body节点便会向订阅者发布这个消息。

自定义订阅

const Patient = {
  name: 'xiaoming'
}
// 中午送餐人员
const Staff = {
  OrderedList: [],
  deliver: function () {
    this.OrderedList.forEach(personName => personName && console.log(`${personName},你的饭到了!`))
  },
  subscribe: function (Patient) {
    this.OrderedList.push(Patient.name)
  }
}

Staff.subscribe(Patient)

Staff.deliver()

3.数据流管理订阅-redux dva等

provider包裹 里是用subscribe实现

image.png

四 优缺点

优点: 时间解耦 对象解耦

缺点: 单一订阅没必要 增加代码量和降低代码效率