使用Map对象实现的一个简单的简单的监听者模式

对象

• Subject 主题
  定义方法：

     add(){ //订阅
      ...
     } 
  
     remove(observe){ //取消订阅
      ...
     }
  
     notify(message){ //推送信息
      ...
     }
  

• Observe 订阅者
  定义方法：

    update(message){  //信息处理
      ...
    }

/**

* 主题

*/

class Subject {

  constructor() {

    this.observes = new Map(); //订阅者对象集合

    this.messages = []; //推送的消息集合

  }

  // 订阅主题

  add(observe) {

    this.messages.forEach(message => {     

      observe.update(message);

    })

    this.observes.set(observe.id, observe);

  }

  //取消订阅

  remove(observe) {

    this.observes.has(observe.id) && this.observes.delete(observe.id);

  }

  //推送消息

  notify(value) {

    this.messages.push(value);

    this.observes.forEach(observe => {

      observe.update(value)

    })

  }

}

/**

* 订阅者

*/

class Observe {

  constructor(id) {

    this.id = id; // 实例对象唯一标识

  }

  update(message) {

    console.log("id: %s, value: %s", this.id, message)

  }

}

// 假设生成guid

function Guid() {

  function s4() {

    return Math.floor((1 + Math.random()) * 0x10000)

      .toString(16)

      .substring(1);

  }

  return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();

}

const subject = new Subject();

var o1 = new Observe(Guid()),

  o2 = new Observe(Guid()),

  o3 = new Observe(Guid()),

  o4 = new Observe(Guid());

subject.add(o1);

subject.add(o2);

subject.add(o3);

subject.notify("推送1");

subject.remove(o1);

subject.notify("[删除o1]: 推送2");

subject.remove(o2);

subject.notify("[删除o1、02]: 推送3");

subject.remove(o3);

subject.notify("[删除o1、02、03]: 推送4");

subject.add(o4); // 接收所有历史消息

//输出
id: e7766edc-f47d-d726-7ec6-456acf87dbb4, value: 推送1
id: 2d1c6763-8abf-e755-64ba-e87af7582f84, value: 推送1
id: 99d33283-6889-73af-da80-0f8c22a49983, value: 推送1
id: 2d1c6763-8abf-e755-64ba-e87af7582f84, value: [删除o1]: 推送2
id: 99d33283-6889-73af-da80-0f8c22a49983, value: [删除o1]: 推送2
id: 99d33283-6889-73af-da80-0f8c22a49983, value: [删除o1、02]: 推送3
id: b67a8969-0051-41bc-8c76-08b400d80a9e, value: 推送1
id: b67a8969-0051-41bc-8c76-08b400d80a9e, value: [删除o1]: 推送2
id: b67a8969-0051-41bc-8c76-08b400d80a9e, value: [删除o1、02]: 推送3
id: b67a8969-0051-41bc-8c76-08b400d80a9e, value: [删除o1、02、03]: 推送4

image.png