最近使用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:多个组件同时监听一个事件,若同时触发事件,则可能某些组件不会执行该事件的回调。