譯者 | 布加迪

審校 | 重樓

我們當(dāng)中一些人也許還記得HyperCard，這是編程語言進(jìn)化體系中一個(gè)有趣的分支。如果您上了一定的年齡，甚至還可能用HyperCard學(xué)過編程。Hyperscript是一種比較新的技術(shù)，它具有HyperCard的一些優(yōu)點(diǎn)，特別是它的簡(jiǎn)潔性和類似英語的語法，并將HyperCard運(yùn)用于瀏覽器環(huán)境。它是一種JavaScript替代技術(shù)，可以獨(dú)立使用，也可以結(jié)合HTML使用，以簡(jiǎn)化JavaScript前端的常見腳本需求。

一個(gè)示例勝過千言萬語

在我們展開討論之前，不妨看一個(gè)Hyperscript示例，它傳達(dá)了本質(zhì)：

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

這段代碼的作用非常明顯。下劃線屬性是表示Hyperscript的特殊屬性。在JavaScript中，同樣的這項(xiàng)功能可能看起來像這樣：

<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>

在英語中，它表示：“當(dāng)div元素被加載時(shí)，發(fā)送一個(gè)異步請(qǐng)求到'https://stuff'，并將結(jié)果放入到div中。”但愿您已經(jīng)明白Hyperscript在行為上感覺幾乎像是HTML的擴(kuò)展。

Hyperscript簡(jiǎn)介

Hyperscript是一種簡(jiǎn)化的、更像英語的JavaScript。您還可以將其視為一種特定領(lǐng)域語言（DSL）。從本質(zhì)上來講，Hyperscript將JavaScript簡(jiǎn)化為一種語法，明確用于滿足構(gòu)建前端UI時(shí)重復(fù)出現(xiàn)的常見需求。它帶來了一堆約定，使這種代碼編寫更簡(jiǎn)潔。

Hyperscript是HTMX的近親，出自同一個(gè)開發(fā)者Carson Gross的奇思妙想。這兩個(gè)項(xiàng)目都反映了Gross力求簡(jiǎn)潔，以及他堅(jiān)持不懈地將其運(yùn)用于龐大且活躍的問題空間這一整體思路。在HTMX中，我們看到了功能更強(qiáng)大的HTML，可以消除過去十年中發(fā)展起來的復(fù)雜性，因?yàn)殚_發(fā)人員已經(jīng)接受了響應(yīng)式框架+ JSON +類似REST的API這種前端范式。在Hyperscript中，我們看到了JavaScript語言復(fù)雜性永無止境擴(kuò)展之外的另一種選擇。這是一種誘人的方案。

處理前端復(fù)雜性

在生產(chǎn)一線編寫代碼的前端開發(fā)人員肯定有一種不知所措的感覺。誰不想用一種易于記住的表達(dá)式語言來取代樣板JavaScript？您只需要憑記憶敲出一些代碼，無需引用任何其他，即可執(zhí)行日常的基本編碼。

不妨舉一個(gè)例子。在下面的Hyperscript代碼片段中，規(guī)范的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的同一個(gè)示例：

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;

當(dāng)然，更短小并不意味著更簡(jiǎn)單。與React相比，Hyperscript的自描述性更明顯?，F(xiàn)在有人可能會(huì)說，React更復(fù)雜，因?yàn)?/span>功能更強(qiáng)大。它是一種使復(fù)雜程序成為現(xiàn)實(shí)的語言。但在這里，我們只需看看與Hyperscript相比最常見的JavaScript前端開發(fā)方法（即React）。我們關(guān)注的是可以簡(jiǎn)化、也應(yīng)該簡(jiǎn)化的日?；顒?dòng)。

Hyperscript的目的在于取代JavaScript?；蛟S用精細(xì)化這個(gè)詞更合適。Hyperscript的開發(fā)者Caron Gross特別指出，這是一個(gè)“投機(jī)性”的項(xiàng)目。不過，它也是經(jīng)過深思熟慮、功能強(qiáng)悍又雄心勃勃的項(xiàng)目。你可以想象使用Hyperscript的企業(yè)級(jí)應(yīng)用程序。

Hyperscript最大的障礙可能是開發(fā)人員普遍熟悉和依賴JavaScript。當(dāng)然，它有時(shí)會(huì)令人困惑和棘手。如果Hyperscript真的流行起來，對(duì)大多數(shù)項(xiàng)目而言，它可能會(huì)與JavaScript結(jié)合使用。

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>

反應(yīng)式編程是編程史上的一條重要主線，Hyperscript完全欣然接受了它。在這個(gè)示例中，我們可以看到Hyperscript如何處理異步事件。事件系統(tǒng)非常強(qiáng)大，包括一系列響應(yīng)式功能，比如過濾、事件消息對(duì)象和隊(duì)列等。

您還可以看到短語“下一個(gè)<輸出/>”能夠引用DOM中的另一個(gè)元素，具體是指下一個(gè)<輸出/>元素，并將事件發(fā)送給它。這是一種非常簡(jiǎn)潔而明顯的方式，否則處理起來相當(dāng)冗長(zhǎng)而笨拙，或者至少需要一些響應(yīng)式連接。這是Hyperscript如何有意消除關(guān)注點(diǎn)分離的一個(gè)例子。

