13. 独立开发、团队、学习与工作流 · 讲者经验 · 教学步骤 3

只学项目马上需要的知识

项目断点决定学习顺序，知识可立即进入实践反馈。

原知识点：优先学习当前项目马上需要的知识；SEO竞品学习优先看行业老玩家，而非只追新兴创业明星。

执行步骤

  1. 从当前最早断点写出一个必须回答的技术或业务问题。
  2. 优先查官方文档和长期有效基础资料，记录URL、产品/标准版本、文档更新时间与访问日期。
  3. 把学习拆成一个能在当前项目外独立运行的小练习；范围由回答问题所需证据决定，不设固定分钟数。
  4. 运行练习并保存输入、预期、实际结果、错误、自己的解释和适用边界。
  5. 将验证通过的知识更新到SOP并用于当前项目；无关知识移入以后清单。

可复制工作表

# 按需学习记录
学习ID/当前项目/版本：__
最早断点及证据位置：__
必须回答的问题：__
为什么现在必须学/明确不学什么：__
官方来源标题与URL：__
产品/标准/文档版本：__
文档更新日/访问日：__/__
来源归档路径/hash：__
适用范围、前置条件与限制：__

# 可独立运行练习
练习目录/文件：__
运行环境与版本：__
输入/夹具：__
运行命令或操作：__
|用例|预期|实际|错误/日志位置|结果|
|---|---|---|---|---|
|正常机制|__|__|__|__|
|边界/反例|__|__|__|__|
|反证测试|__|__|__|__|
我的解释与证据：__
会推翻解释的结果：__

# 项目复测与SOP
项目文件/commit/PR：__
改动前基线：__
同口径复测命令与结果：__
回滚点：__
SOP原条目：__
SOP更新后条目：__
本轮不相关、以后再学：__
批准人/日期：__

完整示例

示例（日期与ID用于演示，官方页面元数据按访问日记录）：
学习ID=LRN-017；当前项目=invoice-ui release-v3/commit 71ba92c。最早断点是运行时新增的5个“删除”按钮点击后父列表处理器0/5收到事件，证据=evidence/learning/LRN-017/baseline-playwright.json。必须回答：在未调用stopPropagation()时，动态子元素的click是否会冒泡到稳定父容器，以及target和currentTarget分别指向什么。现在必须学，因为它阻塞删除任务；本轮不学习自定义事件、Shadow DOM跨边界和框架合成事件。

官方来源：MDN《Event bubbling》，URL=https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Event_bubbling；产品/标准范围=浏览器DOM Event与事件委托，页面最后修改2025-10-19，访问2026-08-01；归档=evidence/learning/LRN-017/mdn-event-bubbling-20260801.pdf，SHA-256=7f31c9b6623f7f2a5e0cd8c7753157f96468bdc4d69068fe143dca02e298172e。适用于普通Light DOM click/keyboard触发的click；不外推到Shadow DOM、跨文档或主动停止传播的场景。

独立练习=examples/delegation/index.html与tests/delegation.spec.mjs；环境=Node 24.3.0 + Playwright Chromium 139；夹具=页面加载后插入button[data-action=delete]；命令=npm run test:delegation -- --reporter=json。

列较多时可左右滚动；首列会固定，便于逐行比较。

用例预期实际错误/日志位置结果
正常机制：父ul监听，点击动态按钮父处理器1次；target=BUTTON、currentTarget=UL三次点击均得到1次/目标值一致evidence/learning/LRN-017/run-normal.json3/3 PASS
边界：点击按钮内svg父处理器触发；用closest('[data-action]')解析按钮target=svg，closest得到按钮，删除ID正确evidence/learning/LRN-017/run-boundary.json2/2 PASS
反证测试：中间层调用stopPropagation()若解释正确，父ul不应收到事件父处理器0次；删除未执行evidence/learning/LRN-017/run-falsifier.jsonPASS，支持而非推翻解释

解释：动态节点无需逐个绑定；事件沿Light DOM传播，稳定父容器可以委托，但必须解析target.closest()并处理传播被停止的边界。会推翻解释的结果是：在没有Shadow DOM、没有停止传播且事件可冒泡的同一环境里，父监听仍稳定收不到click；本次未观察到。

项目改动=src/ui/invoice-list.ts，commit=9ac41de，PR=PR-214；把逐按钮监听改为列表委托并补closest()与键盘激活测试。改动前动态按钮0/5成功；命令=npm run test:invoice-list复测动态点击5/5、键盘4/4、静态按钮5/5通过，日志=evidence/learning/LRN-017/project-retest.json。回滚点=release-v3/71ba92c。SOP由“新增按钮后逐个绑定监听”更新为“稳定父容器绑定一次，校验closest()结果，并覆盖动态节点、嵌套图标和键盘用例”。以后再学=Shadow DOM事件重定向。工程负责人赵于2026-08-02批准更新SOP。

完成清单

  • 学习项直接对应当前最早断点，并明确本轮不学的内容，范围不由固定学习时长决定。
  • 官方来源、产品/标准版本、更新/访问日期、归档证据与适用边界齐全。
  • 练习可独立运行，正常、边界和反证用例均有预期、实际与日志；反证条件明确。
  • 只有项目按同口径复测通过并留有commit与回滚点后才更新SOP。

适用条件

兴趣性学习可另行安排。

来源：聊一聊海量页面SEO与我的近期收获