mirror of
https://github.com/Tencent/tmagic-editor.git
synced 2026-01-27 04:18:18 +00:00
149 lines
3.3 KiB
Markdown
149 lines
3.3 KiB
Markdown
# 观察者数据类
|
||
|
||
`@tmagic/data-source` 提供了三种观察者数据类，用于实现数据的响应式监听。
|
||
|
||
## ObservedData（抽象类）
|
||
|
||
所有观察者数据类的抽象基类，定义了统一的接口。
|
||
|
||
### 抽象方法
|
||
|
||
| 方法 | 参数 | 返回值 | 说明 |
|
||
|------|------|--------|------|
|
||
| `update` | `(data: any, path?: string)` | `void` | 更新数据 |
|
||
| `on` | `(path: string, callback: Function, options?: { immediate?: boolean })` | `void` | 监听数据变化 |
|
||
| `off` | `(path: string, callback: Function)` | `void` | 取消监听 |
|
||
| `getData` | `(path: string)` | `any` | 获取指定路径的数据 |
|
||
| `destroy` | `()` | `void` | 销毁 |
|
||
|
||
## SimpleObservedData
|
||
|
||
基于 EventEmitter 的简单观察者实现，只支持单层路径监听。
|
||
|
||
### 使用示例
|
||
|
||
```typescript
|
||
import { SimpleObservedData } from '@tmagic/data-source';
|
||
|
||
const observed = new SimpleObservedData({ name: 'test' });
|
||
|
||
// 监听数据变化
|
||
observed.on('name', (newVal) => {
|
||
console.log('name 变更为:', newVal);
|
||
});
|
||
|
||
// 更新数据
|
||
observed.update({ name: 'new name' });
|
||
|
||
// 更新特定路径
|
||
observed.update('another name', 'name');
|
||
|
||
// 获取数据
|
||
const name = observed.getData('name');
|
||
|
||
// 取消监听
|
||
observed.off('name', callback);
|
||
|
||
// 销毁
|
||
observed.destroy();
|
||
```
|
||
|
||
### 特点
|
||
|
||
- 轻量级实现
|
||
- 只支持单层路径监听（如 `'name'`，不支持 `'user.name'`）
|
||
- 适用于简单数据结构
|
||
|
||
## DeepObservedData
|
||
|
||
基于 `deep-state-observer` 的深度观察者实现，支持深层路径监听。
|
||
|
||
### 使用示例
|
||
|
||
```typescript
|
||
import { DeepObservedData } from '@tmagic/data-source';
|
||
|
||
const observed = new DeepObservedData({
|
||
user: {
|
||
name: 'test',
|
||
profile: {
|
||
avatar: 'url'
|
||
}
|
||
}
|
||
});
|
||
|
||
// 监听深层路径
|
||
observed.on('user.profile.avatar', (newVal) => {
|
||
console.log('头像变更为:', newVal);
|
||
});
|
||
|
||
// 监听整个对象
|
||
observed.on('user', (newVal) => {
|
||
console.log('user 对象变更:', newVal);
|
||
});
|
||
|
||
// 立即执行回调
|
||
observed.on('user.name', callback, { immediate: true });
|
||
|
||
// 更新深层数据
|
||
observed.update('new avatar', 'user.profile.avatar');
|
||
|
||
// 获取深层数据
|
||
const avatar = observed.getData('user.profile.avatar');
|
||
```
|
||
|
||
### 特点
|
||
|
||
- 支持深层路径监听（如 `'user.profile.avatar'`）
|
||
- 支持 `immediate` 选项立即执行回调
|
||
- 适用于复杂嵌套数据结构
|
||
- 性能更优，只在相关路径变化时触发回调
|
||
|
||
## 在 DataSourceManager 中注册
|
||
|
||
可以通过静态方法注册自定义的观察者数据类：
|
||
|
||
```typescript
|
||
import { DataSourceManager, DeepObservedData } from '@tmagic/data-source';
|
||
|
||
// 注册深度观察者类
|
||
DataSourceManager.registerObservedData(DeepObservedData);
|
||
```
|
||
|
||
## 自定义观察者类
|
||
|
||
可以继承 `ObservedData` 实现自定义的观察者类：
|
||
|
||
```typescript
|
||
import { ObservedData } from '@tmagic/data-source';
|
||
|
||
class CustomObservedData extends ObservedData {
|
||
private data: any;
|
||
|
||
constructor(data: any) {
|
||
super();
|
||
this.data = data;
|
||
}
|
||
|
||
update(data: any, path?: string): void {
|
||
// 自定义更新逻辑
|
||
}
|
||
|
||
on(path: string, callback: Function, options?: { immediate?: boolean }): void {
|
||
// 自定义监听逻辑
|
||
}
|
||
|
||
off(path: string, callback: Function): void {
|
||
// 自定义取消监听逻辑
|
||
}
|
||
|
||
getData(path: string): any {
|
||
// 自定义获取数据逻辑
|
||
}
|
||
|
||
destroy(): void {
|
||
// 自定义销毁逻辑
|
||
}
|
||
}
|
||
```
|