對標蘋果的靈動島 華為帶來實況窗功能
繼蘋果的靈動島之后，華為也在今天正式推出了“實況窗”功能。據今天鴻蒙OS 4.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 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的自描述性更明顯?，F在有人可能會說，React更復雜，因為功能更強大。它是一種使復雜程序成為現實的語言。但在這里，我們只需看看與Hyperscript相比最常見的JavaScript前端開發方法（即React）。我們關注的是可以簡化、也應該簡化的日常活動。
Hyperscript的目的在于取代JavaScript?；蛟S用精細化這個詞更合適。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/>EndHyperscript還支持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.www897cc.com/showinfo-26-15220-0.html帶您走近Hyperscript：重新思考JavaScript
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號