事件

• 在前端浏览器最常见的就是页面交互事件
• 本质是发布/订阅设计模式

---

目标

• 对象使用add方法订阅事件。
• 使用emit发布消息

---

订阅事件

• 添加触发事件的一个唯一字符串,以及对应的处理函数
• 先初始化事件对象

class Event {constructor(){this.events = {};}
}

• 订阅
• 在订阅事件的时候,需要先判断事件是否存在.
• 若不存在,则直接加入到队列(数组)
• 若存在,则放到队尾(push进入)

class Event {constructor(){...},add(name, cb) {if (this.map[name]) {this.map[name].push(fn);return;}this.map[name] = [fn];return;}
}

---

发布事件

• 当使用emit方法是,传入的第一个参数是事件的名称.
• emit方法会根据传入的名称,找到对应的事件处理组.
• 利用事件处理组对后面的参数进行依次调用

class Event {constructor(){ ... }emit(name, ...args) {this.map[name].forEach( cb => {cb(...args);})}
}

---

调用

const e = new Event();
e.add('sayHello', (err, name) =>{if(err) {console.error(err);return}console.log(`hello ${name}`);return
})
e.emit('sayHello','发生了错误');
e.emit('sayHello', null, 'marron');

---

链式调用的实现

• 想使用如下的方式进行调用

const e = new Event();
e
.add('sayHello', (err, name) =>{if(err) {console.error(err);return;}console.log(`hello ${name}`);
})
.emit('sayHello', '发生了错误')
.emit('sayHello', null, 'mar~!');

• 只需保证调用add后的执行还是当前的实例(e)即可
• 在类Event的内部,this指向的是当前的实例,因此只需在add方法中返回this即可实现
• 改写Event,注意return 语句

class Event {constructor() {this.events = {};}add(name, cb) {if (this.events[name]) {this.events[name].push(cb);return this; // 返回当前实例}this.events[name] = [cb];return this;}emit(name, ...args) {if (this.events[name]) {this.events[name].forEach(cb => {cb(...args);})return this;} else {console.error('[Event Error]: 该事件未注册')}}
}