---
title: "5.4.3 功能扩展"
order: 4
---


![05-advanced_5.4-iteration_5.4.3-new-features.png](/images/Basic/05-advanced_5.4-iteration_5.4.3-new-features.png)
# 5.4.3 功能扩展：让 AI 帮你添加新功能

经过本节学习，你将掌握：
- 常见的功能扩展方向和难度评估
- 用第三章学到的框架写功能扩展 Prompt
- 添加新功能的安全流程
- 一个完整的功能添加实战案例

## 功能扩展方向参考

收集完反馈后，你可能想给待办清单加一些新功能。

下面是一些常见的扩展方向，按难度分类：

### 基础级功能（推荐先尝试）

| 功能 | 难度 | 说明 |
|------|------|------|
| 任务分类标签 | ⭐⭐ | 给任务打上"工作"、"生活"、"学习"等标签，可以按标签筛选 |
| 优先级标记 | ⭐⭐ | 高/中/低优先级，用不同颜色区分 |
| 搜索功能 | ⭐⭐ | 任务多了之后能快速找到 |
| 深色模式 | ⭐⭐ | 晚上看着不刺眼 |

### 进阶级功能（有一定挑战）

| 功能 | 难度 | 说明 |
|------|------|------|
| 截止日期提醒 | ⭐⭐⭐ | 设置截止时间，过期任务标红 |
| 任务排序 | ⭐⭐⭐ | 可以拖拽调整任务顺序 |
| 数据导出 | ⭐⭐⭐ | 把任务列表导出成文件 |
| 简单统计 | ⭐⭐⭐ | 显示"本周完成了多少任务" |

建议从基础级功能开始。成功添加一两个之后，再挑战进阶级。

## 添加新功能的安全流程

在动手之前，有一个重要原则：

::: warning 黄金法则
**每次添加新功能前，先保存当前版本。**
:::

按照这个流程操作：

```
1. 确认当前版本能正常运行
       ↓
2. 用 GitHub Desktop 提交一次（Commit）
       ↓
3. 写 Prompt 让 AI 添加新功能
       ↓
4. 测试新功能
       ↓
5. 如果成功 → 再 Commit 一次
   如果失败 → 回滚到上一版
```

这样，即使新功能改崩了，你也能随时恢复。（这就是 5.1 节学的版本管理的用处）

## 用 S.C.A.F.F. 框架写功能扩展 Prompt

还记得第三章的 S.C.A.F.F. 框架吗？添加新功能时同样适用。

### 框架回顾

| 字母 | 含义 | 说明 |
|------|------|------|
| **S** | Situation（情境） | 当前项目是什么样的 |
| **C** | Challenge（挑战） | 我想添加什么功能 |
| **A** | Ask（请求） | 具体需要 AI 做什么 |
| **F** | Format（格式） | 希望得到什么样的输出 |
| **F** | Filter（过滤） | 有什么限制条件 |

### 示例：添加分类标签功能

```
【情境】
我有一个待办清单项目，目前实现了：
- 添加任务
- 删除任务
- 标记任务完成
- 使用 localStorage 保存数据

技术栈：HTML + CSS + JavaScript（纯前端，没有后端）

【挑战】
我想给任务添加"分类标签"功能。用户可以：
1. 创建任务时选择一个分类（工作/生活/学习）
2. 按分类筛选任务
3. 每个分类用不同的颜色显示

【请求】
请帮我修改代码实现这个功能。

【格式】
1. 先说明需要修改哪些部分
2. 给出修改后的完整代码
3. 说明如何测试这个功能

【限制】
- 保持现有功能不变
- 使用现有的代码风格
- 分类数据也要保存到 localStorage
```

## 各功能的 Prompt 模板

这里提供几个常用功能的 Prompt 模板，你可以直接复制使用，只需要把 `[方括号里的内容]` 替换成你的实际情况。

### 优先级标记

