前言
来思考一个问题，当你掌握了一种技术，怎么样快速入门一门相似的技术呢？比如我会了 React 如何学习 Vue，会了 Antd 如何快速掌握 MUI。
或许我们常常会有这种感觉，新技术知识学的也差不多了，但是一动手就忘，尴尬程度堪比提笔忘字，做个大型项目实战下吧，首先大项目太大了，很难坚持做下来，而且本来就是新手做大项目还没任何头绪。
我想这需要一种基于你所处熟悉的环境，总结出来超越实践的抽象能力，抽象出来几个涵盖面比较广，实战型比较强的案例，我们只要掌握了这几个案例，就能快速掌握新技术的基本语法，比如基于 Vue 技术我们抽象出来加法器，这样上手 Svelte 框架就能快速掌握如何操作数据，而操作数据就是 Vue、Svelte 框架最基础的能力。
加法器算是一种比较基础的抽象能力，我们还可以再进一步高度抽象，抽象到甚至能循着案例去学习，快速入门新技术。
比如 Web 常见的技术 form ，我们简单抽象出来 form，一个 form 应该有：
- 表单数据 initialValues
- 表单校验 validationschema
- 表单提交 onSubmit
只要一个表单满足这三个选项就是一个合格的 form，这时我们进一步的抽象，对 form 继续划分，还有input、textarea、select、treeselect、datapick 等等 form，如果掌握了它们可以说完全掌握了 form。
这时候停下里思考下，你应该能感受到基于基础抽象我们能快速掌握一门技术，基于高级抽象我们能深入这门技术，而且这些都是简单易上手的小案例，完美规避了大项目开发周期长难度大。
今天要介绍的 7GUIs 七个图形用户界面案例 就是对实践编程的一个公共抽象，当你做完了这七个任务，你就能拍着胸脯讲，我掌握了这门技术。
Vue 最新的文档，案例演示部分，就用 Vue 践行了这七个任务，Vue 7GUIs，还有 React 、Svelte、Java 也有各自的实现，你可以在这找到 implementations。
这具体的七个案例是什么呢，我们来看看。
计数器
描述：页面上有一个文本，用来显示计数结果，默认为零，一个按钮，点击按钮让文本加一。
温度转换器
描述：页面有两个输入框，一个叫 TC 一个叫 TF，分别代表摄氏度和华氏度，最初 TC 和 TF 都是空的。当用户在 TC 中输入数值TF 会自动更新，反之亦然。如果非法输入比如输入字符串，则不会自动更新，反之亦然。
-
华氏转摄氏公式：
C = (F - 32) * (5/9) -
摄氏转华氏公式：
F = C * (9/5) + 32
机票预订
描述：第一步构建一个下拉框 C，其中有两个下拉选项“单程航班”和“回程航班”，对应的英文分别为 “one-way flight” 和 “return flight”。
接下来，有两个文本框 T1 和 T2 分别代表启程日期和返程日期。以及一个用于提交预定信息的按钮 B。
默认情况下，C 下拉框选中单程航班，T1 和 T2 一样为当下日期，且 T2 是禁用的，点击按钮 B 显示预定信息，例如此时的预定信息 「您已预订 2022 年 03 月 19 日 的单程航班」。
当下拉框选择为回程航班，T2 禁用接触，T2 的日期严格限制在 T1 之后，否则，T1 标红提示同时按钮禁用。
计时器
描述：页面上有一个进度条叫 G 用来显示流逝了多少时间，具体流逝的时间为 e，还有一个文本以数值的形式显示流逝的时间，除此之外，还有一个滑块叫 S，通过该滑块 S 可以在计时器运行时调整计时器的持续时间 d，以及一个重置按钮 R。调整 S 必须立即反映在 d 上，而不仅仅是在释放 S 时触发。因此，当移动 S 时，G 的填充量（通常）会立即改变。当 e ≥ d 为真，则计时器停止（G 被填满）。如果此后 d 增加，使得 d > e 为真，则计时器重新启动，直到 e≥ d 也是真的。点击 R 将 e 重置为零。
CRUD
描述：首先有一个筛选文本框 T prefix，输入内容用来筛选姓，还有用来创建名的 T name 文本框和创建姓的 T surname 文本框。
一个用来承载姓名的列表框区域 L、以及三个按钮，创建按钮 B C、更新按钮B U 和 删除按钮 B D。
交互逻辑： 我们一次最多只能在 L 中选择一个条目。用户通过在 T prefix 中输入字符串，可以筛选以输入字符串为开头的姓氏，这应该立即发生，而无需使用 enter 提交前缀。
单击 B C 可以根据 T name 和 T surname 的输入内容，组合成一个完整的姓名输入到 L。如果选择了 L 中的条目，则启用 B U 和 B D。
B U 则是更新选中的姓和名，B D 则是删除选中的条目，布局参考截图.
画圆
描述：左键点击画布区域，创建一个直径固定的但未填充圆，左键点击这个圆灰色填充表示选中，右键点击弹出一个弹框，弹框里面包含一个标题 “Adjust diameter...”，还有一个滑块，可以实时更改选中圆的直径。
此外，页面上还有两个按钮撤销和重做，单击撤消或重做都是针对最后一次圆的创建或直径调整。
单元格
描述：这是一个类似 Excel 表格的应用，表格是可滚动的，行的编号从 0 到 99，列的编号从 A 到 Z。点击可编辑单元格，完成编辑后输入的值将更新在单元格中，其中单元格可输入公式，结束之后对公式进行解析和评估，其更新值将显示在单元格中。公式依赖的单元格，当单元格的值更改时，只有依赖这些单元格的公式会自动改变，而不是重新计算每个单元格的值。
我看 Guis
上面的例子确实不错，从最基本的计时器开始，难度渐渐增加，到了最后一个例子单元格，已经初具项目的规模，可自由添加扩展功能。
当然思路也要活泛，基于自己编程语言的特点进行抽象修改，或者基于上面的抽象进行更改。
