白话讲讲EventEmitter的实现

「爱情、让人受尽委屈。」 2023-01-17 07:59 107阅读 0赞

# 白话讲讲EventEmitter的实现 #

首先我们要知道什么是EventEmitter？

简单来说就是对事件触发与事件监听器功能的封装。

## EventEmitter有什么API是需要我们去实现的 ##

*  on 对事件进行监听
 *  emit进行触发
 *  once是指只监听一次
 *  alloff是关掉所有消息队列中的监听
 *  off关掉相应的监听事件

## 怎么实现 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70]

### 构造函数 ###

首先定义一个存放消息队列的对象，每个消息队列都有一个名字eventname，这个消息队列可以承载多个事件对象

每个事件对象有两个属性：listener(存放回调函数，也就是你要监听的事件)，once(这个参数是为了只进行一次监听而设立的参数)

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 1]

### on监听函数 ###

1.  首先先判断有没有这个消息队列，没有的话创建一个新的消息队列，有的话进行for查找
2.  判断传进来的参数  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70_pic_center]

### once函数 ###

监听事件的once属性是true

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 2]

### emit函数 ###

1.  找到监听的事件进行触发
2.  这里需要注意的是当你找到你的监听事件，判断一下once属性，true进行撤掉当前监听事件  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 3]

### off函数 ###

1.  找到监听事件在对应消息队列的下标，方便进行切割

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 4]

### alloff函数 ###

1.  直接判断有没有这个消息队列
2.  清空消息队列或者清空对象

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 5]

### 封装工具函数 ###

#### 搜索函数 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 6]

#### 判断类型函数 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 7]  
[个人代码仓库][Link 1]  
[参考][Link 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70]: /images/20221021/7687b0246a364824afb8f823f00c1a75.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 1]: /images/20221021/0be54738f88f477b91b814c6d291bed2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70_pic_center]: /images/20221021/aa8a3703fa704767ae4adb4a53cb0f05.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 2]: /images/20221021/9dd0b744cc7e4e6ebd56ea64ec8e7333.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 3]: /images/20221021/7206fbf316504bf386cca8b6ac26cc88.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 4]: /images/20221021/7021249f49f743c199e8de22af369690.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 5]: /images/20221021/b51fdc4bd7464debbc31ebcd5cbf3b07.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 6]: /images/20221021/a58701c0af3a4296b234f13afbd4287c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 7]: /images/20221021/ed2213adf1cf4f19b8b1dea9916aef76.png
[Link 1]: https://gitee.com/wengjiaqi/event-emitter
[Link 2]: https://github.com/mqyqingfeng/EventEmitter