Event-emitter （理解篇）

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

Event-emitter （理解篇）相关推荐

一点就分享系列（理解篇_4+实践篇_2）”干货-全网最简且全”的理解！2020年了！您只知道GAN？ECCV超分论文“IRN” 全家桶大放送！！
一点就分享系列(理解篇_4+实践篇_2)"最新干货"--2020 ECCV 超分论文之一"IRN"(更新中..) 最近开始了csdn坚持原创之旅,目前到了理解篇 ...
一点就分享系列（理解篇3）—Cv任务“新世代”之Transformer系列（中篇-视觉模型篇DETR初代版本）
一点就分享系列(理解篇3)-Cv任务"新世代"之Transformer系列 (中篇-视觉模型篇) 对于上篇介绍transformer得原理,自认为把细节讲得很详细了,作为" ...
一点就分享系列（理解篇3）—Cv任务“新世代”之Transformer（下篇）提前“cv领域展开”——快速学习“视觉transformer的理解”+“一些吐槽”
一点就分享系列(理解篇3)Cv任务"新世代"之Transformer(下篇)--"cv领域展开" 提示:本篇内容为下篇,如感兴趣可翻阅上和中篇! 理解篇3 上 ...
一点就分享系列(理解篇5）Meta 出品 Segment Anything 4月6号版核心极速解读——主打一个”Zero shot“是贡献和辅助，CV依然在！
一点就分享系列(理解篇5)Meta 出品 Segment Anything 通俗解读--主打一个"Zero shot"是贡献,CV依然在! 文章目录一点就分享系列(理解篇5)Me ...
Binder实用指南（一） - 理解篇
这是关于Android Binder机制的一篇文章,Binder是Android里面非常重要的组成,也是最难理解的一块知识点,学习Binder最好的方法是深入源码阅读,因为Binder相关的知识错综复 ...
终于完全弄懂了KMP(个人理解篇)
前阵子在学习KMP相关的内容,其他部分都挺好理解的,最后在next数组和k=next[k]这个递推公式上迷糊了好久,看了不少人写的博客,有的写着写着最后的结论又跳跃了,有的是写清楚了,但是感觉写的有过 ...
php event loop,理解javascript中的事件循环(Event Loop)
背景在研究js的异步的实现方式的时候,发现了JavaScript 中的 macrotask 和 microtask 的概念.在查阅了一番资料之后,对其中的执行机制有所了解,下面整理出来,希望可以帮助 ...
LQR的理解与运用第一期——理解篇
目录标题 0.本系列目的理解六个问题运用一阶倒立摆 matlab+simscape multibody实现简单的轮足模型(二阶倒立摆) 1 理解LQR 写在前面 Q1:LQR控制的是什么 Q ...
Oracle 中的 Incarnation 到底是个什么？概念理解篇
高中时候,我深深"爱"上了一位女孩子.那个年纪确实不懂什么是真正的"爱",反正每天满脑子都是她,只要见到她就会紧张和激动,确切的说是深深的喜欢.你告诉我这叫初恋 ...
Spring AOP面向切面编程:理解篇（一看就明白）
一直想着怎么去通俗的讲解AOP,看了一篇文章受到了启发(https://blog.csdn.net/qukaiwei/article/details/50367761),下面我加入自己的理解,咱们来说 ...

Event-emitter （理解篇）

javascript中apply、call和bind的区别

Event-emitter （理解篇）相关推荐

最新文章

热门文章