2020-03-20 发布-订阅模式 EventEmitter

发布-订阅模式，又称观察者模式。
一对多：当一个对象更新时，所有依赖它的对象都将得到通知并自动更新。
关键代码：在抽象类里有一个 array list 来存放观察者们。
关键概念：即使没有观察者，主体也可以独自存在并正常运行。

主体“发布”事件。
观察者通过“订阅”事件来观察对象。

优点：
有助于解耦，保持功能的隔绝。
因为触发事件的代码和监听事件的代码是完全分离的。

缺点：

1. 如果观察者和主体之间有循环依赖，系统会循环崩溃。
2. 主体有很多直接/间接观察者的话，通知到所有观察者很花时间。
3. 观察者们不知道主体怎么发生变化，只知道它变了。

代码1 - 红宝书版：

function EventTarget() {
  this.handler = {}
}
EventTarget.prototype = {
  constructor: EventTarget,
  addHander(type, handler) {
    //增加事件
    if (typeof this.handler[type] == 'undefined') {
      this.handler[type] = []
    }
    this.handler[type].push(handler) //可能有很多方法，把方法做为数组
  },
  fire(event) {
    //触发事件，传入触发的事件名和参数
    if (!event.target) {
      //如果没有传入事件对象，把实例做为对象
      event.target = this
    }
    //事件方法做为数组存在
    const handlers = this.handler[event.type]
    //if (handlers instanceof Array) {
    if (Array.isArray(handlers)) {
      const length = handlers.length
      for (let k = 0; k < length; k++) {
        handlers[k](event)
      }
    }
  },
  removeHander(type, handler) {
    //删除事件
    const handlers = this.handler[type]
    //if (handlers instanceof Array) {
    if (Array.isArray(handlers)) {
      const length = handlers.length
      for (let k = 0; k < length; k++) {
        if (handlers[k] == handler) {
          this.handler[type].splice(k, 1)
          break
        }
      }
    }
  }
}
let event = new EventTarget()
function hello() {
  console.log('hi')
}
event.addHander('click', hello)
event.fire({
  type: 'click'
})

代码2 - es6版:

// to do

调用代码：

        function handleMessage(event){
            alert("Message received: " + event.message);
        }

        var target = new EventTarget();
        
        target.addHandler("message", handleMessage);

        target.fire({ type: "message", message: "Hello world!"});
        
        target.removeHandler("message", handleMessage);

        target.fire({ type: "message", message: "Hello world!"});

结合“寄生组合式继承”（红宝书p172）：

        function Person(name, age){
            EventTarget.call(this);
            this.name = name;
            this.age = age;
        }
        
        inheritPrototype(Person,EventTarget);
        
        Person.prototype.say = function(message){
            this.fire({type: "message", message: message});
        };
        
        
        
        function handleMessage(event){
            alert(event.target.name + " says: " + event.message);
        }

        var person = new Person("Nicholas", 29);
        
        person.addHandler("message", handleMessage);
        
        person.say("Hi there.");

        function object(o){
            function F(){}
            F.prototype = o;
            return new F();
        }
            
        function inheritPrototype(subType, superType){
            var prototype = object(superType.prototype);   //create object
            prototype.constructor = subType;               //augment object
            subType.prototype = prototype;                 //assign object
        }

参考资料：

1. 《红宝书》第22章 高级技巧 - 自定义事件 p616 - 618
2. 菜鸟教程 https://www.runoob.com/design-pattern/observer-pattern.html
3. 雾切's blog 自定义事件/观察者模式