前端面试准备 08：系统设计——从需求到架构（模块边界、状态、扩展性、治理）

前端系统设计题的关键不是“画框图”，而是你能否做出合理取舍并解释为什么。

01 回答框架（通用）#

建议按这个顺序回答：

1. 需求澄清（用户/场景/规模/约束）
2. 关键实体与数据流（读写路径）
3. 模块边界（按领域而不是按技术）
4. 权限与安全（谁能做什么）
5. 性能与体验（关键链路）
6. 可观测与运维（上线后怎么保证稳定）
7. 演进路线（先做 MVP，再迭代）

02 模块边界：大项目最容易死在“耦合”#

你可以谈：

• 领域拆分：用户、资源、权限、审计、配置…
• API 适配层：把后端变化隔离在边界
• 组件层级：基础组件 → 业务组件 → 页面

03 状态与缓存：复杂度来源#

面试里可以强调：

• 本地状态 vs 服务端状态
• 缓存一致性与失效策略
• 表单与草稿（离线/恢复）

04 治理：8 年工程师的差异点#

• 规范与模板（脚手架）
• 质量门禁（CI）
• 依赖与版本治理
• 设计系统与 Token（多主题/品牌）

05 自测清单#

• 我能把一个系统设计题讲成 10 分钟结构化答案吗？
• 我能说清“为什么不用某方案”而不是只说“我用了某方案”吗？

---

06 系统设计练习题（含参考答案框架）#

题：设计一个“多租户管理后台”（前端）#

要求：

• 支持多租户切换（不同租户权限不同）
• 菜单/路由按权限动态
• 数据请求要带租户上下文
• 需要埋点与错误监控

参考答案（原理与取舍）#

需求澄清：

• 租户切换是否需要“记忆最近租户”
• 权限粒度：页面级/按钮级/字段级
• 权限来源：后端下发还是前端配置

关键实体：

• Tenant（租户）、User（用户）、Role（角色）、Permission（权限）

模块边界：

• auth（登录态/刷新/吊销）
• tenant（租户选择与上下文）
• permission（权限计算与守卫）
• api（请求封装：自动注入租户、重试、错误上报）
• ui（组件库/Token）

路由与权限：

• 路由表声明元信息（requiredPermissions）
• 进入路由前做守卫：未授权 → 403 页或重定向
• UI 按权限渲染（按钮隐藏/禁用），但关键操作仍以服务端校验为准

可观测：

• 关键操作埋点（切租户、创建资源、发布等）
• 错误监控（JS error、API error）
• 性能指标（首屏、交互延迟）

---

下一篇进入“项目表达与行为面”：同样的经历，讲法不同，结果完全不同。