事件循环与宏任务 / 微任务
第 1 段（10min）回顾与预习：接住昨天的线 1.1 先接昨日（原型链）的线 昨天你学了 对象怎么找属性 （沿原型链上溯）。今天换一个维度： 代码怎么排队执行 。 把前三天的知识串成一句话，你已经有了 JS 的三张地图： 1.2 先凭直觉回答 4 个小问题（不用对，先写下答案） 学完第 2、3、4 段再回来对照。第 1 段只做一件事：记住画面—— JS 单线程，但靠"排队 + 轮转"假装多线程 。 第 2 段（15min）知识块①：...
原型与原型链
第 1 段（10min）回顾与预习：接住昨天的线 1.1 先接昨日（this 与 new）的线 昨天你学了四种 this 绑定，其中 绑定 讲了 的四步： 今天的一切都从第 ② 步长出来 。 这个式子，昨天是"new 四步的副产品"，今天要把它彻底讲透。 再回忆昨天的一句话： 变量看定义处，this 看调用处 。今天补上第三句： 属性看原型链 。三句连起来： 变量 → 看定义处（闭包）； → 看调用处（绑定）；属性 → 看原型链（上溯查...
七、AI工程化与前端工具链（18题）
1. 如何设计一个AI前端项目的标准化目录结构 核心设计原则：模块化、关注点分离、可扩展性、易于维护。按功能领域组织代码，而非按技术类型。 目录结构设计： 关键设计决策： 1. 按功能模块组织而非技术类型，便于功能扩展 2. AI相关代码集中管理，便于模型切换和更新 3. 严格区分业务逻辑和通用逻辑 4. 测试文件靠近被测试代码，便于维护 2. 请设计一套AI前端代码规范 代码规范体系：建立编码规范、提交规范、命名规范三位一体的规范体系...
三、前端状态管理与数据流（21题）
1. 在大型AI应用中，如何用Zustand或Redux Toolkit管理多轮对话、生成任务、用户配置等复杂状态？ 场景：AI学习平台包含多个复杂功能：多轮AI对话、异步生成任务、用户个性化配置等，需要统一的状态管理方案。 Zustand方案：Zustand适合中小型应用，以更简洁的方式管理状态。 Redux Toolkit方案：更适合大型企业级应用，提供更严格的架构约束。 选择建议： Zustand：适合中小型项目，API简洁，学习...
二、流式处理与实时通信（25题）
1\. 请设计一个支持"断线重连+消息去重"的SSE客户端，并处理AI长文本生成中的网络抖动问题 场景：在AI答疑系统中，学生提问后AI需要长时间生成答案，期间网络可能不稳定，需要确保连接中断后能自动重连，并且不丢失、不重复已接收数据。 核心答案： 设计一个SSE客户端，封装原生EventSource，添加以下功能： 1. 断线重连：监听onerror事件，连接断开后按指数退避策略重连 2. 消息去重：服务器为每个消息分配唯一ID，客户...
五、前端AI架构设计（19题）
1. 请设计一个"微前端+模块联邦"的AI应用架构 场景：在AI学习平台演进过程中，原有的单体前端应用变得臃肿，团队希望将聊天、代码编辑、可视化分析等模块拆分为独立应用，由不同团队独立开发和部署。 核心答案：采用模块联邦架构，将AI应用拆分为多个自治的微前端应用。每个应用独立开发、构建、部署，通过Webpack 5的Module Federation实现跨应用模块共享。构建统一的应用壳（App Shell）管理路由、状态、样式和共享依赖...
八、大模型前端集成（7题）
1. 如何用OpenAI Function Calling或Tools在前端实现AI工具调用 核心架构：构建一个可扩展的工具调用框架，将自然语言转换为结构化工具调用指令，并处理工具执行和结果返回的完整生命周期。 实现思路： 1. 工具注册与描述系统 工具元数据定义：每个工具包含名称、描述、参数模式、执行函数 工具分类管理：按功能域（计算、搜索、数据操作、系统交互）分类 权限与安全控制：工具执行权限验证，敏感操作确认 版本兼容性：支持工具...
六、AI特性与前端工程实践（14题）
1. 在前端实现一个Agent循环时，如何管理工具调用的异步执行、超时处理与结果合并？ 场景：在智能助教系统中，AI Agent需要按顺序调用多个工具（如计算器、天气查询、代码执行），并处理可能出现的超时和错误。 核心答案：设计一个基于状态机的Agent执行引擎，通过优先级队列管理工具调用，实现超时重试和错误降级机制，最后通过结果聚合器合并多个工具的输出。 实现思路： 1. 任务调度器：将Agent的思考过程分解为多个原子任务，每个工具...
前端AI八股文题目汇总
一、TypeScript 与类型系统（20题） 1. 在定义 AI 接口返回的嵌套数据结构（如多轮对话、工具调用结果）时，如何用 TypeScript 的泛型与条件类型实现灵活的类型推导？ 2. 当 AI 接口返回的字段可能因模型版本不同而动态变化时，如何设计类型守卫（type guard）与类型收缩策略？ 3. 请用 TypeScript 实现一个"类型安全的 Prompt 模板解析器"，要求支持变量插值、类型校验与默认值。 4. 如...