前端抽象

抽象思维帮助我们高效地解决许多问题。能够说 A 类似于 B，有助于我们低成本地导出在 A 中开发的解决方案来解决 B。这进一步完善了抽象模式，使其更加健壮和可重用（进化！）。

为了解决天文学问题，古希腊人发展出了研究三角形几何的抽象模式——三角学。如今，三角学帮助我们解决从建筑建造到电路电流测量等各种问题。

编程中的抽象：

编程的主要目标之一是编写尽可能精确地模拟现实世界流程的代码。更高的精度可以保证代码无错误，并且在大多数情况下都能正常运行。

示例：比较两个日期以找出哪个日期比另一个日期早。

方案一：

• 以字符串格式“YYYY-MM-DD hh:mm:ss”写入日期
• 进行字符串比较 date1 < date2 来找到答案

这种简单的字符串比较是底层进程的代理模型。因此，当程序和进程彼此分离时（在 Y-10k 时），它有崩溃的趋势。

方案2：

• 将日期作为您最喜欢的编程语言的日期对象获取
• 根据您的编程语言进行必要的比较

现在，我们通过更接近所需流程进行日期比较，实现了非常精确的结果。除了一些技术性机器问题（例如浮点数！）外，我们基本上都能得到正确的答案。

编程中的抽象模式为我们提供了工具/思维模型，它们非常通用且灵活，能够精确地模拟许多有价值的应用。好的抽象很难在长期的共同努力下开发和演进。

在我看来，以下是前端/UI 开发领域中最突出的抽象。

1. 事件

历史经验表明，Netscape 未能成功让其他编程语言在浏览器环境中运行。为了构建更具动态性的网络，现有的编程语言缺乏对用户交互至关重要的响应能力。

为了解决这个问题，Netscape 提出了事件驱动架构（JavaScript 迄今为止最强大的方面）。
用户交互独立于程序本身，并触发程序的各种功能，因此将这些交互抽象为程序事件，有助于开发出足够的响应机制来应对临时的用户请求。

事件被证明是一种极其强大的抽象，也是 JavaScript 在 Web 开发（客户端和服务器端）中取得成功的主要驱动力。为了帮助机器在不可靠的网络上进行通信，事件提供了必要的解耦，允许程序在不同的机器上独立工作，并在需要时响应请求。

阅读：事件如何帮助设计 Redux 存储。

2. 州

在前端领域，下一个重大发展发生在2005年2月18日，当时发布了《Ajax：一种新的Web应用程序方法》。为了开发更具响应性的Web并增强用户体验，应用程序的客户端显然需要分担更多的工作负载。

此外，为了向用户提供更直观的体验，应用程序需要根据用户在应用程序使用界面中对其状态的期望有条件地做出响应。

为了开发更复杂、更丰富的客户端，需要更可预测的状态管理。可预测的状态管理一直是三大前端项目（Angular、React 和 Vue）的核心价值主张。

3.效果

React 开发团队中的优秀人才发现了前端开发人员工具包的下一个主要抽象：Effect（useEffect）。

结合状态和效果，开发人员能够更轻松地开发复杂的应用程序。希望开发人员能够告别那些需要贴在墙上才能提高效率的复杂生命周期管理规则和流程图的时代！

考虑常规全选复选框场景的以下行为（3 个复选框：红色、绿色和蓝色，以及 1 个全选复选框）：

• 当选中“全选”时，所有其他复选框也应被选中。
• 当取消选中“全选”时，所有其他复选框也应取消选中。
• 如果选中任何红色、绿色和蓝色会导致选中所有红色、绿色和蓝色，则应自动选中“全选”。
• 当选中所有复选框时，取消选中红色、绿色和蓝色中的任意一个都应该取消选中全选。

以下是解决这个问题的两种方法：

a. 仅使用与选中相关的事件，并有条件地执行未被点击的框的自动选中。b
. 在任何选中事件之后使用效果来完成其他框的自动选中。

全选点击事件函数在这两个解决方案中很常见：

• 勾选 – 勾选全选、红色、绿色和蓝色
• 取消选中时 – 取消选中全选、红色、绿色和蓝色

A. 仅事件抽象

红色复选框的点击事件：

• 我们需要覆盖默认检查行为（仅选中/取消选中点击的框）。
• 有条件地测试其他框的状态并相应地执行操作。

虽然此代码解决了该问题，但它存在以下问题：

• 难以维护：开发人员在阅读和理解此代码时会经历一些认知压力。
• 开发人员需要小心选择他们正在为哪个复选框（红色、绿色或蓝色）编码，并相应地调整代码——这又会造成认知压力并容易出错。
• 开发人员在添加新的复选框或删除任何复选框时需要非常小心。

B. 使用 Effect 与事件

红色复选框的点击事件：

• 单击红色时默认检查行为（仅选中/取消选中）为红色。
• 如果使用像 Formik 这样的库，我们可以免费获得这种行为，而无需编写任何点击事件函数！

点击事件后的效果

• 测试所有复选框的状态，如果全部选中，则选中全选框。
• 否则，取消选中“全选”框。

这个解决方案的优点在于：这个程序帮助我们更精确地模拟问题陈述。在与复选框的任何交互中，用户期望：

• 当红色、绿色和蓝色全部被选中时，全选将被选中
• 当红色、绿色和蓝色中任意一个未被选中时，“全选”将被取消选中

这正是 Effect 帮助我们编写代码的地方，从而提高了程序的精确度。
在这段代码中添加和删除复选框非常简单，我们只需要在 effect 函数中添加新的复选框状态，并在全选点击事件函数中添加即可。

结论——回忆录

在为客户开发一个复杂的表单时，我遇到了很多修复遗留代码的挑战。此外，修改代码总是会带来很大的麻烦。根据与产品负责人的多次沟通，我预期的需求如下：

• 当我单击此复选框时，这些其他字段应该会出现。
• 当用户填写了这些字段后，其他字段应该被禁用。

一遍又一遍地阅读（实际上是痴迷地阅读！）这些需求，我突然意识到，所有后验行为实际上都是结果！而且，这样建模可以得到更直观、更易于维护、更少错误的代码！

我想通过这篇文章来强调有效使用效果的好处。不妨把它命名为“有效地使用效果”之类的。然而，我采取了一种更复杂的方式，将效果与其他众所周知的主流 UI 抽象放在同等重要的位置，再次强调，这只是我个人的观点。

建议：在设计 UI 时，请尝试从以下三个方面来表达用户的期望：

• 用户使用您的应用程序时将触发什么事件。
• 维护对您的业务/用户体验至关重要的状态。
• 某些状态变化或事件发生后预计会产生什么影响。

这些步骤帮助我编写了更好的代码，希望它们也能对您有所帮助。