单文件课堂小工具
什么时候用
- 老师要一个「不用装、双击就开」的小工具，机房/教室电脑还常断网
- 需求简单但要现场可用：点名、计时、抽签、计分、看板
- 已有的小工具「某功能点了没反应」「打开是白屏」，要定位原因
不适用：需要多人协作/数据上云（那就该做正经应用）；界面很复杂的管理系统。
为什么坚持单文件
- 零依赖：所有 CSS/JS/字体/图标内联，无 CDN，断网可用
- 零安装：双击打开，U 盘拷走就能用
- 零维护：一个文件，改坏了直接换回去
- 可持久化：名单与记录存
localStorage；注意file://下个别浏览器禁用
localStorage，必须 try/catch 降级到内存，否则整页崩
现成模板
assets/rollcall-template.html —— 班级点名器，可直接交付，也是改造成其他小工具的骨架：
| 已有能力 | 改造方向 |
|---|---|
| 名单增删改 + 批量粘贴 | 换成学生名单/小组名单/题目清单 |
| 随机抽取（避免重复） | 换成抽题、抽组、抽任务 |
| 大屏高亮 + 滚动动画 + 全屏 | 保留，投影场景通用 |
| 记录（日期/姓名/方式） | 换成计分、答题记录、考勤 |
| CSV(BOM) + JSON 双导出 | 保留，Excel 打开不乱码 |
改造成本最低的四个衍生工具：课堂计时器 / 随机分组 / 提问计分板 / 单词抽背。
做法（五步）
- 先定一条主线：这个工具解决哪一个动作？「点名」就只做点名，别顺手加计时。
- 抄模板改文案与数据：结构、样式、存储层都别重写，改
SUBJECT/名单字段即可。 - 本地存储加降级：
try { localStorage.setItem(...) } catch(e) { memStore = ... }。 - 导出带 BOM：
new Blob(['\ufeff' + csv], {type:'text/csv'})，否则 Excel 中文乱码。 - 跑三层验证（见下），三层都过再交给老师。
三层验证法（跳过必翻车）
第一层 · Node vm + DOM 桩（主力）
语法检查通过 ≠ 能跑。render() 里一个 appendChild(null) 就整页白屏，node --check 永远发现不了。
所以要在伪造的 DOM 上真跑一遍脚本，然后对内部状态做断言。
node references/smoke_dom_template.js assets/rollcall-template.html
断言至少覆盖：脚本无异常、初始渲染出节点、点「开始」后状态变化、名单为空时不崩、导出函数可调用。
第二层 · 无头截图（视觉复核）
# Windows 自带 Edge
"C:/Program Files (x86)/Microsoft/Edge/Application/msedge.exe" \
--headless=new --disable-gpu --window-size=1280,800 \
--screenshot=shot.png "file:///D:/path/tool.html"
看图确认：没有白屏、文字没溢出、按钮在首屏可见（投影场景别要求滚动）。
第三层 · 计数器探针（性能）
在渲染循环里插一个计数，跑 100 次操作看是否重复渲染/内存泄漏。
课堂工具卡顿通常来自「每次操作都重建整张列表」，改成只更新变化的那一行即可。
常见坑
- 空数据崩：只有「有名单」时测过，删光名单就报错。必须专门测空状态。
localStorage在file://下不可用：不 try/catch 就是白屏。- 全屏 API 需要用户手势：不能在
load时自动全屏，必须绑在按钮上。 - 音效：用 Web Audio 合成，别引外部 mp3（离线会失效）。
- 字体：用系统字体栈（
"Microsoft YaHei", "PingFang SC", sans-serif），别引在线字体。
交付话术
> 双击就能用，不用装任何东西，断网也能跑。名单可以直接批量粘贴进去，记录能导出成 Excel。
> 建议放 U 盘带一份，机房电脑都能开。
