Edit: JSBox 组件间复杂交互与数据同步完全指南

编辑文章

标题 *

URL 别名 *

内容 * (支持 Markdown 格式)

# JSBox 组件间复杂交互与数据同步完全指南

在大型 JSBox 应用中，组件间的交互和数据同步是最具挑战性的问题之一。当多个组件需要共享状态、响应彼此的变化时，如何设计一个清晰、高效、可维护的架构就显得尤为重要。

## 一、组件交互模式概览

### 1. 交互复杂度的层次

组件间的交互可以分为不同的复杂度层次：

```javascript
// 简单交互：单向数据流
// A -> B
componentA.emit('data:updated', data);
componentB.on('data:updated', (data) => { /* 处理 */ });

// 中等复杂度：双向交互
// A <-> B
componentA.on('request:data', () => {
    componentB.emit('response:data', data);
});

// 高复杂度：多组件协同
// A -> B -> C
//  \-> D -> E
// 需要更复杂的协调机制
```

### 2. 核心挑战

- **状态一致性**：确保多个组件显示的数据保持同步
- **时序问题**：处理异步操作的顺序和依赖
- **性能优化**：避免不必要的更新和渲染
- **错误恢复**：一个组件出错不应影响整个系统
- **可维护性**：交互逻辑要清晰、可追踪

## 二、高级组件通信架构

### 1. 中介者模式（Mediator Pattern）

中介者模式通过一个中心协调器来管理组件间的交互：

```javascript
class ComponentMediator {
    constructor() {
        this.components = new Map();
        this.interactions = new Map();
        this.state = {};
    }
    
    // 注册组件
    register(id, component) {
        this.components.set(id, component);
        
        // 为组件注入通信方法
        component.mediator = {
            send: (target, message, data) => {
                this.send(id, target, message, data);
            },
            broadcast: (message, data) => {
                this.broadcast(id, message, data);
            },
            request: (target, message, data) => {
                return this.request(id, target, message, data);
            }
        };
        
        return this;
    }
    
    // 定义交互规则
    defineInteraction(name, config) {
        this.interactions.set(name, {
            participants: config.participants,
            coordinator: config.coordinator,
            validators: config.validators || [],
            transformers: config.transformers || {}
        });
    }
    
    // 发送消息
    send(from, to, message, data) {
        const target = this.components.get(to);
        if (!target) {
            console.error(`Component ${to} not found`);
            return;
        }
        
        // 查找适用的交互规则
        const interaction = this.findInteraction(from, to, message);
        
        if (interaction) {
            // 应用验证器
            for (const validator of interaction.validators) {
                if (!validator(from, to, message, data)) {
                    console.warn(`Validation failed for ${message}`);
                    return;
                }
            }
            
            // 应用转换器
            if (interaction.transformers[message]) {
                data = interaction.transformers[message](data);
            }
        }
        
        // 记录交互历史
        this.logInteraction(from, to, message, data);
        
        // 发送消息
        if (target.handleMessage) {
            target.handleMessage(message, data, from);
        }
    }
    
    // 广播消息
    broadcast(from, message, data) {
        this.components.forEach((component, id) => {
            if (id !== from) {
                this.send(from, id, message, data);
            }
        });
    }
    
    // 请求-响应模式
    async request(from, to, message, data) {
        return new Promise((resolve, reject) => {
            const requestId = this.generateRequestId();
            
            // 设置超时
            const timeout = setTimeout(() => {
                reject(new Error(`Request timeout: ${message}`));
            }, 5000);
            
            // 注册响应处理器
            this.once(`response:${requestId}`, (response) => {
                clearTimeout(timeout);
                resolve(response);
            });
            
            // 发送请求
            this.send(from, to, message, {
                ...data,
                __requestId: requestId
            });
        });
    }
    
    // 查找适用的交互规则
    findInteraction(from, to, message) {
        for (const [name, interaction] of this.interactions) {
            if (interaction.participants.includes(from) && 
                interaction.participants.includes(to)) {
                return interaction;
            }
        }
        return null;
    }
    
    // 记录交互历史
    logInteraction(from, to, message, data) {
        if (!this.history) this.history = [];
        
        this.history.push({
            from,
            to,
            message,
            data: JSON.parse(JSON.stringify(data)),
            timestamp: Date.now()
        });
        
        // 限制历史记录大小
        if (this.history.length > 1000) {
            this.history = this.history.slice(-500);
        }
    }
    
    generateRequestId() {
        return `req_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
    }
}

// 使用示例：购物车系统
const mediator = new ComponentMediator();

// 定义交互规则
mediator.defineInteraction('shopping', {
    participants: ['productList', 'cart', 'checkout'],
    validators: [
        (from, to, message, data) => {
            // 验证商品数据
            if (message === 'add:product') {
                return data.product && data.product.id && data.product.price > 0;
            }
            return true;
        }
    ],
    transformers: {
        'add:product': (data) => ({
            ...data,
            addedAt: Date.now()
        })
    }
});

// 组件实现
class ProductListComponent {
    handleProductClick(product) {
        this.mediator.send('cart', 'add:product', { product });
    }
}

class CartComponent {
    constructor() {
        this.items = [];
    }
    
    handleMessage(message, data, from) {
        switch (message) {
            case 'add:product':
                this.addProduct(data.product);
                // 通知其他组件
                this.mediator.broadcast('cart:updated', {
                    itemCount: this.items.length,
                    total: this.calculateTotal()
                });
                break;
        }
    }
}
```

### 2. 数据流管理器（Data Flow Manager）

创建一个专门管理数据流的系统：

```javascript
class DataFlowManager {
    constructor() {
        this.flows = new Map();
        this.subscriptions = new Map();
        this.middleware = [];
    }
    
    // 定义数据流
    defineFlow(name, config) {
        const flow = {
            name,
            source: config.source,
            targets: config.targets || [],
            transform: config.transform || (data => data),
            filter: config.filter || (() => true),
            merge: config.merge || ((prev, next) => next),
            debounce: config.debounce || 0,
            throttle: config.throttle || 0,
            cache: config.cache || false,
            queue: [],
            processing: false
        };
        
        this.flows.set(name, flow);
        
        // 设置定时器
        if (flow.debounce > 0) {
            flow.debounceTimer = null;
        }
        if (flow.throttle > 0) {
            flow.throttleTimer = null;
        }
        
        return this;
    }
    
    // 发送数据
    async send(flowName, data, context = {}) {
        const flow = this.flows.get(flowName);
        if (!flow) {
            throw new Error(`Flow ${flowName} not defined`);
        }
        
        // 应用中间件
        let processedData = data;
        for (const middleware of this.middleware) {
            processedData = await middleware(processedData, flow, context);
        }
        
        // 应用过滤器
        if (!flow.filter(processedData, context)) {
            return;
        }
        
        // 处理防抖
        if (flow.debounce > 0) {
            clearTimeout(flow.debounceTimer);
            flow.debounceTimer = setTimeout(() => {
                this.processFlow(flow, processedData, context);
            }, flow.debounce);
            return;
        }
        
        // 处理节流
        if (flow.throttle > 0) {
            if (flow.throttleTimer) return;
            
            flow.throttleTimer = setTimeout(() => {
                flow.throttleTimer = null;
            }, flow.throttle);
        }
        
        // 加入队列
        flow.queue.push({ data: processedData, context });
        
        // 处理队列
        if (!flow.processing) {
            this.processQueue(flow);
        }
    }
    
    // 处理队列
    async processQueue(flow) {
        flow.processing = true;
        
        while (flow.queue.length > 0) {
            const batch = flow.queue.splice(0, 10); // 批处理
            
            for (const item of batch) {
                await this.processFlow(flow, item.data, item.context);
            }
        }
        
        flow.processing = false;
    }
    
