背景
技术方案，不是后端才需要写么？为什么前端也需要？有必要么？
为什么
技术实现受个人水平的限制
不管如何，一个需求的实现所使用的技术方案受限于这个人的具体的技术水平，这个是不可变的。
那么在这个人的技术水平里有明显的几点会影响这个方案本身，比如：
- 可用于选型的范围
- 选型本身的可靠性
- 对需求的理解程度，当前选型是否能够长期支持需求
- 针对这个方案，实施遇到的细节问题是否有考虑到位
- 是否具有良好的编程风格
- 是否具有良好的设计模式
研发的过程留档
从文档也是研发重要交付产物的理念里，我们知道文档是非常重要的部分，而技术方案是从需求到产出代码的桥梁，也是我们发布评审或者代码评审的依据。
良好的技术方案设计，是产品全流程开发中重要的组成，也是产品持续稳定迭代的基本保证。
怎么写
概述 + 名词解释
描述需求背景，可以借鉴产品的描述。
对其中的产品名词进行理解和进一步阐述，包括语义化的和专业化的。
整体节点
基本排期，责任人：
| 重要节点 | 时间节点 | 占比 | 文档（带版本以及日期） | 检查人 |
|---|---|---|---|---|
| 需求评审 | ||||
| ui评审 | 需要分析ui的细节是否影响前端工作量，如果影响，其范围是 | |||
| 接口评审 | ||||
| 系分（前端评审） | 0.5-1天，调研额外排期 | |||
| 测试用例评审 | 所有的一级功能，二级功能，边界情况必须包括，自测的依据 | |||
| 开发 | 80% | |||
| 自测 | 20% | |||
| 测试周期 | 20% | |||
| 上线时间 |
相关文档
此次技术方案的所有的参考文档，作为本次方案的理论基础，选型基础。
备注：包括但不局限于官方文档，团队内文档，团队外文档，相关说明等
方案总体设计
针对业务流程，画流程图；
针对复杂的领域模型的状态变化，画状态图；
针对不同领域的交互，画泳道图；
针对复杂的技术方案，画架构图，流程图，类图等；
针对复杂的交互，画或者完善用户交互图；
任务拆解 -- 估时
针对每个任务给出基本的细分，并给出基本的时间，接口，备注内容，是否有待确定项。
任务拆解表格：
| 需求描述 | 优先级（0-5） | 系分 | 估时（小时） | 接口（新增还是修改，还是沿用） | 备注（技术方案，疑问） |
|---|---|---|---|---|---|
| 需求1 | 1 | 需求11 | 2 | 1 | |
| 需求12 | 3 | 1 | |||
| 需求13 | 2 | 1 | |||
| 需求2 | 2 | 需求21 | 2 | 2 | |
| 新建考勤规则 | 1 | 页面逻辑梳理，页面位置，可使用条件，交互逻辑 | 3 | 0 | |
| 静态表单控件 | 4 | 1 | |||
| 控件关联 | 2 | 2 | |||
| 接口联调 | 8 | 8 | 一般情况下，按照单接口1-2小时，包括确认字段，联调正确 | ||
| 自测 | 4 | 流程性功能，复杂功能 | |||
| 总计（1.x为buffer系数） | 18*1.2+8+4 = 34 = 4.25天 ~ 4.5天 |
备注：
1 buffer系数可以参考我的相关文章：链接
2 接口的联调时间可以参考我的相关文章：链接
详细设计
案例 ：本地日记缓存管理
api设计：
- 初始化，实例化存储队列，以日记id为唯一值
- 增加日记，包括队列中增加并更新存储以及存储中增加日记
- 更新日记，存储中更新
- 移除日记，队列中移除更新队列，存储中移除日记
- 获取日记，首先从队列中查看是否具有，降低获取成本，存在的情况下再去获取
注意事项：
1 无论队列还是日记，内外输出的都是对象的格式，不需要存储方案或者业务方做格式转化
2 初始化中，传入的日记id，可以用于方法中获取日记以及删除日记时，直接从实例化中取值，减少参数传递
3 提供单例模式，降低使用成本
4 理论情况下，只建议用户通过存储管理的方式进行日记的增删改查
测试用例（技术交付版）
\
为了方便描述或者交接自己的成果，建议研发针对相应的测试用例整理出自己的技术方案细节是什么（伪代码）。
比如：
| 期望 | 策略 | |
|---|---|---|
| 首次发布日记（没有草稿箱），在编辑，但未点击返回或者离开 | 相应的保存时间内自动保存 | 多新日记有不同的日记id，通过参数判断或者返回体为null判断使用同一固定日记id |
| 首次发布日记，编辑，返回，选择不保存 | 清空本地缓存 | 清空对应id的缓存 |
| 首次发布日记，编辑，返回，选择保存 | 清空本地缓存 | 清空对应id的缓存 |
| 点开草稿箱的日记，编辑 | 有缓存的情况下提示：本地缓存优先还是草稿箱优先？选择对应的策略进行反显 | 提供更新方法，选择对应的数据进行调用 |
| 点开草稿箱的日记，编辑，点击返回，选择保存 | 清空本地缓存 | 清空对应id的缓存 |
| 点开草稿箱的日记，编辑，点击返回，选择不保存 | 清空本地缓存 | 清空对应id的缓存 |
| 发布日记 | 清空本地缓存 | 清空对应id的缓存 |
| 发布日记带指定内容，比如话题 | 优先级高于缓存，进行替换；否则以缓存的为主 | 参数携带默认信息，优先级高于缓存 |
更多
如果你对前端如何写技术方案不清楚，或者对系分之后如何复盘不清楚，可以关注参考我的相关语雀文档：链接
