Hyperapp：用于构建前端应用程序的 1 KB JavaScript 库

Hyperapp是一个用于构建功能丰富的 Web 应用程序的 JavaScript 库。它将实用的、受Elm启发的状态管理方法与支持键控更新和生命周期事件的 VDOM 引擎相结合——所有这些都没有依赖性。增加或减少几个字节，压缩和压缩后的整个源代码大约为 1 KB。 在本教程中，我将向您介绍 Hyperapp 并引导您完成一些代码示例，以帮助您立即入门。我假设您对 HTML 和 JavaScript 有一定的了解，但不需要具备其他框架的经验。 你好世界 我们将从一个简单的演示开始，展示所有移动部件的协同工作。 您也可以在线尝试该代码。 应用程序或多或少都是这样的。单个状态对象、填充状态的操作以及将状态和操作转换为用户界面的视图。 在应用程序函数内，我们复制您的状态和操作（改变我们不拥有的对象是不礼貌的）并将它们传递给视图。我们还包装您的操作，以便每次状态更改时它们都会重新呈现应用程序。



状态是一个简单的 JavaScript 对象，用于描述您的应用程序数据模型。它也是一成不变的。要更改它，您需要定义操作并调用它们。  在视图内部，您可以显示状态的属性，使用它来确定 UI 的哪些部分应该显示或隐藏等。 您还可以将操作附加到 DOM 事件，或在您自己 WhatsApp 号码数据 的内联事件处理程序中调用操作。  操作不会直接改变状态，而是返回状态的新片段。如果您尝试改变操作内的状态然后返回它，则视图将不会像您预期的那样重新渲染。 应用程序调用返回连接到状态更新视图渲染周期的操作对象。您还可以在视图函数和操作中接收此对象。向外界公开这个对象非常有用，因为它允许您从另一个程序、框架或普通 JavaScript 与您的应用程序进行对话。关于 JSX 的说明 为了熟悉起见，我将在本文档的其余部分中使用JSX，但您不需要将 JSX 与 Hyperapp 结合使用。替代方案包括内置h函数 hyperapp hyperx和t7。



这是上面使用的相同示例。 是对 DOM 外观的描述，使用称为虚拟节点的嵌套 JavaScript 对象树。 应用程序的虚拟 DOM 树是在每个渲染周期从头开始创建的。这意味着每次状态改变时我们都会调用视图函数并使用新计算的树来更新实际的 DOM。 我们尝试通过将新的虚拟 DOM 与前一个虚拟 DOM 进行比较，以尽可能少的 DOM 操作来完成此操作。这会带来高效率，因为通常只有一小部分节点需要更改，并且与重新计算虚拟 DOM 相比，更改真实 DOM 节点的成本很高。 为了帮助您更紧凑地创建虚拟节点，Hyperapp 提供了该h功能。  创建虚拟节点的另一种方法是使用JSX。JSX 是一种 JavaScript 语言扩展，用于表示动态 HTML。 浏览器不理解 JSX，因此我们需要将其编译为h函数调用，因此需要 importh语句。让我们使用babel看看这个过程是如何工作的。