    // 处理数据流
    async processFlow(flow, data, context) {
        try {
            // 应用转换
            const transformedData = await flow.transform(data, context);
            
            // 缓存处理
            if (flow.cache) {
                const cacheKey = this.getCacheKey(flow, transformedData);
                if (flow.lastCache && flow.lastCache.key === cacheKey) {
                    return; // 跳过相同的数据
                }
                flow.lastCache = { key: cacheKey, data: transformedData };
            }
            
            // 分发到目标
            for (const target of flow.targets) {
                const subscribers = this.subscriptions.get(target) || [];
                
                for (const subscriber of subscribers) {
                    try {
                        await subscriber.handler(transformedData, {
                            ...context,
                            flow: flow.name,
                            source: flow.source
                        });
                    } catch (error) {
                        console.error(`Error in subscriber:`, error);
                        
                        if (subscriber.errorHandler) {
                            subscriber.errorHandler(error, transformedData);
                        }
                    }
                }
            }
            
        } catch (error) {
            console.error(`Error in flow ${flow.name}:`, error);
            throw error;
        }
    }
    
    // 订阅数据流
    subscribe(target, handler, options = {}) {
        if (!this.subscriptions.has(target)) {
            this.subscriptions.set(target, []);
        }
        
        const subscription = {
            handler,
            errorHandler: options.errorHandler,
            priority: options.priority || 0
        };
        
        const subscribers = this.subscriptions.get(target);
        subscribers.push(subscription);
        
        // 按优先级排序
        subscribers.sort((a, b) => b.priority - a.priority);
        
        // 返回取消订阅函数
        return () => {
            const index = subscribers.indexOf(subscription);
            if (index > -1) {
                subscribers.splice(index, 1);
            }
        };
    }
    
    // 添加中间件
    use(middleware) {
        this.middleware.push(middleware);
        return this;
    }
    
    // 获取缓存键
    getCacheKey(flow, data) {
        return JSON.stringify(data);
    }
}

// 使用示例：表单联动系统
const dataFlow = new DataFlowManager();

// 定义数据流
dataFlow.defineFlow('formUpdate', {
    source: 'form',
    targets: ['validation', 'preview', 'autoSave'],
    transform: (data) => ({
        ...data,
        timestamp: Date.now()
    }),
    debounce: 300,
    cache: true
});

dataFlow.defineFlow('validationResult', {
    source: 'validation',
    targets: ['form', 'submitButton'],
    transform: (errors) => ({
        hasErrors: errors.length > 0,
        errors: errors
    })
});

// 添加中间件
dataFlow.use(async (data, flow, context) => {
    console.log(`Flow ${flow.name}: `, data);
    return data;
});

// 组件订阅
class FormComponent {
    constructor() {
        dataFlow.subscribe('form', (data) => {
            if (data.hasErrors) {
                this.showErrors(data.errors);
            }
        });
    }
    
    onInputChange(field, value) {
        dataFlow.send('formUpdate', {
            field,
            value,
            allValues: this.getFormValues()
        });
    }
}
```

### 3. 状态同步器（State Synchronizer）

处理多个组件间的状态同步：

```javascript
class StateSynchronizer {
    constructor() {
        this.stores = new Map();
        this.syncRules = new Map();
        this.conflicts = [];
        this.version = 0;
    }
    
    // 创建状态存储
    createStore(id, initialState = {}) {
        const store = {
            id,
            state: initialState,
            version: 0,
            history: [],
            locks: new Set()
        };
        
        this.stores.set(id, store);
        
        return {
            getState: () => this.getState(id),
            setState: (updates) => this.setState(id, updates),
            subscribe: (handler) => this.subscribe(id, handler),
            lock: (key) => this.lock(id, key),
            unlock: (key) => this.unlock(id, key)
        };
    }
    
    // 定义同步规则
    defineSyncRule(rule) {
        const syncRule = {
            id: rule.id,
            sources: rule.sources,
            target: rule.target,
            mapping: rule.mapping || ((states) => Object.assign({}, ...states)),
            conflict: rule.conflict || 'last-write-wins',
            condition: rule.condition || (() => true),
            transform: rule.transform || (data => data)
        };
        
        this.syncRules.set(rule.id, syncRule);
        
        // 监听源变化
        rule.sources.forEach(source => {
            this.subscribe(source, () => {
                this.applySyncRule(syncRule);
            });
        });
    }
    
    // 应用同步规则
    async applySyncRule(rule) {
        // 检查条件
        const states = rule.sources.map(id => this.getState(id));
        if (!rule.condition(states)) {
            return;
        }
        
        // 收集源状态
        const sourceStates = {};
        rule.sources.forEach(id => {
            sourceStates[id] = this.getState(id);
        });
        
        // 应用映射
        let targetState = rule.mapping(sourceStates);
        
        // 应用转换
        targetState = await rule.transform(targetState);
        
        // 检测冲突
        const conflicts = this.detectConflicts(rule.target, targetState);
        if (conflicts.length > 0) {
            targetState = this.resolveConflicts(conflicts, rule.conflict, targetState);
        }
        
        // 更新目标状态
        this.setState(rule.target, targetState, {
            source: 'sync',
            rule: rule.id
        });
    }
    
    // 设置状态
    setState(id, updates, metadata = {}) {
        const store = this.stores.get(id);
        if (!store) {
            throw new Error(`Store ${id} not found`);
        }
        
        // 检查锁
        const lockedKeys = Object.keys(updates).filter(key => store.locks.has(key));
        if (lockedKeys.length > 0) {
            throw new Error(`Keys are locked: ${lockedKeys.join(', ')}`);
        }
        
        // 创建新状态
        const oldState = store.state;
        const newState = this.mergeState(oldState, updates);
        
        // 更新版本
        store.version++;
        this.version++;
        
        // 保存历史
        store.history.push({
            version: store.version,
            globalVersion: this.version,
            oldState,
            newState,
            updates,
            metadata,
            timestamp: Date.now()
        });
        
        // 限制历史大小
        if (store.history.length > 100) {
            store.history = store.history.slice(-50);
        }
        
        // 更新状态
        store.state = newState;
        
        // 通知订阅者
        this.notifySubscribers(id, newState, oldState, updates);
    }
    
    // 合并状态
    mergeState(oldState, updates) {
        const newState = { ...oldState };
        
        Object.entries(updates).forEach(([key, value]) => {
            if (value === undefined) {
                delete newState[key];
            } else if (typeof value === 'object' && !Array.isArray(value) && value !== null) {
                newState[key] = this.mergeState(oldState[key] || {}, value);
            } else {
                newState[key] = value;
            }
        });
        
        return newState;
    }
    
    // 检测冲突
    detectConflicts(targetId, newState) {
        const store = this.stores.get(targetId);
        if (!store) return [];
        
        const conflicts = [];
        const lastUpdate = store.history[store.history.length - 1];
        
        if (lastUpdate && Date.now() - lastUpdate.timestamp < 100) {
            // 检测快速连续更新
            Object.keys(newState).forEach(key => {
                if (lastUpdate.updates[key] !== undefined) {
                    conflicts.push({
                        key,
                        currentValue: store.state[key],
                        newValue: newState[key],
                        lastUpdate: lastUpdate.updates[key]
                    });
                }
            });
        }
        
        return conflicts;
    }
    
