# event

**Repository Path**: imcyk/event

## Basic Information

- **Project Name**: event
- **Description**: 事件总线，允许消息在不同页面间传递
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 1
- **Created**: 2018-12-07
- **Last Updated**: 2023-10-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Event 事件总线（小程序版）

## 事件总线是什么？
通过统一的方法由一个页面向其他任何页面传递消息。

## 为什么用事件总线
众所周知，传参是任何项目必须，小程序内，a页面打开b页面可以通过参数传递，b退回a也可以通过写入缓存，并利用a页面的show生命周期实现。那么假设从入口文件app.js需要传递某些json到任意一个页面。
### 案例1:
客服消息，小程序约定websocket只能使用2个，也就意味着ws的资源是很宝贵的。所以，在app.js内连接服务端ws地址，当用户不在客服对话页面在首页，通过模拟app消息通知的方式在顶部显示通知。而当用户进入对话页面的时候，app.js将消息推给对话界面。当用户在商品界面的时候，app.js推送给商品界面，界面显示客服消息未读数量下标。
### 案例2:
定位，小程序往往用到定位，比如外卖、打车。首页需要实时定位，首页请求app.js需要定位，app.js将定位实时发给首页。下完订单后，订单页面需要定位，一样告诉app.js我需要定位。这样同样的定位方法，可以给同时分发给不同页面使用，确保性能。
### 案例3：
同步刷新用户信息，有些项目设计到的用户信息，比如积分余额可能会因为需求原因，后台统计导致变化，导致需要在进入页面实时请求用户信息，并渲染已经打开页面。使用生命周期会引起延迟，毕竟从缓存取出，在渲染根据手机性能会有0.2～1秒的延迟，对用户并没那么友好。可以使用事件总线告知其他页面，你需要刷新用户信息了，使得页面在后台自动的从缓存或者消息总线内获取并渲染

## 使用方法：
### 引入并实例化
##### 引入
`import Event from '../../utils/event'`
##### 实例化对象
`const event = new Event();`

### 注册接收事件
```javascript
event.on(name, sign, function(data) {
     ...code
})
```
### 移除事件
```javascript
event.remove(name, sign);
```
### 发送消息
```javascript
event.emit(name, data);
```
## API说明
###### event.on(name, self, callback)
| 参数名称  | 参数意义  |  备注 |
| :------------ | :------------ | :------------ |
| name  | 接收事件的名称   | 相当于消息的标题 |
| self  | 标示符  | 相当于我的名字  |
| callback  | 接收消息后回调事件  | 使用参数可以接收消息内容  |

###### event.remove(name, self)
| 参数名称  | 参数意义  |  备注 |
| :------------ | :------------ | :------------ |
| name  | 移除事件的名称   |  |
| self  | 标示符  | 要移除谁的消息接收，或者可以理解为禁止谁（页面）接收消息，通常是自己也可以是别的页面  |

备注：若卸载页面请一定要remove注册的事件，否则会内存溢出

###### event.emit(name, data)
| 参数名称  | 参数意义  |  备注 |
| :------------ | :------------ | :------------ |
| name  | 发送事件的名称   | 相当于消息的标题 |
| data  | 消息内容  | 参考on方法接收和处理消息  |