你好,Observer(观察者模式)

·  阅读 427
你好,Observer(观察者模式)

概念

观察者模式,又叫订阅-发布模式(Publish/Subscribe Pattern),属于行为型模式

被观察对象(subject)维护一组观察者(observer),当被观察对象状态改变时,通过调用观察者的某个方法将这些变化通知到观察者。

观察者模式.png

关键点

  • 订阅功能
  • 取消订阅
  • 发布功能(触发事件)

现实例子

  • 你订阅了某个博主的频道,当有内容更新时会收到推送;
  • JavaScript中的事件订阅响应机制;
  • 粉丝和偶像的关系,你的 idol 是被观察者,作为粉丝的你就是观察者;

实现

class Subscribe{
  constructor(){
    // 创建容器
    this.pool = new Map()
  }
  // 创建订阅者
  addSubscribe(key, func){
    this.pool.set(key,func)
  }
  // 取消订阅
  removeSubscribe(key){
    this.pool.delete(key)
  }
  // 触发(广播)
  broadcast(){
    const [key,...rest] = [...arguments];
    if(this.pool.has(key)){
      const func = this.pool.get(key)
      func.apply(this, rest)
    }
  }
}
const subscribe = new Subscribe();
subscribe.addSubscribe('event1',function(param){
  console.log('发布新值了',param)
})
subscribe.broadcast('event1',1); 
subscribe.broadcast('event1',2);
subscribe.broadcast('event1',3);
subscribe.removeSubscribe('event1');
subscribe.broadcast('event1',3);
复制代码

执行结果

发布新值了 1
发布新值了 2
发布新值了 3
复制代码

请点个赞呗,😳

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改