事件

• 在前端瀏覽器最常見(jiàn)的就是頁(yè)面交互事件
• 本質(zhì)是發(fā)布/訂閱設(shè)計(jì)模式

---

目標(biāo)

• 對(duì)象使用add方法訂閱事件。
• 使用emit發(fā)布消息

---

訂閱事件

• 添加觸發(fā)事件的一個(gè)唯一字符串,以及對(duì)應(yīng)的處理函數(shù)
• 先初始化事件對(duì)象

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

• 訂閱
• 在訂閱事件的時(shí)候,需要先判斷事件是否存在.
• 若不存在,則直接加入到隊(duì)列(數(shù)組)
• 若存在,則放到隊(duì)尾(push進(jìn)入)

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

---

發(fā)布事件

• 當(dāng)使用emit方法是,傳入的第一個(gè)參數(shù)是事件的名稱.
• emit方法會(huì)根據(jù)傳入的名稱,找到對(duì)應(yīng)的事件處理組.
• 利用事件處理組對(duì)后面的參數(shù)進(jìn)行依次調(diào)用

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

---

調(diào)用

const e = new Event(); e.add('sayHello', (err, name) =>{if(err) {console.error(err);return}console.log(`hello ${name}`);return }) e.emit('sayHello','發(fā)生了錯(cuò)誤'); e.emit('sayHello', null, 'marron');

---

鏈?zhǔn)秸{(diào)用的實(shí)現(xiàn)

• 想使用如下的方式進(jìn)行調(diào)用

const e = new Event(); e .add('sayHello', (err, name) =>{if(err) {console.error(err);return;}console.log(`hello ${name}`); }) .emit('sayHello', '發(fā)生了錯(cuò)誤') .emit('sayHello', null, 'mar~!');

• 只需保證調(diào)用add后的執(zhí)行還是當(dāng)前的實(shí)例(e)即可
• 在類Event的內(nèi)部,this指向的是當(dāng)前的實(shí)例,因此只需在add方法中返回this即可實(shí)現(xiàn)
• 改寫Event,注意return 語(yǔ)句

class Event {constructor() {this.events = {};}add(name, cb) {if (this.events[name]) {this.events[name].push(cb);return this; // 返回當(dāng)前實(shí)例}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]: 該事件未注冊(cè)')}} }

總結(jié)

以上是生活随笔為你收集整理的node --- 模拟事件的异步的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。