带您走近Hyperscript：重新思考JavaScript

译文 作者： 布加迪 2023-10-26 08:00:00开发 前端 Hyperscript是重新一种比较新的语言，用于满足JavaScript前端常见的思考脚本需求。它可以单独使用，重新也可以结合HTMX使用。思考

译者 | 布加迪

审校 | 重楼

我们当中一些人也许还记得HyperCard，重新这是思考编程语言进化体系中一个有趣的分支。如果您上了一定的重新年龄，甚至还可能用HyperCard学过编程。思考Hyperscript是重新一种比较新的技术，它具有HyperCard的思考一些优点，特别是重新它的简洁性和类似英语的语法，并将HyperCard运用于浏览器环境。思考它是重新一种JavaScript替代技术，可以独立使用，思考也可以结合HTML使用，重新以简化JavaScript前端的常见脚本需求。

一个示例胜过千言万语

在我们展开讨论之前，不妨看一个Hyperscript示例，它传达了本质：

<div _="init fetch https://stuff as json then put result into me">Using fetch() API...</div>

这段代码的作用非常明显。下划线属性是表示Hyperscript的特殊属性。在JavaScript中，同样的这项功能可能看起来像这样：

<div id="myDiv" onload="async function() {   const response = await fetch('https://stuff', {   headers: {  Accept: 'application/json', } });  const data = await response.json();  myDiv.innerHTML = JSON.stringify(data); }"></div>

在英语中，它表示：“当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示例变成：

<button _="on click increment :x if :x <= 3 put :x into the next <output/> else put '3 is the max...' into the next <output/> end">Click Me</button><output>--</output>

这是使用React的同一个示例：

import React from "react";const Counter = () => {  const [x, setX] = React.useState(0); const handleClick = () => {  setX((prevX) => {  if (prevX <= 3) {  return prevX + 1; } else {  return 3; } }); }; return ( <div> <button onClick={ handleClick}>Click Me</button> <output>{ x}</output> </div> );};export default Counter;

当然，更短小并不意味着更简单。与React相比，Hyperscript的自描述性更明显。现在有人可能会说，React更复杂，因为功能更强大。它是一种使复杂程序成为现实的语言。但在这里，我们只需看看与Hyperscript相比最常见的JavaScript前端开发方法（即React）。我们关注的是可以简化、也应该简化的日常活动。

Hyperscript的目的在于取代JavaScript。或许用精细化这个词更合适。Hyperscript的开发者Caron Gross特别指出，这是一个“投机性”的项目。不过，它也是经过深思熟虑、功能强悍又雄心勃勃的项目。你可以想象使用Hyperscript的企业级应用程序。

Hyperscript最大的障碍可能是开发人员普遍熟悉和依赖JavaScript。当然，它有时会令人困惑和棘手。如果Hyperscript真的流行起来，对大多数项目而言，它可能会与JavaScript结合使用。

Hyperscript中的异步事件

不妨看看Hyperscript如何处理事件：

<button _="on click send foo to the next <output/>">Send Foo</button><button _="on click trigger bar on the next <output/>">Send Bar</button><output _="on foo put 'I got a foo event!' into me on bar put 'I got a bar event!' into me">No Events Yet...</output>

反应式编程是编程史上的一条重要主线，Hyperscript完全欣然接受了它。在这个示例中，我们可以看到Hyperscript如何处理异步事件。事件系统非常强大，包括一系列响应式功能，比如过滤、事件消息对象和队列等。

您还可以看到短语“下一个<输出/>”能够引用DOM中的另一个元素，具体是指下一个<输出/>元素，并将事件发送给它。这是一种非常简洁而明显的方式，否则处理起来相当冗长而笨拙，或者至少需要一些响应式连接。这是Hyperscript如何有意消除关注点分离的一个例子。

循环、条件和日志记录

在一些前端环境（比如JSX for React）中，循环可能会很棘手。下面是Hyperscript中的循环示例：

for x in [1, 2, 3] index i log i, "is", xend

这个例子还让我们看到Hyperscript如何处理日志记录。它非常简单，使用逗号分隔的值。

我们已经看到了Hyperscript如何处理带有else的if命令。请注意，它以End关键字结束（除非您在脚本的末尾，就像在元素属性上发生的那样）：

if :x <= 3 put :x into the next <output/>else put '3 is the max...' into the next <output/>End

Hyperscript还支持unless修饰符，它可以引用CSS属性：

<button _="on click toggle .bordered on #second-button">Toggle Next Border</button><button id="second-button" _="on click toggle .red unless I match .bordered">Toggle My Background</button>

该代码块使第二个按钮改变颜色，除非它有.bordered类。这是用CSS和HTML非常简洁地处理了一些原本笨拙的JavaScript代码。

行为局部性

灌输给新程序员的原则之一是所谓的关注点分离（SoC）。大多数时候，这个原则是正确的。通过实现SoC，我们得到了解耦的组件，而这使得系统更具有弹性。然而，还有一股反潮流需要考虑，那就是Gross所谓的行为局部性。他在Hyperscript中融入了这个想法，您也会在Tailwind等其他项目中发现它的身影。

这里的想法是，分离关注点实际上会使系统更难以遵循。前端的关注点分离通常意味着将标记（视图）放在一处，将JavaScript（行为）放在另一处，将CSS（表示）放在另外一处。这么做在设计上的好处值得怀疑。SoC通常在更注重架构的情况下发挥作用。

不过，在基于HTML、CSS和JavaScript的项目中，必须在上下文之间跳转并始终牢记任务的线程通常很麻烦。这实际上是JSX吸引人的地方之一，也是样式组件（Styled Components）框架背后的动因。

违反关注点分离

Hyperscript拿来您会提取到JavaScript中的大量繁琐工作，将其包装在Hyperscript语法中，因此您可以将相当复杂的功能直接内联到标记中。这样一来，就很容易将内容放在一起，并使它们更具自文档性。

缺点是，如果需要改变内置语法之外的行为，可能会有问题。换句话说，如果您需要直接可以操作，会发现强耦合组件依赖Hyperscript引擎本身，您必须对其进行修改。

我没有在一个大型的真实项目中使用过Hyperscript，所以没法直接表态。然而，该语言支持可扩展性。

还可以并行运行JavaScript和Hyperscript，这样就给了您逐步改进的余地。对我来说，这也提出了一个问题：在React、Svelte或Vue项目中并行运行这些语言会是什么情况。

结论

当我开始使用Hyperscript时，极其怀疑。然而，我逐渐被Hypserscript的感觉所吸引。我认为它会很快取代JavaScript吗？不会，我不这么认为。但是我可以设想HTMX和Hyperscript极大地简化JavaScript前端的场景。

这种竭力追求一种更简单的编程范式的做法，我称之为应用常识（applied common sense）。通过质疑假设并将我们学到的一切推倒重来，也许我们就能构建更好的工具。

我们知道的一件事是，复杂性扼杀了软件的创造力和生产力。作为工程师，我们永远面临在抽象中构建的风险，这是复杂性的最后一根稻草——它会扼杀我们的项目。

有时候我们接触某项技术只是因为我们就喜欢它，这种工具随之有了自己的生命。React等工具变成了产品。这在某些情况下是可以的，但在其他情况下，像Hypserscript这样更简单的替代方法可能更好。

至少，Hyperscript有新的想法可以贡献。像HTMX一样，这种语言有助于改善在互联网上进行开发的整体体验。

原文标题：Intro to Hyperscript: Rethinking JavaScript，作者：Matthew Tyson

责任编辑：华轩 来源： 51CTO HyperscripJavaScript前端

(责任编辑：休闲)