Garfish 如何实现主应用与子应用之间的通信和状态共享？ - 面试题

Garfish 提供了多种通信机制，支持主应用与子应用之间、以及子应用之间的数据共享和交互。

通信方式

1. Props 传递

适用场景：主应用向子应用传递配置、用户信息等静态数据
特点：单向数据流，简单直接
示例：

javascript
// 主应用配置
{
  name: 'sub-app',
  entry: '//localhost:3001',
  props: {
    userInfo: { name: 'John', role: 'admin' },
    theme: 'dark',
    apiConfig: { baseUrl: '/api' }
  }
}

// 子应用接收
export function mount(props) {
  const { userInfo, theme, apiConfig } = props;
  // 使用传递的数据
}

2. 事件总线

适用场景：跨应用的事件通知和响应
特点：解耦应用间依赖，支持一对多通信
示例：

javascript
// 发布事件
Garfish.channel.emit('user-login', { userId: 123 });

// 订阅事件
Garfish.channel.on('user-login', (data) => {
  console.log('用户登录:', data.userId);
});

// 取消订阅
Garfish.channel.off('user-login', handler);

3. 共享状态

适用场景：需要跨应用共享的业务状态
特点：集中管理，响应式更新
示例：

javascript
// 定义共享状态
Garfish.registerShared({
  name: 'userStore',
  store: {
    state: { user: null },
    mutations: {
      setUser(state, user) {
        state.user = user;
      }
    }
  }
});

// 子应用使用
export function mount(props) {
  const userStore = props.shared.userStore;
  userStore.mutations.setUser({ name: 'John' });
}

4. 自定义通信协议

适用场景：复杂的业务交互逻辑
特点：灵活定制，满足特定需求
示例：

javascript
// 定义通信接口
Garfish.defineInterface('auth', {
  login(credentials) {
    return fetch('/api/login', {
      method: 'POST',
      body: JSON.stringify(credentials)
    });
  },
  logout() {
    return fetch('/api/logout');
  }
});

// 子应用调用
export function mount(props) {
  props.auth.login({ username, password });
}

状态管理最佳实践

1. 状态分层

全局状态：用户信息、主题、权限等
应用级状态：子应用内部状态
组件级状态：组件内部状态

2. 状态隔离

避免直接访问其他应用的状态
通过通信机制传递数据
保持应用的独立性

3. 状态同步

使用事件机制同步状态变化
实现状态变更通知
避免状态不一致问题

4. 状态持久化

使用 localStorage 或 sessionStorage
实现跨会话的状态保持
考虑状态恢复机制

通信安全考虑

1. 数据验证

验证接收到的数据格式和内容
防止恶意数据注入
实现数据校验机制

2. 权限控制

限制敏感数据的访问
实现基于角色的权限控制
审计通信日志

3. 错误处理

完善的错误捕获和处理
提供友好的错误提示
实现降级方案

性能优化

1. 减少通信频率

合并多个通信请求
使用批量更新
实现防抖和节流

2. 数据缓存

缓存常用数据
减少重复请求
实现缓存失效策略

3. 异步通信

使用异步方式处理通信
避免阻塞主线程
优化用户体验

通过合理使用通信机制，可以实现微前端应用间的高效协作和数据共享。