譯者 | 布加迪

審校 | 重樓

我們當中一些人也許還記得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的自描述性更明顯?，F在有人可能會說，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一樣，這種語言有助于改善在互聯網上進行開發的整體體驗。

原文標題：Intro to Hyperscript: Rethinking JavaScript，作者：Matthew Tyson