事件

• 在前端瀏覽器最常見的就是頁面交互事件
• 本質是發布/訂閱設計模式

---

目標

• 對象使用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]: 該事件未注冊')}}
}