```
我的待办清单项目需要添加"优先级"功能：
- 每个任务可以设置优先级：高/中/低
- 高优先级用红色标记，中优先级用黄色，低优先级用灰色
- 默认优先级是"中"
- 可以按优先级排序显示（高的在上面）

当前项目技术栈：[HTML + CSS + JavaScript / 其他]
数据存储方式：[localStorage / 其他]

请修改代码实现这个功能，保持现有功能正常。
```

### 搜索功能

```
我的待办清单需要添加搜索功能：
- 在任务列表上方添加一个搜索框
- 输入关键词时，实时筛选包含该关键词的任务
- 搜索框为空时显示所有任务
- 搜索不区分大小写

当前项目技术栈：[你的技术栈]

请给出实现代码。
```

### 深色模式

```
我的待办清单需要添加深色模式切换功能：
- 在页面右上角添加一个切换按钮（太阳/月亮图标）
- 点击可以在浅色/深色模式之间切换
- 记住用户的选择（下次打开还是同样的模式）

当前的颜色方案：
- 背景色：[白色]
- 文字颜色：[黑色]
- 主题色：[蓝色]

请给出实现代码，包括深色模式的配色建议。
```

### 截止日期

```
我的待办清单需要添加截止日期功能：
- 创建任务时可以选择截止日期（可选，不是必填）
- 任务卡片上显示截止日期
- 已过期的任务用红色高亮显示
- 今天到期的任务用黄色高亮显示

当前项目技术栈：[你的技术栈]
数据存储方式：[localStorage / 其他]

请给出实现代码。
```

## 实战案例：添加分类标签

下面是一个完整的对话记录，展示如何给待办清单添加分类标签功能。

### 第一轮：说明需求

你发送的 Prompt（使用上面的 S.C.A.F.F. 模板）后，AI 会返回修改方案和代码。

### 第二轮：测试发现问题

测试后，你可能发现问题：

```
分类功能基本可以用了，但有个问题：
切换分类筛选时，如果当前分类下没有任务，页面是空白的，用户会困惑。

请添加一个提示，当筛选结果为空时显示"暂无任务"。
```

### 第三轮：微调细节

```
现在"暂无任务"的提示可以显示了，但文字颜色太浅，不太明显。
请把提示文字改成灰色，并加粗显示。
```

这就是迭代的过程：做一版 → 发现问题 → 再改进。

## 测试新功能的检查清单

每次添加新功能后，用这个清单验证：

- [ ] 新功能按预期工作
- [ ] 原有功能（添加、删除、完成任务）仍然正常
- [ ] 刷新页面后数据没有丢失
- [ ] 在手机浏览器上也能正常显示
- [ ] 没有明显的报错（打开浏览器控制台检查）

全部通过后，记得用 GitHub Desktop 提交一次，记录这个里程碑。

## 遇到问题时

如果 AI 给的代码不能正常工作，可以这样反馈：

```
你给的代码运行后出现了问题：

【问题描述】
点击分类筛选按钮后，页面变成空白，所有任务都不显示了。

【错误信息】
打开浏览器控制台，看到这个报错：
Uncaught TypeError: Cannot read property 'filter' of undefined

【期望行为】
点击"工作"分类，应该只显示标记为"工作"的任务。

请帮我找出问题并修复。
```

提供具体的问题描述和错误信息，AI 更容易帮你解决。

## 本节要点

- 从基础级功能开始，成功后再挑战进阶级
- 每次改代码前先 Commit，改崩了能恢复
- 用 S.C.A.F.F. 框架写功能扩展 Prompt
- 添加功能是一个迭代过程，一轮不行就多轮
- 测试通过后记得再 Commit 一次

::: tip 小步前进
不要一次性加太多功能。

每次只加一个，测试通过后再加下一个。

这样出问题时，你能很快定位是哪个改动导致的。
:::

→ [5.4.4 代码优化：让 AI 帮你改进代码质量](./5.4.4-optimize.md)