译者 | 布加迪
审校 | 重楼
我们当中一些人也许还记得HyperCard，这是编程语言进化体系中一个有趣的分支。如果您上了一定的年龄，甚至还可能用HyperCard学过编程。Hyperscript是一种比较新的技术，它具有HyperCard的一些优点，特别是它的简洁性和类似英语的语法，并将HyperCard运用于浏览器环境。它是一种JavaScript替代技术，可以独立使用，也可以结合HTML使用，以简化JavaScript前端的常见脚本需求。
一个示例胜过千言万语
在我们展开讨论之前，不妨看一个Hyperscript示例，它传达了本质：
Using fetch() API...这段代码的作用非常明显。下划线属性是表示Hyperscript的特殊属性。在JavaScript中，同样的这项功能可能看起来像这样：
在英语中，它表示：“当div元素被加载时，发送一个异步请求到'https://stuff'，并将结果放入到div中。”但愿您已经明白Hyperscript在行为上感觉几乎像是HTML的扩展。
Hyperscript简介
Hyperscript是一种简化的、更像英语的JavaScript。您还可以将其视为一种特定领域语言（DSL）。从本质上来讲，Hyperscript将JavaScript简化为一种语法，明确用于满足构建前端UI时重复出现的常见需求。它带来了一堆约定，使这种代码编写更简洁。
Hyperscript是HTMX的近亲，出自同一个开发者Carson Gross的奇思妙想。这两个项目都反映了Gross力求简洁，以及他坚持不懈地将其运用于庞大且活跃的问题空间这一整体思路。在HTMX中，我们看到了功能更强大的HTML，可以消除过去十年中发展起来的复杂性，因为开发人员已经接受了响应式框架+ JSON +类似REST的API这种前端范式。在Hyperscript中，我们看到了JavaScript语言复杂性永无止境扩展之外的另一种选择。这是一种诱人的方案。
处理前端复杂性
在生产一线编写代码的前端开发人员肯定有一种不知所措的感觉。谁不想用一种易于记住的表达式语言来取代样板JavaScript？您只需要凭记忆敲出一些代码，无需引用任何其他，即可执行日常的基本编码。
不妨举一个例子。在下面的Hyperscript代码片段中，规范的button-click-counter示例变成：
Click Me
--这是使用React的同一个示例：
import React from "react";
const Counter = () => {
const [x, setX] = React.useState(0);
const handleClick = () => {
setX((prevX) => {
if (prevX Send Foo
Send Bar
No Events Yet...
反应式编程是编程史上的一条重要主线，Hyperscript完全欣然接受了它。在这个示例中，我们可以看到Hyperscript如何处理异步事件。事件系统非常强大，包括一系列响应式功能，比如过滤、事件消息对象和队列等。
您还可以看到短语“下一个”能够引用DOM中的另一个元素，具体是指下一个元素，并将事件发送给它。这是一种非常简洁而明显的方式，否则处理起来相当冗长而笨拙，或者至少需要一些响应式连接。这是Hyperscript如何有意消除关注点分离的一个例子。
循环、条件和日志记录
在一些前端环境（比如JSX for React）中，循环可能会很棘手。下面是Hyperscript中的循环示例：
for x in [1, 2, 3] index i
log i, "is", x
end这个例子还让我们看到Hyperscript如何处理日志记录。它非常简单，使用逗号分隔的值。
我们已经看到了Hyperscript如何处理带有else的if命令。请注意，它以End关键字结束（除非您在脚本的末尾，就像在元素属性上发生的那样）：
if :x
