譯者 | 布加迪
審校 | 重樓
我們當中一些人也許還記得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是一種簡化的、更像英語的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如何處理事件:
<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
本文鏈接:http://www.tebozhan.com/showinfo-26-15220-0.html帶您走近Hyperscript:重新思考JavaScript
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。郵件:2376512515@qq.com