当前位置: 首页 > 工具软件 > emitter > 使用案例 >

Event-emitter (理解篇)

羿易安
2023-12-01

最近使用event-emitter比较多,特地去查看了相关源码和加上自己的理解,写下点笔记,

各位大佬觉得写得有错的指教一下,谢谢。

参考资料:

Event emitter的监听事件:https://www.php.cn/xiaochengxu-391850.html

JS的EventEmitter使用步奏详解:https://www.php.cn/xiaochengxu-391849.html

javascript中apply、call和bind的区别https://www.cnblogs.com/cosiray/p/4512969.html

发布订阅模式

DOM 的事件机制就是发布订阅模式最常见的实现,这大概是前端最常用的编程模型了,
监听某事件,当该事件发生时,监听该事件的监听函数被调用。


使用案例:

let emitter = new EventEmitter();

// 发布
emitter.emit("event:name-changed", { name: input.value });


// subscribe 订阅  相当于emitter.on
emitter.on("event:name-changed", data => {

  let str = `Your name is: ${data.name}`;
  console.log(str)

});


运行顺序是:

emit(发布) - > apply或call (内部执行) -> on(订阅)

tip:

emit // 触发事件,并把参数传给事件的处理函数
on   // 监听event事件,获得emit传递的参数,触发时调用callback函数

javascript中apply、call和bind的区别

在JS中,这三者都是用来改变函数的this对象的指向的

var xh = {
  name : "小红",
  gender : "女",
  age : 18
}

对于call可以这样:
xw.say.call(xh);

对于apply可以这样:
xw.say.apply(xh);

而对于bind来说需要这样:
xw.say.bind(xh)();

call和apply都是对函数的直接调用,而bind方法返回的仍然是一个函数,
因此后面还需要()来进行调用才可以。

意思是只要执行了call和apply,那么肯定会执行它们改变this指向的函数

总结:
所以event emitter并非是一直有个类似setinterval的东西提醒,
而是每一次emit就会触发apply或者call的执行,然后再触发on。

PS:多个组件同时监听一个事件,若同时触发事件,则可能某些组件不会执行该事件的回调。

 类似资料: