深入解析skill使用菜单的实现原理与最佳实践

2次阅读

共计 1893 个字符，预计需要花费 5 分钟才能阅读完成。

在传统的菜单实现中，开发者通常面临以下几个核心痛点：

状态管理混乱：菜单的展开 / 收起、选中状态等通常通过多个布尔变量或枚举值来管理，随着菜单复杂度增加，状态组合呈指数级增长
交互逻辑耦合：点击事件处理直接嵌入 UI 组件，导致业务逻辑与视图层高度耦合，难以复用和测试
扩展成本高：新增菜单项或交互行为需要修改多处条件判断，违反开闭原则

采用发布 - 订阅模式解耦交互逻辑：

interface MenuEvent {
  type: 'CLICK' | 'HOVER' | 'FOCUS';
  targetId: string;
  timestamp: number;
}

class EventBus {private subscribers: Map<string, Function[]> = new Map();

  subscribe(eventType: string, callback: Function) {if (!this.subscribers.has(eventType)) {this.subscribers.set(eventType, []);
    }
    this.subscribers.get(eventType)?.push(callback);
  }

  publish(event: MenuEvent) {const callbacks = this.subscribers.get(event.type);
    callbacks?.forEach(cb => cb(event));
  }
}

将菜单行为封装到状态对象中：

interface MenuState {enter(): void;
  exit(): void;
  handleEvent(event: MenuEvent): void;
}

class CollapsedState implements MenuState {constructor(private context: MenuContext) {}

  handleEvent(event: MenuEvent) {if (event.type === 'CLICK') {this.context.transitionTo(new ExpandedState(this.context));
    }
  }
  // ... 其他方法实现
}

class MenuContext {
  private currentState: MenuState;

  constructor(initialState: MenuState) {
    this.currentState = initialState;
    this.currentState.enter();}

  transitionTo(state: MenuState) {this.currentState.exit();
    this.currentState = state;
    this.currentState.enter();}

  handleEvent(event: MenuEvent) {this.currentState.handleEvent(event);
  }
}

class ClickEventHandler {constructor(private eventBus: EventBus) {eventBus.subscribe('CLICK', this.handleClick.bind(this));
  }

  private handleClick(event: MenuEvent) {
    // 执行点击相关业务逻辑
    console.log(` 处理点击事件: ${event.targetId}`);
  }
}