把这页想成"期末总复习画重点"：前面 9 个业务模块看着各不相同，其实底层是同一套打法。这页把它们串成一张"能力地图"——每个模块的核心 API、核心代码、边界场景过一遍，最后做一次自查清单 + 面试题自测。搞懂这一页，你就把整册真正串起来了。
| 模块 | 核心 API / 知识点 | 边界场景（最容易丢分的地方） |
|---|---|---|
| 1 图片上传 | File / FileReader / FormData / fetch | 空文件、非图片、超大、损坏、拼域名 |
| 2 分页 | page / pageSize / total / slice / Math.ceil | 删除回退、筛选重置、省略号 |
| 3 筛选搜索 | filter / find / sort / localeCompare | 多条件叠加、条件为空、升降序 |
| 4 递归树形 | 终止条件 / 展开图 / 树渲染 / 事件委托 | 死循环、栈溢出、折叠展开 |
| 5 三级联动 | change 事件 / 动态 option / 清空下级 | 重复选项、无数据兜底、键名不匹配 |
| 6 购物车 | cartData / renderCart / filter 批量删 | 库存上限、数量 1 再减、空车 |
| 7 插件富文本 | 三步法 / wangEditor / layui.use | 配置顺序、CDN 失败、版本不匹配 |
| 8 ECharts | echarts.init / setOption / series.type / resize | 容器无宽高、饼图数据格式、动态更新 |
| 9 地图定位 | 申请 key / AMapLoader / Marker / convertFrom | 白屏、key 错误、GPS→GCJ-02 |
别被这张表吓到——它看起来九行，其实记的就那几个反复出现的词：filter、change、事件委托、render、边界校验。把这些记牢，模块再多也不怕。
| 套路 | 解释 | 用在哪些模块 |
|---|---|---|
| ① 数据驱动渲染 | 先有个数组，所有操作都改数组，再统一重画 | 分页 / 筛选 / 购物车 / 三级联动 |
| ② 事件委托 | 动态生成的元素，事件绑到它们共同的父容器上 | 分页按钮 / 购物车行 / 树节点 |
| ③ 边界先行 | 先校验空值、非法值、越界，再干正事 | 上传 / 分页 / 购物车 / 筛选 |
背会这三条，模块再多也不怕——每个模块都是"数据 + 事件 + 渲染"的排列组合。这就是为什么你学完 9 个模块，会发现自己其实只学透了 3 个套路。
已完成 0 / 10
下面这 10 条，就是你"学没学会"的硬标准。如果你不能不假思索地答上来，就回到对应那一页再点一遍演示。别骗自己"看过就会"，看过 ≠ 会写。
普通键值对传不了二进制文件，FormData 是浏览器封装好的"表单数据"容器。processData:false 关闭 jQuery 对参数的自动序列化；contentType:false 关闭默认请求头，让浏览器自动生成 multipart/form-data 边界符。
startIndex=(page-1)×pageSize，slice(startIndex, startIndex+pageSize) 截取当前页；总页数 Math.ceil(total/pageSize)。删除后当前页数据为空且不是第 1 页时要 page--，否则会停在一个空页上。
终止条件（写最前面）、调用自己、返回值。步骤：先写终止条件 → 画展开图 → 根据展开图写递推 → 确定返回值 → 测边界。
容易在"反复在已筛结果上筛"和"忘记重置页码"。标准写法：从原始备份开始，每个条件用 if 判断独立叠加（条件为空跳过），筛选完页码回 1。
引 JS → 建容器 → echarts.init → setOption。容器必须有明确高度，否则白屏；窗口缩放要 chart.resize。
| 阶段 | 做法 | 产出 |
|---|---|---|
| 第 1 遍 | 跟着本系列每个页面，把演示点一遍，代码敲一遍 | 能独立说出每个模块的套路 |
| 第 2 遍 | 关掉页面，只凭题目自己写核心函数 | 写出 renderCart / renderPagination / applyFilters |
| 第 3 遍 | 做课件作业 + 边界场景题 | 能答出"删空了怎么办"这类问题 |
① 可能在什么地方用：这 9 个模块合起来，就是一个真实后台系统的全部核心功能——用户列表（分页+筛选）、商品上传（上传+富文本）、数据看板（ECharts+地图）、订单购物车（批量操作）。学完就能搭一个迷你后台。
② 常见的问题：学完就忘（只"看"不"敲"）；一到边界就懵（删空、搜空、切换重复这些边角没练过）；把模块当成孤立知识点，串不起来（没抓住"数据+事件+渲染"三大套路）。
③ 解决思路：用上面的自查清单打分，哪条答不上就回哪一页；重点把每个模块的边界场景手动点一遍（删到空、搜个不存在的词、疯狂切换）；最后合上书，把 renderCart、renderPagination、applyFilters 这三个函数默写出来——默得出来，才算真会。