    // 解决冲突
    resolveConflicts(conflicts, strategy, newState) {
        const resolved = { ...newState };
        
        conflicts.forEach(conflict => {
            switch (strategy) {
                case 'last-write-wins':
                    // 使用新值
                    resolved[conflict.key] = conflict.newValue;
                    break;
                    
                case 'merge':
                    // 尝试合并
                    if (typeof conflict.currentValue === 'object' && 
                        typeof conflict.newValue === 'object') {
                        resolved[conflict.key] = {
                            ...conflict.currentValue,
                            ...conflict.newValue
                        };
                    } else if (typeof conflict.currentValue === 'number' && 
                               typeof conflict.newValue === 'number') {
                        // 数值相加
                        resolved[conflict.key] = conflict.currentValue + conflict.newValue;
                    } else {
                        resolved[conflict.key] = conflict.newValue;
                    }
                    break;
                    
                case 'keep-first':
                    // 保留当前值
                    resolved[conflict.key] = conflict.currentValue;
                    break;
                    
                default:
                    // 自定义策略
                    if (typeof strategy === 'function') {
                        resolved[conflict.key] = strategy(conflict);
                    }
            }
        });
        
        // 记录冲突
        this.conflicts.push({
            timestamp: Date.now(),
            conflicts,
            strategy,
            resolved
        });
        
        return resolved;
    }
    
    // 时间旅行
    timeTravel(id, version) {
        const store = this.stores.get(id);
        if (!store) return null;
        
        const historyItem = store.history.find(h => h.version === version);
        if (!historyItem) return null;
        
        // 恢复到指定版本
        store.state = historyItem.newState;
        store.version = version;
        
        // 通知订阅者
        this.notifySubscribers(id, historyItem.newState, null, {});
        
        return historyItem.newState;
    }
    
    // 订阅相关
    subscribe(id, handler) {
        if (!this.subscribers) {
            this.subscribers = new Map();
        }
        
        if (!this.subscribers.has(id)) {
            this.subscribers.set(id, []);
        }
        
        this.subscribers.get(id).push(handler);
        
        return () => {
            const subscribers = this.subscribers.get(id);
            const index = subscribers.indexOf(handler);
            if (index > -1) {
                subscribers.splice(index, 1);
            }
        };
    }
    
    notifySubscribers(id, newState, oldState, updates) {
        const subscribers = this.subscribers?.get(id) || [];
        
        subscribers.forEach(handler => {
            try {
                handler(newState, oldState, updates);
            } catch (error) {
                console.error('Subscriber error:', error);
            }
        });
    }
}

// 使用示例：多组件表单同步
const synchronizer = new StateSynchronizer();

// 创建状态存储
const formStore = synchronizer.createStore('form', {
    name: '',
    email: '',
    age: 0
});

const validationStore = synchronizer.createStore('validation', {
    errors: {},
    isValid: true
});

const previewStore = synchronizer.createStore('preview', {
    displayName: '',
    summary: ''
});

// 定义同步规则
synchronizer.defineSyncRule({
    id: 'form-to-validation',
    sources: ['form'],
    target: 'validation',
    mapping: (states) => {
        const form = states.form;
        const errors = {};
        
        if (!form.name) errors.name = '姓名不能为空';
        if (!form.email || !form.email.includes('@')) errors.email = '邮箱格式不正确';
        if (form.age < 0 || form.age > 150) errors.age = '年龄不合法';
        
        return {
            errors,
            isValid: Object.keys(errors).length === 0
        };
    }
});

synchronizer.defineSyncRule({
    id: 'form-to-preview',
    sources: ['form'],
    target: 'preview',
    mapping: (states) => {
        const form = states.form;
        return {
            displayName: form.name || '未填写',
            summary: `${form.name}, ${form.age}岁, ${form.email}`
        };
    },
    condition: (states) => states.form.name !== ''
});
```

## 三、复杂交互场景处理

### 1. 主从组件协同

处理主组件控制多个从组件的场景：

```javascript
class MasterSlaveCoordinator {
    constructor() {
        this.master = null;
        this.slaves = new Map();
        this.commands = new Map();
    }
    
    // 注册主组件
    registerMaster(component) {
        this.master = component;
        
        // 注入控制方法
        component.control = {
            broadcast: (command, data) => this.broadcastCommand(command, data),
            execute: (slaveId, command, data) => this.executeCommand(slaveId, command, data),
            query: (slaveId, query) => this.querySlaveState(slaveId, query),
            coordinate: (task) => this.coordinateTask(task)
        };
    }
    
    // 注册从组件
    registerSlave(id, component) {
        const slave = {
            id,
            component,
            state: 'idle',
            capabilities: component.capabilities || [],
            queue: []
        };
        
        this.slaves.set(id, slave);
        
        // 注入响应方法
        component.slave = {
            reportState: (state) => this.updateSlaveState(id, state),
            requestPermission: (action) => this.requestPermission(id, action),
            notifyComplete: (taskId) => this.notifyTaskComplete(id, taskId)
        };
    }
    
    // 定义命令
    defineCommand(name, config) {
        this.commands.set(name, {
            name,
            validate: config.validate || (() => true),
            prepare: config.prepare || (data => data),
            execute: config.execute,
            rollback: config.rollback || (() => {}),
            timeout: config.timeout || 5000
        });
    }
    
    // 广播命令
    async broadcastCommand(commandName, data) {
        const command = this.commands.get(commandName);
        if (!command) {
            throw new Error(`Command ${commandName} not defined`);
        }
        
        // 验证命令
        if (!command.validate(data)) {
            throw new Error(`Invalid command data`);
        }
        
        // 准备数据
        const preparedData = await command.prepare(data);
        
        // 执行命令
        const results = new Map();
        const promises = [];
        
        this.slaves.forEach((slave, id) => {
            if (slave.state === 'idle' && this.canExecute(slave, commandName)) {
                promises.push(
                    this.executeOnSlave(slave, command, preparedData)
                        .then(result => results.set(id, { success: true, result }))
                        .catch(error => results.set(id, { success: false, error }))
                );
            }
        });
        
        await Promise.all(promises);
        return results;
    }
    
    // 协调任务
    async coordinateTask(task) {
        const steps = task.steps || [];
        const context = { results: [] };
        
        for (const step of steps) {
            try {
                const result = await this.executeStep(step, context);
                context.results.push({
                    step: step.name,
                    success: true,
                    result
                });
                
                if (step.onSuccess) {
                    await step.onSuccess(result, context);
                }
                
            } catch (error) {
                context.results.push({
                    step: step.name,
                    success: false,
                    error
                });
                
                if (step.onError) {
                    const shouldContinue = await step.onError(error, context);
                    if (!shouldContinue) {
                        break;
                    }
                } else {
                    break;
                }
            }
        }
        
        return context;
    }
    
    // 执行步骤
    async executeStep(step, context) {
        const targetSlaves = this.selectSlaves(step.target);
        
        if (step.parallel) {
            // 并行执行
            const promises = targetSlaves.map(slave => 
                this.executeCommand(slave.id, step.command, step.data(context))
            );
            
            return Promise.all(promises);
        } else {
            // 串行执行
            const results = [];
            
            for (const slave of targetSlaves) {
                const result = await this.executeCommand(
                    slave.id, 
                    step.command, 
                    step.data(context)
                );
                results.push(result);
            }
            
            return results;
        }
    }
    
    // 选择从组件
    selectSlaves(target) {
        if (typeof target === 'function') {
            return Array.from(this.slaves.values()).filter(target);
        } else if (Array.isArray(target)) {
            return target.map(id => this.slaves.get(id)).filter(Boolean);
        } else if (typeof target === 'string') {
            const slave = this.slaves.get(target);
            return slave ? [slave] : [];
        } else {
            return Array.from(this.slaves.values());
        }
    }
}

// 使用示例：多图表联动系统
const coordinator = new MasterSlaveCoordinator();

// 主控制组件
class DashboardController {
    constructor() {
        coordinator.registerMaster(this);
    }
    
