带您走近Hyperscript：重新思考JavaScript

灰太狼 2024-02-20 08:40 2阅读 0赞

我们当中一些人也许还记得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元素被加载时，发送一个异步请求到'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", x
    end

这个例子还让我们看到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一样，这种语言有助于改善在互联网上进行开发的整体体验。

### **2023年流行的技术框架，开发者可以参考** ###

低代码开发是近年来在网络开发领域备受关注的一个趋势。低代码开发是指使用最少的编程代码来开发应用程序或业务逻辑，这使得即使是没有IT或编程经验的初学者也能快速创建所需的功能。

虽然低代码开发还没有威胁到传统开发者的角色，但不可否认的是，这种趋势正在向低代码(或无代码)开发发展。据美国研究公司Gartner预测，到2024年，约65%的应用开发项目将通过低代码平台开发。这个趋势对于开发者来说是不容忽视的，预计未来几年开发者的工作方式也将逐渐发生变化。

市场上有众多低代码平台，JNPF是一款基于SpringBoot+Vue3的全栈开发平台，采用微服务、前后端分离架构，基于可视化流程建模、表单建模、报表建模工具，快速构建业务应用，平台即可本地化部署，也支持K8S部署。

应用体验地址：[https://www.jnpfsoft.com/?csdn][https_www.jnpfsoft.com_csdn]，操作一下试试吧！

引擎式软件快速开发模式，除了上述功能，还配置了图表引擎、接口引擎、门户引擎、组织用户引擎等可视化功能引擎，基本实现页面UI的可视化搭建。内置有百种功能控件及使用模板，使得在拖拉拽的简单操作下，也能大限度满足用户个性化需求。由于JNPF平台的功能比较完善，本文选择这项工具进行展开，使你更加直观看到低代码的优势。

[https_www.jnpfsoft.com_csdn]: https://www.jnpfsoft.com/?csdn