循環(huán)、條件和日志記錄

在一些前端環(huán)境（比如JSX for React）中，循環(huán)可能會(huì)很棘手。下面是Hyperscript中的循環(huán)示例：

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

這個(gè)例子還讓我們看到Hyperscript如何處理日志記錄。它非常簡(jiǎn)單，使用逗號(hào)分隔的值。

我們已經(jīng)看到了Hyperscript如何處理帶有else的if命令。請(qǐng)注意，它以End關(guān)鍵字結(jié)束（除非您在腳本的末尾，就像在元素屬性上發(fā)生的那樣）：

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>

該代碼塊使第二個(gè)按鈕改變顏色，除非它有.bordered類。這是用CSS和HTML非常簡(jiǎn)潔地處理了一些原本笨拙的JavaScript代碼。

行為局部性

灌輸給新程序員的原則之一是所謂的關(guān)注點(diǎn)分離（SoC）。大多數(shù)時(shí)候，這個(gè)原則是正確的。通過實(shí)現(xiàn)SoC，我們得到了解耦的組件，而這使得系統(tǒng)更具有彈性。然而，還有一股反潮流需要考慮，那就是Gross所謂的行為局部性。他在Hyperscript中融入了這個(gè)想法，您也會(huì)在Tailwind等其他項(xiàng)目中發(fā)現(xiàn)它的身影。

這里的想法是，分離關(guān)注點(diǎn)實(shí)際上會(huì)使系統(tǒng)更難以遵循。前端的關(guān)注點(diǎn)分離通常意味著將標(biāo)記（視圖）放在一處，將JavaScript（行為）放在另一處，將CSS（表示）放在另外一處。這么做在設(shè)計(jì)上的好處值得懷疑。SoC通常在更注重架構(gòu)的情況下發(fā)揮作用。

不過，在基于HTML、CSS和JavaScript的項(xiàng)目中，必須在上下文之間跳轉(zhuǎn)并始終牢記任務(wù)的線程通常很麻煩。這實(shí)際上是JSX吸引人的地方之一，也是樣式組件（Styled Components）框架背后的動(dòng)因。

違反關(guān)注點(diǎn)分離

Hyperscript拿來您會(huì)提取到JavaScript中的大量繁瑣工作，將其包裝在Hyperscript語法中，因此您可以將相當(dāng)復(fù)雜的功能直接內(nèi)聯(lián)到標(biāo)記中。這樣一來，就很容易將內(nèi)容放在一起，并使它們更具自文檔性。

缺點(diǎn)是，如果需要改變內(nèi)置語法之外的行為，可能會(huì)有問題。換句話說，如果您需要直接可以操作，會(huì)發(fā)現(xiàn)強(qiáng)耦合組件依賴Hyperscript引擎本身，您必須對(duì)其進(jìn)行修改。

我沒有在一個(gè)大型的真實(shí)項(xiàng)目中使用過Hyperscript，所以沒法直接表態(tài)。然而，該語言支持可擴(kuò)展性。

還可以并行運(yùn)行JavaScript和Hyperscript，這樣就給了您逐步改進(jìn)的余地。對(duì)我來說，這也提出了一個(gè)問題：在React、Svelte或Vue項(xiàng)目中并行運(yùn)行這些語言會(huì)是什么情況。

結(jié)論

當(dāng)我開始使用Hyperscript時(shí)，極其懷疑。然而，我逐漸被Hypserscript的感覺所吸引。我認(rèn)為它會(huì)很快取代JavaScript嗎？不會(huì)，我不這么認(rèn)為。但是我可以設(shè)想HTMX和Hyperscript極大地簡(jiǎn)化JavaScript前端的場(chǎng)景。

這種竭力追求一種更簡(jiǎn)單的編程范式的做法，我稱之為應(yīng)用常識(shí)（applied common sense）。通過質(zhì)疑假設(shè)并將我們學(xué)到的一切推倒重來，也許我們就能構(gòu)建更好的工具。

我們知道的一件事是，復(fù)雜性扼殺了軟件的創(chuàng)造力和生產(chǎn)力。作為工程師，我們永遠(yuǎn)面臨在抽象中構(gòu)建的風(fēng)險(xiǎn)，這是復(fù)雜性的最后一根稻草——它會(huì)扼殺我們的項(xiàng)目。

有時(shí)候我們接觸某項(xiàng)技術(shù)只是因?yàn)槲覀?/span>就喜歡它，這種工具隨之有了自己的生命。React等工具變成了產(chǎn)品。這在某些情況下是可以的，但在其他情況下，像Hypserscript這樣更簡(jiǎn)單的替代方法可能更好。

至少，Hyperscript有新的想法可以貢獻(xiàn)。像HTMX一樣，這種語言有助于改善在互聯(lián)網(wǎng)上進(jìn)行開發(fā)的整體體驗(yàn)。

原文標(biāo)題：Intro to Hyperscript: Rethinking JavaScript，作者：Matthew Tyson