    async updateTimeRange(range) {
        // 广播时间范围更新
        const results = await this.control.broadcast('updateTimeRange', range);
        
        // 检查结果
        results.forEach((result, slaveId) => {
            if (!result.success) {
                console.error(`Chart ${slaveId} update failed:`, result.error);
            }
        });
    }
    
    async exportAllCharts() {
        // 协调导出任务
        const task = {
            steps: [
                {
                    name: 'prepare',
                    target: (slave) => slave.capabilities.includes('export'),
                    command: 'prepareExport',
                    data: () => ({ format: 'png' }),
                    parallel: true
                },
                {
                    name: 'render',
                    target: (slave) => slave.capabilities.includes('export'),
                    command: 'renderChart',
                    data: (context) => ({ 
                        quality: 'high',
                        prepared: context.results[0].result 
                    }),
                    parallel: false
                },
                {
                    name: 'collect',
                    target: 'master',
                    command: 'collectExports',
                    data: (context) => ({
                        charts: context.results[1].result
                    })
                }
            ]
        };
        
        const result = await this.control.coordinate(task);
        return result;
    }
}

// 从组件：图表
class ChartComponent {
    constructor(id, type) {
        this.capabilities = ['update', 'export', 'zoom'];
        coordinator.registerSlave(id, this);
    }
    
    async handleCommand(command, data) {
        switch (command) {
            case 'updateTimeRange':
                await this.updateData(data);
                this.slave.reportState('updated');
                break;
                
            case 'prepareExport':
                const prepared = await this.prepareForExport(data.format);
                return prepared;
                
            case 'renderChart':
                const rendered = await this.render(data);
                return rendered;
        }
    }
}
```

### 2. 事务性操作

确保多个组件的操作要么全部成功，要么全部失败：

```javascript
class TransactionManager {
    constructor() {
        this.transactions = new Map();
        this.participants = new Map();
    }
    
    // 开始事务
    async beginTransaction(id, options = {}) {
        const transaction = {
            id,
            state: 'active',
            participants: new Set(),
            operations: [],
            rollbacks: [],
            timeout: options.timeout || 30000,
            startTime: Date.now(),
            context: {}
        };
        
        this.transactions.set(id, transaction);
        
        // 设置超时
        transaction.timeoutHandle = setTimeout(() => {
            this.rollbackTransaction(id, new Error('Transaction timeout'));
        }, transaction.timeout);
        
        return {
            id,
            addOperation: (operation) => this.addOperation(id, operation),
            commit: () => this.commitTransaction(id),
            rollback: (reason) => this.rollbackTransaction(id, reason)
        };
    }
    
    // 添加操作
    addOperation(transactionId, operation) {
        const transaction = this.transactions.get(transactionId);
        if (!transaction || transaction.state !== 'active') {
            throw new Error('Transaction not active');
        }
        
        const op = {
            id: `${transactionId}_op_${transaction.operations.length}`,
            component: operation.component,
            execute: operation.execute,
            rollback: operation.rollback,
            validate: operation.validate || (() => true),
            state: 'pending'
        };
        
        transaction.operations.push(op);
        transaction.participants.add(operation.component);
        
        return op.id;
    }
    
    // 提交事务
    async commitTransaction(id) {
        const transaction = this.transactions.get(id);
        if (!transaction || transaction.state !== 'active') {
            throw new Error('Transaction not active');
        }
        
        transaction.state = 'committing';
        
        try {
            // 验证所有操作
            for (const op of transaction.operations) {
                if (!await op.validate(transaction.context)) {
                    throw new Error(`Validation failed for operation ${op.id}`);
                }
            }
            
            // 执行所有操作
            for (const op of transaction.operations) {
                try {
                    op.state = 'executing';
                    const result = await op.execute(transaction.context);
                    op.state = 'completed';
                    op.result = result;
                    
                    // 保存回滚信息
                    if (op.rollback) {
                        transaction.rollbacks.push({
                            operation: op,
                            data: result
                        });
                    }
                    
                } catch (error) {
                    op.state = 'failed';
                    op.error = error;
                    throw error;
                }
            }
            
            // 事务成功
            transaction.state = 'committed';
            clearTimeout(transaction.timeoutHandle);
            
            // 通知参与者
            this.notifyParticipants(transaction, 'committed');
            
            return {
                success: true,
                results: transaction.operations.map(op => op.result)
            };
            
        } catch (error) {
            // 回滚事务
            await this.rollbackTransaction(id, error);
            throw error;
        }
    }
    
    // 回滚事务
    async rollbackTransaction(id, reason) {
        const transaction = this.transactions.get(id);
        if (!transaction) return;
        
        transaction.state = 'rolling-back';
        clearTimeout(transaction.timeoutHandle);
        
        // 反向执行回滚操作
        for (let i = transaction.rollbacks.length - 1; i >= 0; i--) {
            const { operation, data } = transaction.rollbacks[i];
            
            try {
                await operation.rollback(data, transaction.context);
            } catch (error) {
                console.error(`Rollback failed for operation ${operation.id}:`, error);
            }
        }
        
        transaction.state = 'rolled-back';
        transaction.rollbackReason = reason;
        
        // 通知参与者
        this.notifyParticipants(transaction, 'rolled-back', reason);
        
        return {
            success: false,
            reason: reason.message || reason
        };
    }
    
    // 通知参与者
    notifyParticipants(transaction, event, data) {
        transaction.participants.forEach(component => {
            if (component.onTransactionEvent) {
                component.onTransactionEvent(transaction.id, event, data);
            }
        });
    }
}

// 使用示例：购物下单流程
async function processOrder(orderData) {
    const tm = new TransactionManager();
    const transaction = await tm.beginTransaction('order_' + Date.now());
    
    try {
        // 扣减库存
        transaction.addOperation({
            component: inventoryComponent,
            execute: async (context) => {
                const result = await inventoryComponent.decreaseStock(orderData.items);
                context.stockReservation = result.reservationId;
                return result;
            },
            rollback: async (result, context) => {
                await inventoryComponent.releaseStock(result.reservationId);
            },
            validate: async () => {
                return await inventoryComponent.checkStock(orderData.items);
            }
        });
        
        // 创建订单
        transaction.addOperation({
            component: orderComponent,
            execute: async (context) => {
                const order = await orderComponent.createOrder({
                    ...orderData,
                    stockReservation: context.stockReservation
                });
                context.orderId = order.id;
                return order;
            },
            rollback: async (order) => {
                await orderComponent.cancelOrder(order.id);
            }
        });
        
        // 扣款
        transaction.addOperation({
            component: paymentComponent,
            execute: async (context) => {
                const payment = await paymentComponent.processPayment({
                    orderId: context.orderId,
                    amount: orderData.totalAmount,
                    method: orderData.paymentMethod
                });
                return payment;
            },
            rollback: async (payment) => {
                await paymentComponent.refund(payment.id);
            },
            validate: async () => {
                return await paymentComponent.validatePaymentMethod(orderData.paymentMethod);
            }
        });
        
        // 提交事务
        const result = await transaction.commit();
        console.log('Order processed successfully:', result);
        
        return result;
        
    } catch (error) {
        console.error('Order processing failed:', error);
        throw error;
    }
}
```

### 3. 分布式状态管理

处理跨设备或跨会话的状态同步：

```javascript
class DistributedStateManager {
    constructor(options = {}) {
        this.nodeId = options.nodeId || this.generateNodeId();
        this.peers = new Map();
        this.state = {};
        this.vector = new Map(); // 向量时钟
        this.operations = []; // 操作日志
        this.conflictResolver = options.conflictResolver || this.defaultConflictResolver;
    }
    
