2026-04-09 关闭AI助手的实现原理与代码实战

// 传统粗暴实现

let isAIActive = true;
function closeAI() {
    isAIActive = false;
    document.getElementById('aiPanel').style.display = 'none';
}
function onUserMessage(msg) {
    if (!isAIActive) return;
    // 调用AI接口...
}

// 状态模式下的关闭示意
class AIState {
    handleMessage() { throw new Error("需子类实现"); }
}
class OnState extends AIState {
    handleMessage(msg) { console.log(`AI回复：${msg}`); }
}
class OffState extends AIState {
    handleMessage() { console.log("AI已关闭，不处理消息"); }
}

// ---------- 状态抽象 ----------
class AIState {
    constructor(assistant) { this.assistant = assistant; }
    onEnter() {}   // 进入状态时的钩子（资源初始化/清理）
    handleMessage(msg) {}
}

// 开启状态
class OnState extends AIState {
    onEnter() {
        console.log("[状态] AI已开启，开始监听事件");
        this.assistant.registerEventListeners(); // 注册真实事件
    }
    handleMessage(msg) {
        console.log(`🤖 AI回复：${msg}`);
        // 模拟调用AI接口
    }
}

// 关闭状态
class OffState extends AIState {
    onEnter() {
        console.log("[状态] AI已关闭，清理所有资源");
        this.assistant.cleanupResources();   // 清理定时器/监听/连接
    }
    handleMessage(msg) {
        console.log(`⛔ AI已关闭，忽略消息：“${msg}”`);
    }
}

// AI助手主类
class AIAssistant {
    constructor() {
        this.onState = new OnState(this);
        this.offState = new OffState(this);
        this.currentState = this.offState; // 初始关闭
        this.eventHandlers = new Map();      // 存储事件回调，便于解绑
        this.timers = [];
    }

    // 切换到开启状态
    turnOn() {
        this.currentState = this.onState;
        this.currentState.onEnter();
    }

    // 关闭AI助手（核心方法）
    turnOff() {
        this.currentState = this.offState;
        this.currentState.onEnter();
    }

    // 接收用户消息（委托给当前状态）
    sendMessage(msg) {
        this.currentState.handleMessage(msg);
    }

    // 注册事件监听（示例：模拟键盘或DOM事件）
    registerEventListeners() {
        const handler = (e) => this.sendMessage(e.detail?.text || "默认消息");
        window.addEventListener('ai-user-message', handler);
        this.eventHandlers.set('ai-user-message', handler);
        // 模拟定时轮询
        const timer = setInterval(() => console.log("心跳检测"), 30000);
        this.timers.push(timer);
    }

    // 资源清理
    cleanupResources() {
        // 解绑事件
        for (let [event, handler] of this.eventHandlers.entries()) {
            window.removeEventListener(event, handler);
        }
        this.eventHandlers.clear();
        // 清除所有定时器
        this.timers.forEach(timer => clearInterval(timer));
        this.timers = [];
        console.log("所有资源已释放");
    }
}

// 使用示例
const ai = new AIAssistant();
ai.turnOn();      // 开启
ai.sendMessage("今天天气如何？"); // AI回复
ai.turnOff();     // 关闭AI助手
ai.sendMessage("还有问题吗？");   // 被忽略