Seed Fe Event Channel

https://github.com/xianghongai/seed-fe-event-channel
Admin
A JavaScript event channel implementation based on EventEmitter2, featuring a protected event...
Tokens:2,289
Snippets:7
Trust Score:7.5
License:MIT
Update:1 year ago
Show doc for...
Tokens:
Raw
### Install @seed-fe/event-channel

Source: https://github.com/xianghongai/seed-fe-event-channel/blob/main/README.md

Instructions for installing the @seed-fe/event-channel package using npm, yarn, or pnpm.

```bash
# 使用 npm
npm install @seed-fe/event-channel

# 使用 yarn
yarn add @seed-fe/event-channel

# 使用 pnpm (推荐)
pnpm add @seed-fe/event-channel
```

--------------------------------

### Create Event Channel Instance

Source: https://github.com/xianghongai/seed-fe-event-channel/blob/main/README.md

Demonstrates how to create a new instance of the event channel using the `createEventChannel` function.

```typescript
import { createEventChannel } from '@seed-fe/event-channel';

// 创建事件通道实例
const eventChannel = createEventChannel();
```

--------------------------------

### Basic Event Handling

Source: https://github.com/xianghongai/seed-fe-event-channel/blob/main/README.md

Shows how to listen for events using `on` and `once`, emit events with `emit`, and remove listeners with `off`. It covers both regular and one-time listeners.

```typescript
import eventChannel from '@seed-fe/event-channel';

// 添加事件监听器
eventChannel.on('user-login', (userData) => {
  console.log('用户登录:', userData);
});

// 添加一次性事件监听器
eventChannel.once('app-init', () => {
  console.log('应用初始化完成，此监听器只会触发一次');
});

// 触发事件
eventChannel.emit('user-login', { id: 1, name: 'Alice' });

// 移除事件监听器
const handler = () => console.log('处理事件');
eventChannel.on('some-event', handler);
eventChannel.off('some-event', handler); // 移除特定监听器
eventChannel.off('some-event'); // 移除该事件的所有监听器
```

--------------------------------

### TypeScript - 注册和管理受保护事件

Source: https://github.com/xianghongai/seed-fe-event-channel/blob/main/DESIGN.md

演示如何使用事件通道注册受保护事件，添加和移除监听器，以及如何取消事件的保护。受保护事件的监听器在取消保护前无法被移除。

```typescript
const myEvent = registerProtectedEvent('MY_EVENT', {
  description: '重要事件'
});

eventChannel.on(myEvent, handler);

eventChannel.off(myEvent, handler); // 不会真正移除

unregisterProtectedEvent(myEvent);

eventChannel.off(myEvent, handler); // 成功移除
```

--------------------------------

### TypeScript - 引入事件通道核心功能

Source: https://github.com/xianghongai/seed-fe-event-channel/blob/main/DESIGN.md

展示如何从 '@seed-fe/event-channel' 包中导入创建事件通道和注册受保护事件所需的函数。

```typescript
import {
  createEventChannel,
  registerProtectedEvent,
} from '@seed-fe/event-channel';
```

--------------------------------

### TypeScript - 事件保护机制内部实现

Source: https://github.com/xianghongai/seed-fe-event-channel/blob/main/DESIGN.md

揭示事件通道内部实现事件保护机制的关键部分，包括使用 Map 存储受保护事件及其元数据，以及注册受保护事件的函数。

```typescript
// 内部实现
const protectedEvents = new Map<symbol, { name: string; meta: ProtectedEventMeta }>();

function registerProtectedEvent(name: string, meta: ProtectedEventMeta = {}): symbol {
  const sym = Symbol(name);
  protectedEvents.set(sym, { name, meta });
  return sym;
}
```

--------------------------------

### Protected Event Mechanism

Source: https://github.com/xianghongai/seed-fe-event-channel/blob/main/README.md

Explains and demonstrates the protected event mechanism using `registerProtectedEvent` and `unregisterProtectedEvent`. Protected events use Symbols as keys to prevent accidental removal of critical listeners.

```typescript
import { registerProtectedEvent, unregisterProtectedEvent } from '@seed-fe/event-channel';

// 注册受保护事件
const myEvent = registerProtectedEvent('MY_EVENT', { // 将使用 Symbol('MY_EVENT') 作为键
  description: '重要系统事件'
});

// 添加监听器
eventChannel.on(myEvent, (data) => {
  console.log('处理受保护事件:', data);
});

// 尝试移除监听器 - 无效操作
eventChannel.off(myEvent); // 不会真正移除监听器

// 触发事件
eventChannel.emit(myEvent, { important: 'data' });

// 取消保护
unregisterProtectedEvent(myEvent);

// 现在可以移除监听器
eventChannel.off(myEvent); // 成功移除
```
Tokens:
Raw