    // 生成节点ID
    generateNodeId() {
        return `node_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
    }
    
    // 连接到对等节点
    connectPeer(peerId, connection) {
        this.peers.set(peerId, {
            id: peerId,
            connection,
            vector: new Map(),
            lastSeen: Date.now()
        });
        
        // 同步初始状态
        this.syncWithPeer(peerId);
    }
    
    // 更新本地状态
    updateState(path, value, metadata = {}) {
        // 增加向量时钟
        this.incrementVector(this.nodeId);
        
        // 创建操作
        const operation = {
            id: this.generateOperationId(),
            type: 'update',
            path,
            value,
            nodeId: this.nodeId,
            vector: new Map(this.vector),
            timestamp: Date.now(),
            metadata
        };
        
        // 应用操作
        this.applyOperation(operation);
        
        // 广播给其他节点
        this.broadcastOperation(operation);
    }
    
    // 应用操作
    applyOperation(operation) {
        // 检查是否已经应用过
        if (this.operations.find(op => op.id === operation.id)) {
            return;
        }
        
        // 检查因果关系
        if (!this.checkCausality(operation)) {
            // 延迟应用
            this.deferOperation(operation);
            return;
        }
        
        // 检测冲突
        const conflicts = this.detectConflicts(operation);
        if (conflicts.length > 0) {
            // 解决冲突
            const resolved = this.conflictResolver(operation, conflicts, this.state);
            if (!resolved) return;
            
            operation = resolved;
        }
        
        // 应用到状态
        this.applyToState(operation);
        
        // 更新向量时钟
        this.mergeVector(operation.vector);
        
        // 保存操作日志
        this.operations.push(operation);
        
        // 触发状态变化事件
        this.onStateChange(operation.path, operation.value, operation);
        
        // 检查延迟的操作
        this.checkDeferredOperations();
    }
    
    // 检查因果关系
    checkCausality(operation) {
        for (const [nodeId, clock] of operation.vector) {
            if (nodeId === operation.nodeId) continue;
            
            const localClock = this.vector.get(nodeId) || 0;
            if (clock > localClock + 1) {
                return false; // 缺少前置操作
            }
        }
        
        return true;
    }
    
    // 检测冲突
    detectConflicts(operation) {
        const conflicts = [];
        
        // 查找并发操作
        for (const existingOp of this.operations) {
            if (existingOp.path === operation.path && 
                this.areConcurrent(existingOp, operation)) {
                conflicts.push(existingOp);
            }
        }
        
        return conflicts;
    }
    
    // 判断是否并发
    areConcurrent(op1, op2) {
        const v1 = op1.vector;
        const v2 = op2.vector;
        
        // 检查是否有因果关系
        let v1BeforeV2 = true;
        let v2BeforeV1 = true;
        
        for (const [nodeId, clock1] of v1) {
            const clock2 = v2.get(nodeId) || 0;
            if (clock1 > clock2) v2BeforeV1 = false;
            if (clock1 < clock2) v1BeforeV2 = false;
        }
        
        for (const [nodeId, clock2] of v2) {
            if (!v1.has(nodeId) && clock2 > 0) {
                v1BeforeV2 = false;
            }
        }
        
        // 如果都不在对方之前，则是并发的
        return !v1BeforeV2 && !v2BeforeV1;
    }
    
    // 默认冲突解决器
    defaultConflictResolver(newOp, conflicts, currentState) {
        // Last-Write-Wins with timestamp
        const allOps = [...conflicts, newOp];
        const latestOp = allOps.reduce((latest, op) => 
            op.timestamp > latest.timestamp ? op : latest
        );
        
        return latestOp;
    }
    
    // CRDT 数据类型
    createCRDT(type) {
        switch (type) {
            case 'counter':
                return new CRDTCounter(this);
                
            case 'set':
                return new CRDTSet(this);
                
            case 'map':
                return new CRDTMap(this);
                
            default:
                throw new Error(`Unknown CRDT type: ${type}`);
        }
    }
}

// CRDT 计数器
class CRDTCounter {
    constructor(stateManager) {
        this.stateManager = stateManager;
        this.increments = new Map();
        this.decrements = new Map();
    }
    
    increment(amount = 1) {
        const nodeId = this.stateManager.nodeId;
        const current = this.increments.get(nodeId) || 0;
        this.increments.set(nodeId, current + amount);
        
        this.stateManager.updateState('counter', {
            type: 'counter',
            increments: Array.from(this.increments),
            decrements: Array.from(this.decrements)
        });
    }
    
    decrement(amount = 1) {
        const nodeId = this.stateManager.nodeId;
        const current = this.decrements.get(nodeId) || 0;
        this.decrements.set(nodeId, current + amount);
        
        this.stateManager.updateState('counter', {
            type: 'counter',
            increments: Array.from(this.increments),
            decrements: Array.from(this.decrements)
        });
    }
    
    getValue() {
        let total = 0;
        
        for (const [_, value] of this.increments) {
            total += value;
        }
        
        for (const [_, value] of this.decrements) {
            total -= value;
        }
        
        return total;
    }
    
    merge(other) {
        // 合并增量
        for (const [nodeId, value] of other.increments) {
            const current = this.increments.get(nodeId) || 0;
            this.increments.set(nodeId, Math.max(current, value));
        }
        
        // 合并减量
        for (const [nodeId, value] of other.decrements) {
            const current = this.decrements.get(nodeId) || 0;
            this.decrements.set(nodeId, Math.max(current, value));
        }
    }
}

// 使用示例：协作编辑器
class CollaborativeEditor {
    constructor() {
        this.dsm = new DistributedStateManager({
            nodeId: $device.info.name,
            conflictResolver: this.resolveEditConflict.bind(this)
        });
        
        this.setupWebSocket();
    }
    
    setupWebSocket() {
        this.ws = new WebSocket('wss://collab.example.com');
        
        this.ws.onmessage = (event) => {
            const { type, data } = JSON.parse(event.data);
            
            switch (type) {
                case 'operation':
                    this.dsm.applyOperation(data);
                    break;
                    
                case 'sync':
                    this.handleSync(data);
                    break;
            }
        };
        
        // 监听本地操作
        this.dsm.onBroadcast = (operation) => {
            this.ws.send(JSON.stringify({
                type: 'operation',
                data: operation
            }));
        };
    }
    
    insertText(position, text) {
        this.dsm.updateState('document', {
            type: 'insert',
            position,
            text,
            length: text.length
        });
    }
    
    deleteText(position, length) {
        this.dsm.updateState('document', {
            type: 'delete',
            position,
            length
        });
    }
    
    resolveEditConflict(newOp, conflicts, currentState) {
        // 操作转换算法
        let transformedOp = { ...newOp };
        
        for (const conflict of conflicts) {
            if (conflict.value.type === 'insert' && newOp.value.type === 'insert') {
                if (conflict.value.position <= newOp.value.position) {
                    transformedOp.value.position += conflict.value.length;
                }
            } else if (conflict.value.type === 'delete' && newOp.value.type === 'insert') {
                if (conflict.value.position < newOp.value.position) {
                    transformedOp.value.position -= conflict.value.length;
                }
            }
            // 更多转换规则...
        }
        
        return transformedOp;
    }
}
```

## 四、性能优化策略

### 1. 批处理和调度

优化大量组件更新的性能：

```javascript
class BatchScheduler {
    constructor() {
        this.queues = new Map();
        this.processors = new Map();
        this.running = false;
    }
    
    // 注册处理器
    registerProcessor(type, processor) {
        this.processors.set(type, {
            process: processor.process,
            batchSize: processor.batchSize || 10,
            priority: processor.priority || 0,
            delay: processor.delay || 0
        });
    }
    
    // 添加任务
    schedule(type, task) {
        if (!this.queues.has(type)) {
            this.queues.set(type, []);
        }
        
        this.queues.get(type).push({
            task,
            timestamp: Date.now()
        });
        
        if (!this.running) {
            this.startProcessing();
        }
    }
    
    // 开始处理
    async startProcessing() {
        this.running = true;
        
        while (this.hasWork()) {
            // 按优先级排序队列
            const sortedTypes = Array.from(this.processors.keys()).sort((a, b) => {
                const procA = this.processors.get(a);
                const procB = this.processors.get(b);
                return procB.priority - procA.priority;
            });
            
            for (const type of sortedTypes) {
                await this.processQueue(type);
            }
            
            // 短暂休息，让出CPU
            await new Promise(resolve => setTimeout(resolve, 0));
        }
        
        this.running = false;
    }
    
    // 处理队列
    async processQueue(type) {
        const queue = this.queues.get(type);
        if (!queue || queue.length === 0) return;
        
        const processor = this.processors.get(type);
        const batch = queue.splice(0, processor.batchSize);
        
        if (processor.delay > 0) {
            await new Promise(resolve => setTimeout(resolve, processor.delay));
        }
        
        try {
            await processor.process(batch.map(item => item.task));
        } catch (error) {
            console.error(`Batch processing error for ${type}:`, error);
            
            // 重新加入队列末尾
            queue.push(...batch);
        }
    }
    
    hasWork() {
        for (const queue of this.queues.values()) {
            if (queue.length > 0) return true;
        }
        return false;
    }
}

// 使用示例
const scheduler = new BatchScheduler();

// 注册UI更新处理器
scheduler.registerProcessor('ui-update', {
    process: async (updates) => {
        $ui.animate({
            duration: 0.3,
            animation: () => {
                updates.forEach(update => {
                    update.apply();
                });
            }
        });
    },
    batchSize: 20,
    priority: 10,
    delay: 16 // 约60fps
});

// 注册数据同步处理器
scheduler.registerProcessor('data-sync', {
    process: async (syncs) => {
        const grouped = syncs.reduce((acc, sync) => {
            if (!acc[sync.target]) acc[sync.target] = [];
            acc[sync.target].push(sync.data);
            return acc;
        }, {});
        
        for (const [target, dataList] of Object.entries(grouped)) {
            await syncToTarget(target, dataList);
        }
    },
    batchSize: 50,
    priority: 5
});
```

### 2. 缓存和记忆化

减少重复计算和请求：

```javascript
class SmartCache {
    constructor(options = {}) {
        this.cache = new Map();
        this.maxSize = options.maxSize || 100;
        this.ttl = options.ttl || 60000; // 默认60秒
        this.strategy = options.strategy || 'lru'; // lru, lfu, fifo
        this.stats = {
            hits: 0,
            misses: 0,
            evictions: 0
        };
    }
    
    // 获取或计算
    async getOrCompute(key, computeFn, options = {}) {
        const cached = this.get(key);
        
        if (cached !== undefined) {
            this.stats.hits++;
            return cached;
        }
        
        this.stats.misses++;
        
        // 防止并发计算
        if (this.computing && this.computing.has(key)) {
            return this.computing.get(key);
        }
        
        if (!this.computing) {
            this.computing = new Map();
        }
        
        const promise = computeFn().then(result => {
            this.set(key, result, options);
            this.computing.delete(key);
            return result;
        }).catch(error => {
            this.computing.delete(key);
            throw error;
        });
        
        this.computing.set(key, promise);
        return promise;
    }
    
    // 设置缓存
    set(key, value, options = {}) {
        const ttl = options.ttl || this.ttl;
        const priority = options.priority || 0;
        
        // 检查大小限制
        if (this.cache.size >= this.maxSize && !this.cache.has(key)) {
            this.evict();
        }
        
        this.cache.set(key, {
            value,
            expires: Date.now() + ttl,
            accessCount: 0,
            lastAccess: Date.now(),
            priority
        });
    }
    
    // 获取缓存
    get(key) {
        const item = this.cache.get(key);
        
        if (!item) return undefined;
        
        // 检查过期
        if (Date.now() > item.expires) {
            this.cache.delete(key);
            return undefined;
        }
        
        // 更新访问信息
        item.accessCount++;
        item.lastAccess = Date.now();
        
        return item.value;
    }
    
    // 驱逐策略
    evict() {
        let keyToEvict;
        
        switch (this.strategy) {
            case 'lru':
                keyToEvict = this.findLRU();
                break;
                
            case 'lfu':
                keyToEvict = this.findLFU();
                break;
                
            case 'fifo':
                keyToEvict = this.cache.keys().next().value;
                break;
        }
        
        if (keyToEvict) {
            this.cache.delete(keyToEvict);
            this.stats.evictions++;
        }
    }
    
    findLRU() {
        let oldest = null;
        let oldestTime = Infinity;
        
        for (const [key, item] of this.cache) {
            if (item.lastAccess < oldestTime && item.priority === 0) {
                oldest = key;
                oldestTime = item.lastAccess;
            }
        }
        
        return oldest;
    }
    
    findLFU() {
        let leastUsed = null;
        let minCount = Infinity;
        
        for (const [key, item] of this.cache) {
            if (item.accessCount < minCount && item.priority === 0) {
                leastUsed = key;
                minCount = item.accessCount;
            }
        }
        
        return leastUsed;
    }
    
    // 清理过期项
    cleanup() {
        const now = Date.now();
        
        for (const [key, item] of this.cache) {
            if (now > item.expires) {
                this.cache.delete(key);
            }
        }
    }
    
    // 获取统计信息
    getStats() {
        const hitRate = this.stats.hits / (this.stats.hits + this.stats.misses) || 0;
        
        return {
            ...this.stats,
            hitRate: hitRate.toFixed(2),
            size: this.cache.size,
            maxSize: this.maxSize
        };
    }
}

// 记忆化装饰器
function memoize(fn, options = {}) {
    const cache = new SmartCache(options);
    
    return async function(...args) {
        const key = JSON.stringify(args);
        return cache.getOrCompute(key, () => fn.apply(this, args));
    };
}

// 使用示例
class DataService {
    constructor() {
        this.cache = new SmartCache({
            maxSize: 500,
            ttl: 300000, // 5分钟
            strategy: 'lru'
        });
        
        // 记忆化方法
        this.calculateExpensive = memoize(
            this._calculateExpensive.bind(this),
            { ttl: 60000 }
        );
    }
    
    async getUserData(userId) {
        return this.cache.getOrCompute(
            `user:${userId}`,
            async () => {
                const response = await $http.get(`/api/users/${userId}`);
                return response.data;
            },
            { priority: 1 } // 高优先级，不易被驱逐
        );
    }
    
    async _calculateExpensive(input) {
        // 模拟复杂计算
        await new Promise(resolve => setTimeout(resolve, 1000));
        return input * 2;
    }
}
```

## 五、错误处理和恢复机制

### 1. 组件错误边界

防止单个组件错误影响整个系统：

```javascript
class ComponentErrorBoundary {
    constructor(options = {}) {
        this.errorHandlers = new Map();
        this.globalHandler = options.globalHandler;
        this.maxRetries = options.maxRetries || 3;
        this.retryDelay = options.retryDelay || 1000;
        this.errorLog = [];
    }
    
    // 包装组件方法
    wrapComponent(component) {
        const wrapped = Object.create(component);
        const methods = Object.getOwnPropertyNames(Object.getPrototypeOf(component))
            .filter(name => typeof component[name] === 'function' && name !== 'constructor');
        
        methods.forEach(method => {
            wrapped[method] = this.wrapMethod(component, method, component[method]);
        });
        
        return wrapped;
    }
    
    // 包装方法
    wrapMethod(component, methodName, originalMethod) {
        return async (...args) => {
            const context = {
                component: component.constructor.name,
                method: methodName,
                args,
                retries: 0
            };
            
            while (context.retries <= this.maxRetries) {
                try {
                    return await originalMethod.apply(component, args);
                } catch (error) {
                    context.error = error;
                    context.retries++;
                    
                    // 记录错误
                    this.logError(context);
                    
                    // 调用错误处理器
                    const handled = await this.handleError(context);
                    
                    if (handled === 'retry' && context.retries <= this.maxRetries) {
                        await new Promise(resolve => 
                            setTimeout(resolve, this.retryDelay * context.retries)
                        );
                        continue;
                    } else if (handled === 'fallback') {
                        return this.getFallbackValue(context);
                    } else if (handled === 'ignore') {
                        return undefined;
                    } else {
                        throw error;
                    }
                }
            }
            
            throw new Error(`Max retries exceeded for ${context.component}.${context.method}`);
        };
    }
    
    // 处理错误
    async handleError(context) {
        // 组件特定的错误处理器
        const componentHandler = this.errorHandlers.get(context.component);
        if (componentHandler) {
            const result = await componentHandler(context);
            if (result) return result;
        }
        
        // 全局错误处理器
        if (this.globalHandler) {
            return await this.globalHandler(context);
        }
        
        // 默认处理
        return this.defaultErrorHandler(context);
    }
    
    // 默认错误处理器
    defaultErrorHandler(context) {
        const { error } = context;
        
        // 网络错误：重试
        if (error.message?.includes('network') || error.code === 'ECONNREFUSED') {
            return 'retry';
        }
        
        // 数据错误：使用降级值
        if (error.message?.includes('parse') || error.name === 'SyntaxError') {
            return 'fallback';
        }
        
        // 其他错误：抛出
        return 'throw';
    }
    
    // 注册组件错误处理器
    registerHandler(componentName, handler) {
        this.errorHandlers.set(componentName, handler);
    }
    
    // 记录错误
    logError(context) {
        const errorInfo = {
            timestamp: Date.now(),
            component: context.component,
            method: context.method,
            error: {
                name: context.error.name,
                message: context.error.message,
                stack: context.error.stack
            },
            retries: context.retries
        };
        
        this.errorLog.push(errorInfo);
        
        // 限制日志大小
        if (this.errorLog.length > 1000) {
            this.errorLog = this.errorLog.slice(-500);
        }
        
        // 发送错误报告
        this.reportError(errorInfo);
    }
    
    // 获取降级值
    getFallbackValue(context) {
        // 根据方法名返回合适的降级值
        if (context.method.startsWith('get')) {
            return null;
        } else if (context.method.startsWith('is')) {
            return false;
        } else if (context.method.includes('List') || context.method.includes('Array')) {
            return [];
        } else {
            return undefined;
        }
    }
    
    // 错误报告
    async reportError(errorInfo) {
        // 批量发送错误报告
        if (!this.reportQueue) {
            this.reportQueue = [];
        }
        
        this.reportQueue.push(errorInfo);
        
        if (!this.reportTimer) {
            this.reportTimer = setTimeout(() => {
                this.sendErrorReports();
                this.reportTimer = null;
            }, 5000);
        }
    }
    
    async sendErrorReports() {
        if (this.reportQueue.length === 0) return;
        
        try {
            await $http.post({
                url: '/api/errors',
                body: {
                    errors: this.reportQueue,
                    device: $device.info,
                    app: {
                        version: $app.info.version,
                        build: $app.info.build
                    }
                }
            });
            
            this.reportQueue = [];
        } catch (error) {
            console.error('Failed to send error reports:', error);
        }
    }
}

// 使用示例
const errorBoundary = new ComponentErrorBoundary({
    maxRetries: 3,
    retryDelay: 1000,
    globalHandler: async (context) => {
        // 显示错误提示
        $ui.toast(`操作失败: ${context.error.message}`);
        
        // 根据错误类型决定处理方式
        if (context.error.code === 401) {
            // 认证错误，重新登录
            await reLogin();
            return 'retry';
        }
        
        return null;
    }
});

// 注册特定组件的错误处理
errorBoundary.registerHandler('DataFetcher', async (context) => {
    if (context.method === 'fetchUserData') {
        // 使用缓存数据
        const cachedData = await getCachedUserData();
        if (cachedData) {
            return 'fallback';
        }
    }
    
    return null;
});

// 包装组件
const safeComponent = errorBoundary.wrapComponent(new DataFetcher());
```

### 2. 状态恢复机制

实现组件状态的保存和恢复：

```javascript
class StateRecoveryManager {
    constructor(options = {}) {
        this.storage = options.storage || 'icloud'; // icloud, local, memory
        this.autoSaveInterval = options.autoSaveInterval || 30000; // 30秒
        this.maxSnapshots = options.maxSnapshots || 10;
        this.components = new Map();
    }
    
    // 注册组件
    registerComponent(id, component) {
        const recovery = {
            id,
            component,
            snapshots: [],
            lastSave: 0,
            dirty: false
        };
        
        this.components.set(id, recovery);
        
        // 注入恢复方法
        component.recovery = {
            markDirty: () => this.markDirty(id),
            save: () => this.saveComponent(id),
            restore: (snapshotId) => this.restoreComponent(id, snapshotId),
            getSnapshots: () => this.getSnapshots(id)
        };
        
        // 启动自动保存
        if (this.autoSaveInterval > 0) {
            this.startAutoSave(id);
        }
    }
    
    // 标记为需要保存
    markDirty(id) {
        const recovery = this.components.get(id);
        if (recovery) {
            recovery.dirty = true;
        }
    }
    
    // 保存组件状态
    async saveComponent(id) {
        const recovery = this.components.get(id);
        if (!recovery || !recovery.dirty) return;
        
        try {
            // 获取组件状态
            const state = await this.extractState(recovery.component);
            
            // 创建快照
            const snapshot = {
                id: `${id}_${Date.now()}`,
                componentId: id,
                state,
                timestamp: Date.now(),
                metadata: {
                    version: recovery.component.version || '1.0.0',
                    size: JSON.stringify(state).length
                }
            };
            
            // 添加到快照列表
            recovery.snapshots.push(snapshot);
            
            // 限制快照数量
            if (recovery.snapshots.length > this.maxSnapshots) {
                recovery.snapshots = recovery.snapshots.slice(-this.maxSnapshots);
            }
            
            // 持久化保存
            await this.persistSnapshot(snapshot);
            
            recovery.dirty = false;
            recovery.lastSave = Date.now();
            
            return snapshot;
            
        } catch (error) {
            console.error(`Failed to save component ${id}:`, error);
            throw error;
        }
    }
    
    // 提取组件状态
    async extractState(component) {
        if (component.getState) {
            // 组件提供了获取状态的方法
            return await component.getState();
        } else {
            // 自动提取可序列化的属性
            const state = {};
            
            for (const key in component) {
                const value = component[key];
                
                if (this.isSerializable(value)) {
                    state[key] = this.cloneValue(value);
                }
            }
            
            return state;
        }
    }
    
    // 恢复组件状态
    async restoreComponent(id, snapshotId) {
        const recovery = this.components.get(id);
        if (!recovery) throw new Error(`Component ${id} not registered`);
        
        let snapshot;
        
        if (snapshotId) {
            // 恢复特定快照
            snapshot = recovery.snapshots.find(s => s.id === snapshotId);
        } else {
            // 恢复最新快照
            snapshot = recovery.snapshots[recovery.snapshots.length - 1];
        }
        
        if (!snapshot) {
            // 从持久化存储加载
            snapshot = await this.loadSnapshot(id, snapshotId);
        }
        
        if (!snapshot) {
            throw new Error(`No snapshot found for component ${id}`);
        }
        
        // 恢复状态
        if (recovery.component.setState) {
            await recovery.component.setState(snapshot.state);
        } else {
            // 直接赋值
            Object.assign(recovery.component, snapshot.state);
        }
        
        // 触发恢复事件
        if (recovery.component.onRestore) {
            await recovery.component.onRestore(snapshot);
        }
        
        return snapshot;
    }
    
    // 持久化快照
    async persistSnapshot(snapshot) {
        const key = `recovery_${snapshot.componentId}_${snapshot.id}`;
        
        switch (this.storage) {
            case 'icloud':
                $cloud.put({
                    key,
                    value: snapshot
                });
                break;
                
            case 'local':
                $cache.set(key, snapshot);
                break;
                
            case 'memory':
                // 已经在内存中
                break;
        }
    }
    
    // 加载快照
    async loadSnapshot(componentId, snapshotId) {
        const key = snapshotId ? 
            `recovery_${componentId}_${snapshotId}` : 
            `recovery_${componentId}_latest`;
        
        switch (this.storage) {
            case 'icloud':
                return await $cloud.get(key);
                
            case 'local':
                return $cache.get(key);
                
            default:
                return null;
        }
    }
    
    // 启动自动保存
    startAutoSave(id) {
        const timer = setInterval(() => {
            const recovery = this.components.get(id);
            
            if (recovery && recovery.dirty) {
                this.saveComponent(id).catch(error => {
                    console.error(`Auto-save failed for ${id}:`, error);
                });
            }
        }, this.autoSaveInterval);
        
        // 保存定时器引用以便清理
        if (!this.timers) this.timers = new Map();
        this.timers.set(id, timer);
    }
    
    // 判断是否可序列化
    isSerializable(value) {
        if (value === null || value === undefined) return true;
        
        const type = typeof value;
        if (type === 'string' || type === 'number' || type === 'boolean') return true;
        
        if (value instanceof Date) return true;
        
        if (Array.isArray(value)) {
            return value.every(item => this.isSerializable(item));
        }
        
        if (type === 'object') {
            // 排除函数和特殊对象
            if (value.constructor && value.constructor !== Object) return false;
            
            return Object.values(value).every(v => this.isSerializable(v));
        }
        
        return false;
    }
    
    // 深度克隆值
    cloneValue(value) {
        if (value === null || value === undefined) return value;
        
        if (value instanceof Date) return new Date(value);
        
        if (Array.isArray(value)) {
            return value.map(item => this.cloneValue(item));
        }
        
        if (typeof value === 'object') {
            const cloned = {};
            for (const key in value) {
                cloned[key] = this.cloneValue(value[key]);
            }
            return cloned;
        }
        
        return value;
    }
    
    // 清理
    cleanup() {
        // 保存所有脏组件
        for (const [id, recovery] of this.components) {
            if (recovery.dirty) {
                this.saveComponent(id);
            }
        }
        
        // 清理定时器
        if (this.timers) {
            for (const timer of this.timers.values()) {
                clearInterval(timer);
            }
        }
    }
}

// 使用示例
const recoveryManager = new StateRecoveryManager({
    storage: 'icloud',
    autoSaveInterval: 30000,
    maxSnapshots: 5
});

// 可恢复的组件
class RecoverableEditor {
    constructor() {
        this.content = '';
        this.cursorPosition = 0;
        this.history = [];
        
        recoveryManager.registerComponent('editor', this);
    }
    
    updateContent(newContent) {
        this.content = newContent;
        this.history.push({
            content: newContent,
            timestamp: Date.now()
        });
        
        // 标记需要保存
        this.recovery.markDirty();
    }
    
    async getState() {
        return {
            content: this.content,
            cursorPosition: this.cursorPosition,
            history: this.history.slice(-10) // 只保存最近10条历史
        };
    }
    
    async setState(state) {
        this.content = state.content || '';
        this.cursorPosition = state.cursorPosition || 0;
        this.history = state.history || [];
        
        // 更新UI
        this.render();
    }
    
    async onRestore(snapshot) {
        $ui.toast(`已恢复到 ${new Date(snapshot.timestamp).toLocaleString()}`);
    }
}
```

## 六、最佳实践总结

### 1. 架构设计原则

```javascript
// 1. 单一职责原则
class MessageComponent {
    // 只负责消息显示
    displayMessage(message) { /* ... */ }
}

class MessageValidator {
    // 只负责消息验证
    validate(message) { /* ... */ }
}

// 2. 依赖倒置原则
class Component {
    constructor(eventBus) {
        // 依赖抽象而不是具体实现
        this.eventBus = eventBus;
    }
}

// 3. 开闭原则
class ExtensibleComponent {
    constructor() {
        this.plugins = [];
    }
    
    use(plugin) {
        this.plugins.push(plugin);
        plugin.install(this);
    }
}
```

### 2. 性能优化清单

```javascript
// 性能监控工具
class PerformanceMonitor {
    measure(name, fn) {
        const start = performance.now();
        const result = fn();
        const duration = performance.now() - start;
        
        if (duration > 16) {  // 超过一帧
            console.warn(`Slow operation ${name}: ${duration}ms`);
        }
        
        return result;
    }
}

// 使用示例
const monitor = new PerformanceMonitor();

monitor.measure('render', () => {
    component.render();
});
```

### 3. 调试和测试

```javascript
// 组件测试框架
class ComponentTester {
    constructor(component) {
        this.component = component;
        this.eventLog = [];
        this.stateHistory = [];
        
        this.setupLogging();
    }
    
    setupLogging() {
        // 拦截事件
        const originalEmit = this.component.emit;
        this.component.emit = (event, data) => {
            this.eventLog.push({ event, data, timestamp: Date.now() });
            return originalEmit.call(this.component, event, data);
        };
        
        // 拦截状态变化
        const originalSetState = this.component.setState;
        this.component.setState = (state) => {
            this.stateHistory.push({
                before: { ...this.component.state },
                after: { ...this.component.state, ...state },
                timestamp: Date.now()
            });
            return originalSetState.call(this.component, state);
        };
    }
    
    async simulate(scenario) {
        console.log(`Running scenario: ${scenario.name}`);
        
        for (const step of scenario.steps) {
            await this.executeStep(step);
        }
        
        return this.generateReport();
    }
    
    async executeStep(step) {
        switch (step.type) {
            case 'event':
                this.component.handleEvent(step.event, step.data);
                break;
                
            case 'state':
                this.component.setState(step.state);
                break;
                
            case 'wait':
                await new Promise(resolve => setTimeout(resolve, step.duration));
                break;
                
            case 'assert':
                const actual = step.getter(this.component);
                if (actual !== step.expected) {
                    throw new Error(`Assertion failed: expected ${step.expected}, got ${actual}`);
                }
                break;
        }
    }
    
    generateReport() {
        return {
            events: this.eventLog,
            states: this.stateHistory,
            finalState: this.component.state
        };
    }
}
```

## 结语

处理组件间的复杂交互和数据同步是构建大型 JSBox 应用的核心挑战。通过合理的架构设计，我们可以构建出高效、可靠、可维护的系统。

关键要点：

1. **选择合适的通信模式**：根据具体场景选择中介者、数据流、状态同步等模式
2. **保证数据一致性**：使用事务、CRDT 等技术确保多组件数据同步
3. **优化性能**：通过批处理、缓存、虚拟化等技术提升响应速度
4. **完善错误处理**：建立错误边界和恢复机制，提高系统稳定性
5. **便于调试维护**：提供完善的日志、监控和测试工具

记住，好的架构不是一蹴而就的，需要在实践中不断迭代和优化。根据应用的具体需求和约束条件，灵活运用这些模式和技术，才能构建出真正优秀的 JSBox 应用。

配图 (可多选)

选择新图片文件或拖拽到此处

标签