资源介绍
视频数量：47个
总时长：5小时55分
课程介绍：
前端系统设计核心精讲
你有没有过这样的经历：项目刚启动时写起来很顺手，组件拆得清晰，状态用 useState 一管，增删改查跑得飞快。但随着功能越叠越多，应用变成几千行的庞然大物，你开始发现很多地方不对劲——数据拉了一堆却没用上，列表越滚越卡，搜索框每按一个键都触发请求，用户在不同页面看到的数据还对不上号。这些问题不是简单的 bug，而是系统层面的设计缺陷。很多前端开发者习惯了"组件优先"的思维，盯着当前要写的 UI，却忽略了数据从后端流向前端再流回去的完整链路，忽略了失败场景和长远的可维护性。这门课想帮你从写组件的人变成思考系统的人。
一、数据建模与规范化
课程从一个实际问题切入：后端数据库是怎么处理规范化数据的？很多前端拿到接口返回的数据就直接用，根本没想过在前端该怎么组织才合理。课程用一个类似 Jira 的看板应用作为贯穿全程的实战项目，带你从零搭建，看为什么要把"用户"和"卡片"拆成独立结构，为什么要避免数据冗余，规范化之后怎么重构代码。还专门设计了一个菜单项"功能特性"的建模案例，让你理解数据建模跟前端 store 结构、组件边界都紧密相关。
二、状态管理的选型
状态管理没有银弹。Context 轻量零依赖但没有调试工具，Redux 配套完善但概念多学习曲线陡，Zustand 体积小 API 简洁。课程不简单告诉你"用哪个"，而是分析不同状态的归属——哪些该留在组件内部用 useState，哪些该提升到 Context 或全局 store，以及真实项目中怎么在多个方案间做权衡。
三、数据获取与请求管理
数据获取是最容易踩坑的环节。课程拆解五个常见问题：竞态条件（多个请求乱序返回）、过度获取与获取不足（浪费带宽或拼不出完整页面）、性能问题（每按一个键都发请求）、数据陈旧（用户希望看到新鲜内容）、一致性（同一数据的不同副本在不同组件里打架）。针对这些问题，教你请求取消怎么做、防抖节流怎么用在搜索场景、分页策略怎么选——基于偏移量的传统分页、基于游标的分页、还是无限滚动，每种都在看板应用里实际实现一遍。
四、缓存策略
缓存不是后端专属。课程从内存缓存讲到 HTTP 缓存头，从 SWR 的"stale-while-revalidate"策略讲到手动失效机制。你会学到什么时候该缓存、粒度怎么定、数据过期后怎么重新拉取，以及不同策略对用户体验的实际影响。
五、数据变更与实时更新
用户点了删除按钮，UI 要不要立刻更新？服务器还没响应怎么办？课程用实际代码演示乐观 UI 的完整实现：先假定操作成功立刻更新界面，服务器返回失败再回滚，包括回滚逻辑怎么处理、用户中途取消怎么办。实时更新方面，对比三种方案：轮询（简单但浪费）、Server-Sent Events（单向推送，适合通知场景）、WebSockets（双向通信，适合协作场景），并在课程里完整实战 SSE，包括连接建立和断线重连。
六、性能优化
性能优化不是上线后才考虑的事。课程从多个层面展开：渲染策略——客户端渲染、服务端渲染、静态生成各适合什么场景，SSR 在实战中怎么落地；感知性能——用户觉得快和实际快是两回事，怎么实现骨架屏让等待时不至于面对一片空白；预取——用户鼠标悬停在链接上时提前把数据拉好，点击瞬间页面呈现；懒加载——长列表和大量图片怎么处理，多页面场景下怎么落地；HTTP 缓存——Cache-Control 和 ETag 怎么配置才能最大化利用浏览器缓存。最后还会教你用工具测量性能，找出真正的瓶颈再对症下药。
七、测试策略
功能跑通不代表没问题。课程覆盖两种测试：单元测试——核心业务逻辑怎么测、哪些必须测哪些可以略过；端到端测试——用 Playwright 模拟真实用户操作验证整条链路。你会学到测试金字塔怎么搭、覆盖率怎么取舍，以及常见的反模式。
八、安全与可访问性
XSS 攻击的原理、CSP 策略怎么配置既安全又不影响功能、用户输入该怎么清洗，课程从前端视角讲清楚这些安全话题。可访问性经常被忽略，但好的架构师会把它当一等公民对待，讨论无障碍设计原则，以及拖拽这种交互怎么让键盘用户也能正常使用。
九、错误处理与项目结构
应用不可能永远不出错。用 Error Boundary 捕获渲染异常避免整个应用白屏；React 项目的目录结构怎么组织才合理，代码怎么清理才方便未来扩展。
十、毕业项目与前沿思考
最后是一个完整的毕业项目：在前面基础上实现编辑弹窗、完成多页面懒加载、让拖拽支持键盘操作，把所有知识点串起来。收尾回顾前端系统设计的六大核心支柱，最后一节课讨论 AI 时代的变化——AI 工具能帮你写代码，但系统设计的判断力依然是核心竞争力。
这门课特别适合工作两到五年的中级前端工程师，已经能熟练用 React 写组件，但开始觉得代码越写越乱、性能问题越来越多、需求一改就到处出问题。学完之后面对新的功能需求，你不再急着动手写组件，而是先想清楚数据怎么流、状态放哪里、缓存怎么管、错误怎么处理。这种思考方式的转变，会让你写的每一行代码都更扎实。