建站
咨詢
售后
建站咨詢
新聞中心
譯者 | 布加迪
審校 | 重樓
我們當中一些人也許還記得HyperCard，這是編程語言進化體系中一個有趣的分支。如果您上了一定的年齡，甚至還可能用HyperCard學過編程。Hyperscript是一種比較新的技術，它具有HyperCard的一些優(yōu)點，特別是它的簡潔性和類似英語的語法，并將HyperCard運用于瀏覽器環(huán)境。它是一種JavaScript替代技術，可以獨立使用，也可以結合HTML使用，以簡化JavaScript前端的常見腳本需求。
一個示例勝過千言萬語
在我們展開討論之前，不妨看一個Hyperscript示例，它傳達了本質：
Using fetch() API...這段代碼的作用非常明顯。下劃線屬性是表示Hyperscript的特殊屬性。在JavaScript中，同樣的這項功能可能看起來像這樣：
在英語中，它表示：“當div元素被加載時，發(fā)送一個異步請求到'https://stuff'，并將結果放入到div中?！钡改呀?jīng)明白Hyperscript在行為上感覺幾乎像是HTML的擴展。
Hyperscript簡介
Hyperscript是一種簡化的、更像英語的JavaScript。您還可以將其視為一種特定領域語言（DSL）。從本質上來講，Hyperscript將JavaScript簡化為一種語法，明確用于滿足構建前端UI時重復出現(xiàn)的常見需求。它帶來了一堆約定，使這種代碼編寫更簡潔。
Hyperscript是HTMX的近親，出自同一個開發(fā)者Carson Gross的奇思妙想。這兩個項目都反映了Gross力求簡潔，以及他堅持不懈地將其運用于龐大且活躍的問題空間這一整體思路。在HTMX中，我們看到了功能更強大的HTML，可以消除過去十年中發(fā)展起來的復雜性，因為開發(fā)人員已經(jīng)接受了響應式框架+ JSON +類似REST的API這種前端范式。在Hyperscript中，我們看到了JavaScript語言復雜性永無止境擴展之外的另一種選擇。這是一種誘人的方案。
處理前端復雜性
在生產(chǎn)一線編寫代碼的前端開發(fā)人員肯定有一種不知所措的感覺。誰不想用一種易于記住的表達式語言來取代樣板JavaScript？您只需要憑記憶敲出一些代碼，無需引用任何其他，即可執(zhí)行日常的基本編碼。
不妨舉一個例子。在下面的Hyperscript代碼片段中，規(guī)范的button-click-counter示例變成：
這是使用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 (
);
};
export default Counter;當然，更短小并不意味著更簡單。與React相比，Hyperscript的自描述性更明顯?，F(xiàn)在有人可能會說，React更復雜，因為功能更強大。它是一種使復雜程序成為現(xiàn)實的語言。但在這里，我們只需看看與Hyperscript相比最常見的JavaScript前端開發(fā)方法（即React）。我們關注的是可以簡化、也應該簡化的日?；顒?。
Hyperscript的目的在于取代JavaScript。或許用精細化這個詞更合適。Hyperscript的開發(fā)者Caron Gross特別指出，這是一個“投機性”的項目。不過，它也是經(jīng)過深思熟慮、功能強悍又雄心勃勃的項目。你可以想象使用Hyperscript的企業(yè)級應用程序。
Hyperscript最大的障礙可能是開發(fā)人員普遍熟悉和依賴JavaScript。當然，它有時會令人困惑和棘手。如果Hyperscript真的流行起來，對大多數(shù)項目而言，它可能會與JavaScript結合使用。
Hyperscript中的異步事件
不妨看看Hyperscript如何處理事件：
反應式編程是編程史上的一條重要主線，Hyperscript完全欣然接受了它。在這個示例中，我們可以看到Hyperscript如何處理異步事件。事件系統(tǒng)非常強大，包括一系列響應式功能，比如過濾、事件消息對象和隊列等。
您還可以看到短語“下一個<輸出/>”能夠引用DOM中的另一個元素，具體是指下一個<輸出/>元素，并將事件發(fā)送給它。這是一種非常簡潔而明顯的方式，否則處理起來相當冗長而笨拙，或者至少需要一些響應式連接。這是Hyperscript如何有意消除關注點分離的一個例子。
循環(huán)、條件和日志記錄
在一些前端環(huán)境（比如JSX for React）中，循環(huán)可能會很棘手。下面是Hyperscript中的循環(huán)示例：
for x in [1, 2, 3] index i
log i, "is", x
end這個例子還讓我們看到Hyperscript如何處理日志記錄。它非常簡單，使用逗號分隔的值。
我們已經(jīng)看到了Hyperscript如何處理帶有else的if命令。請注意，它以End關鍵字結束（除非您在腳本的末尾，就像在元素屬性上發(fā)生的那樣）：
if :x <= 3
put :x into the next
else
put '3 is the max...' into the next
EndHyperscript還支持unless修飾符，它可以引用CSS屬性：
該代碼塊使第二個按鈕改變顏色，除非它有.bordered類。這是用CSS和HTML非常簡潔地處理了一些原本笨拙的JavaScript代碼。
行為局部性
灌輸給新程序員的原則之一是所謂的關注點分離（SoC）。大多數(shù)時候，這個原則是正確的。通過實現(xiàn)SoC，我們得到了解耦的組件，而這使得系統(tǒng)更具有彈性。然而，還有一股反潮流需要考慮，那就是Gross所謂的行為局部性。他在Hyperscript中融入了這個想法，您也會在Tailwind等其他項目中發(fā)現(xiàn)它的身影。
這里的想法是，分離關注點實際上會使系統(tǒng)更難以遵循。前端的關注點分離通常意味著將標記（視圖）放在一處，將JavaScript（行為）放在另一處，將CSS（表示）放在另外一處。這么做在設計上的好處值得懷疑。SoC通常在更注重架構的情況下發(fā)揮作用。
不過，在基于HTML、CSS和JavaScript的項目中，必須在上下文之間跳轉并始終牢記任務的線程通常很麻煩。這實際上是JSX吸引人的地方之一，也是樣式組件（Styled Components）框架背后的動因。
違反關注點分離
Hyperscript拿來您會提取到JavaScript中的大量繁瑣工作，將其包裝在Hyperscript語法中，因此您可以將相當復雜的功能直接內(nèi)聯(lián)到標記中。這樣一來，就很容易將內(nèi)容放在一起，并使它們更具自文檔性。
缺點是，如果需要改變內(nèi)置語法之外的行為，可能會有問題。換句話說，如果您需要直接可以操作，會發(fā)現(xiàn)強耦合組件依賴Hyperscript引擎本身，您必須對其進行修改。
我沒有在一個大型的真實項目中使用過Hyperscript，所以沒法直接表態(tài)。然而，該語言支持可擴展性。
還可以并行運行JavaScript和Hyperscript，這樣就給了您逐步改進的余地。對我來說，這也提出了一個問題：在React、Svelte或Vue項目中并行運行這些語言會是什么情況。
結論
當我開始使用Hyperscript時，極其懷疑。然而，我逐漸被Hypserscript的感覺所吸引。我認為它會很快取代JavaScript嗎？不會，我不這么認為。但是我可以設想HTMX和Hyperscript極大地簡化JavaScript前端的場景。
這種竭力追求一種更簡單的編程范式的做法，我稱之為應用常識（applied common sense）。通過質疑假設并將我們學到的一切推倒重來，也許我們就能構建更好的工具。
我們知道的一件事是，復雜性扼殺了軟件的創(chuàng)造力和生產(chǎn)力。作為工程師，我們永遠面臨在抽象中構建的風險，這是復雜性的最后一根稻草——它會扼殺我們的項目。
有時候我們接觸某項技術只是因為我們就喜歡它，這種工具隨之有了自己的生命。React等工具變成了產(chǎn)品。這在某些情況下是可以的，但在其他情況下，像Hypserscript這樣更簡單的替代方法可能更好。
至少，Hyperscript有新的想法可以貢獻。像HTMX一樣，這種語言有助于改善在互聯(lián)網(wǎng)上進行開發(fā)的整體體驗。
原文標題：Intro to Hyperscript: Rethinking JavaScript，作者：Matthew Tyson
當前名稱：帶您走近Hyperscript：重新思考JavaScript
地址分享：http://www.dlmjj.cn/article/dhojjhd.html
