这节课会真正交付一个能使用的小工具。你将从一句需求开始,先写验收用例,再完成最小版本、复现错误、修复并整理交付记录。
练习项目:文本行数统计器
用户粘贴一段文本后,页面立即返回总行数、非空行数和字符数。文本只在浏览器本地处理。
第一版必须完成
- 粘贴或输入纯文本
- 统计总行数和非空行数
- 统计 Unicode 字符
- 清楚说明统计口径
- 支持手机和键盘操作
现在明确不做
- 账号、登录和云同步
- 上传文件和保存历史
- 富文本、PDF 和复杂导出
- 主题系统和后台配置
- 没有真实需求证明的扩展
要解决的问题:快速统计一段文本的行数和字符数。 使用者:需要清理文稿、字幕或名单的普通用户。 运行位置:浏览器本地。 输入:任意纯文本。 输出:总行数、非空行数、字符数。 隐私:不上传、不保存输入内容。 空状态:三个结果均为 0。 不做:账号、上传、云保存、富文本、PDF、主题配置。 完成条件: 1. 三个验收用例全部实际运行; 2. 320px 手机页面不横向溢出; 3. 键盘可以访问输入框和按钮; 4. 页面说明统计口径和隐私边界。
第一步:先写能够判定成败的用例
“看起来能用”无法验收。每条用例必须有明确输入和预期结果。
输入: 第一行 第三行 预期: 总行数 3 非空行数 2
输入:空字符串 预期: 总行数 0 非空行数 0 字符数 0
输入: 你好 😀 预期: 页面正常显示 统计口径明确 不出现乱码
用例名称: 准备条件: 输入: 操作步骤: 预期输出: 实际输出: 结果:通过/失败 失败证据: 修复后复测:
第二步:只让 AI 实现当前用例需要的功能
请实现一个浏览器本地运行的文本统计器。 必须功能: - 一个带明确标签的多行文本输入框; - 实时显示总行数、非空行数和字符数; - 完全空白时三个结果均为 0; - 统一处理 Windows 和 Unix 换行符; - 提供“载入测试样例”和“清空”按钮; - 说明内容不上传,以及字符统计口径。 统计规则: - 总行数包含空白行; - 只含空格的行不计入非空行; - 字符数按 Unicode 码点计算,换行符计入; - 不使用外部服务,不增加账号、保存和上传。 先运行我提供的三个验收用例,再报告结果。不要只回复代码。
粘贴任意非敏感文本。内容只在当前浏览器中统计,不上传、不保存。
可运行成果:文本行数统计器
0总行数
0非空行数
0字符数
统计口径
第三步:复现一个常见的“空文本等于 1 行”错误
错误实现
text.split("n").length
JavaScript 中,空字符串拆分后会得到一个元素,所以结果是 1。代码没有报错,但违反了空状态用例。
正确判断
text === "" ? 0 : text.split("n").length
先处理业务定义中的空状态,再执行一般统计规则。
验收用例“完全空白”失败:当前总行数返回 1,预期为 0。 请先解释根因,再做最小修改: 1. 空字符串时总行数、非空行数和字符数均返回 0; 2. 非空文本仍按换行符拆分; 3. 不重构无关代码,不增加新功能; 4. 修复后重新运行全部三个用例,报告修改前后结果。
第四步:交付的不只是代码
用户应该不用阅读源码,就知道工具解决什么、如何操作、数据去哪里、统计规则是什么,以及出现问题如何复测。
可运行页面直接打开即可使用
使用说明输入、输出和口径
验收记录三个用例的实际结果
限制说明明确不支持的范围
工具名称: 解决的问题: 运行地址或打开方式: □ 三个验收用例已实际运行并记录结果 □ 首次使用者不看源码也知道如何操作 □ 空状态、空行、中文和 emoji 均已测试 □ 页面说明统计口径和隐私处理方式 □ 320px 手机页面无横向溢出 □ 键盘可访问输入框和所有按钮 □ 没有密钥、测试数据或本地绝对路径进入交付包 □ 临时测试文件和无用产物已处理 □ 未增加规格之外的账号、上传和云保存 已知限制: 失败用例: 修复记录: 验收人: 验收日期:
完成本课的标准
- 先手工运行三个用例,确认当前页面结果。
- 理解空字符串为什么可能被错误计算为 1 行。
- 复制开发任务,为自己的小工具重写输入、输出和验收条件。
- 只有实际使用出现重复问题时,才进入下一轮功能扩展。
为什么这个小工具足够作为第一课
它包含了真实开发中最重要的部分:范围控制、边界条件、可重复测试、隐私说明、响应式界面和交付记录。项目虽小,但方法可以迁移到查询器、转换器和个人工作工具。