AVt天堂网 手机版,亚洲va久久久噜噜噜久久4399,天天综合亚洲色在线精品,亚洲一级Av无码毛片久久精品

當前位置:首頁 > 科技  > 軟件

帶您走近Hyperscript:重新思考JavaScript

來源: 責編: 時間:2023-10-26 17:11:56 266觀看
導讀譯者 | 布加迪審校 | 重樓我們當中一些人也許還記得HyperCard,這是編程語言進化體系中一個有趣的分支。如果您上了一定的年齡,甚至還可能用HyperCard學過編程。Hyperscript是一種比較新的技術,它具有HyperCard的一些優點

譯者 | 布加迪dCn28資訊網——每日最新資訊28at.com

審校 | 重樓dCn28資訊網——每日最新資訊28at.com

我們當中一些人也許還記得HyperCard是編程語言進化體系中一個有趣的分支。如果您了一定的年齡,甚至還可能HyperCard編程。Hyperscript是一種比較新的技術,它具有HyperCard的一些優點,特別是它的簡性和類似英語的語法,并將HyperCard運用于瀏覽器環境。它是一種JavaScript替代技術,可以獨立使用,也可以結合HTML使用,以簡化JavaScript前端的常見腳本需求。dCn28資訊網——每日最新資訊28at.com

dCn28資訊網——每日最新資訊28at.com

例勝過千言萬語

在我們展開討論之前,不妨看一個Hyperscript例,它傳達了本質:dCn28資訊網——每日最新資訊28at.com

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

這段代碼的作用非常明顯。下劃線屬性是表示Hyperscript的特殊屬性。在JavaScript中,同樣的這項功能可能看起來像這樣dCn28資訊網——每日最新資訊28at.com

<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的擴展。dCn28資訊網——每日最新資訊28at.com

Hyperscript簡介

Hyperscript是一種簡化的、更像英語的JavaScript您還可以將其視為一種特定領域語言DSL。從本質上講,HyperscriptJavaScript簡化為一種語法,明確用于滿足構建前端UI時重復出現的常見需求。它帶來了一堆約定,使這種代碼編寫更簡潔。dCn28資訊網——每日最新資訊28at.com

HyperscriptHTMX近親,出自同一個開發者Carson Gross奇思妙想。這兩個項目都反映了Gross力求簡潔,以及他堅持不懈地將運用于龐大且活躍的問題空間這一整體思路。在HTMX中,我們看到了功能更強大的HTML,可以消除過去十年中發展起來的復雜性,因為開發人員已經接受了響應式框架+ JSON +類似REST的API這種前端范式。在Hyperscript中,我們看到了JavaScript語言復雜性永無止境擴展之外的另一種選擇這是一種誘人的方案dCn28資訊網——每日最新資訊28at.com

處理前端復雜性

生產一線編寫代碼的前端開發人員肯定有一種不知所措的感覺。誰不想用一種易于記的表達語言來取代樣板JavaScript?您只需要憑記憶敲出一些代碼無需引用任何其他即可執行日常的基本編碼。dCn28資訊網——每日最新資訊28at.com

不妨舉一個例子。在下面的Hyperscript代碼片段中,規范的button-click-counter示例變成dCn28資訊網——每日最新資訊28at.com

<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的同一個示例:dCn28資訊網——每日最新資訊28at.com

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。我們關注的是可以簡化、也應該簡化的日常活動。dCn28資訊網——每日最新資訊28at.com

Hyperscript的目的在于取代JavaScript。或許用精細化這個詞更合適。Hyperscript的開發者Caron Gross特別指出,這是一個投機性”的項目。不過它也是經過深思熟慮、功能強悍又雄心勃勃的項目可以想象使用Hyperscript的企業級應用程序。dCn28資訊網——每日最新資訊28at.com

Hyperscript最大的障礙可能是開發人員普遍熟悉和依賴JavaScript。當然,它有時會令人困惑和棘手。如果Hyperscript真的流行起來,對大多數項目而言,它可能會與JavaScript結合使用dCn28資訊網——每日最新資訊28at.com

Hyperscript中的異步事件

不妨看看Hyperscript如何處理事件dCn28資訊網——每日最新資訊28at.com

<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如何處理異步事件。事件系統非常強大,包括一系列響應式功能,比如過濾、事件消息對象和隊列等。dCn28資訊網——每日最新資訊28at.com

您還可以看到短語下一個<輸出/>能夠引用DOM中的另一個元素,具體是指下一個<輸出/>元素,并將事件發送給它。這是一種非常簡潔明顯的方式,否則處理起來相當冗長笨拙,或者至少需要一些響應式連接。這是Hyperscript如何有意消除關注點分離的一個例子。dCn28資訊網——每日最新資訊28at.com

循環、條件和日志記錄

在一些前端環境比如JSX for React中,循環可能會很棘手。下面是Hyperscript中的循環示例dCn28資訊網——每日最新資訊28at.com

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

這個例子還讓我們看到Hyperscript如何處理日志記錄。它非常簡單,使用逗號分隔值。dCn28資訊網——每日最新資訊28at.com

我們已經看到了Hyperscript如何處理帶有elseif命令。請注意,它以End關鍵字結束除非您在腳本的末尾,就像在元素屬性上發生的那樣):dCn28資訊網——每日最新資訊28at.com

if :x <= 3 put :x into the next <output/>else put '3 is the max...' into the next <output/>End

Hyperscript還支持unless修飾符,它可以引用CSS屬性dCn28資訊網——每日最新資訊28at.com

<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代碼。dCn28資訊網——每日最新資訊28at.com

行為局部性

灌輸給新程序員的原則之一是所謂的關注點分離SoC。大多數時候,這個原則是正確的。通過實現SoC,我們得到了解耦的組件,這使得系統更具彈性。然而,還有一股反潮流需要考慮,那就是Gross所謂的行為局部性。他在Hyperscript中融入了這個想法,您也會在Tailwind等其他項目中發現它的身影。dCn28資訊網——每日最新資訊28at.com

里的想法是,分離關注點實際上會使系統更難以遵循。前端的關注點分離通常意味著將標記視圖放在一,將JavaScript行為放在另一,將CSS表示放在另外一處。這在設計上的好處值得懷疑。SoC通常在更注重架構情況下發揮作用。dCn28資訊網——每日最新資訊28at.com

不過,在基于HTML、CSS和JavaScript的項目中,必須在上下文之間跳轉并始終牢記任務的線程通常很麻煩。這實際上是JSX吸引人的地方之一,也是樣式組件(Styled Components)框架背后的動dCn28資訊網——每日最新資訊28at.com

違反關注點分離

Hyperscript拿來您會提取到JavaScript中的大量繁瑣工作,將其包裝在Hyperscript語法中,因此您可以將相當復雜的功能直接內聯到標記中。這樣一來,就很容易將內容放在一起,并使它們更具自文檔性。dCn28資訊網——每日最新資訊28at.com

缺點是,如果需要改變內置語法之外的行為,可能會問題。換句話說,如果您需要直接可以操作發現強耦合組件依賴Hyperscript引擎本身,您必須對其進行修改。dCn28資訊網——每日最新資訊28at.com

我沒有在一個大型的真實項目中使用Hyperscript,所以沒法直接表態然而,該語言支持可擴展性。dCn28資訊網——每日最新資訊28at.com

可以并行運行JavaScript和Hyperscript,這樣就給了您逐步改進余地。對我來說,這也提出了一個問題:在React、Svelte或Vue項目中并行運行這些語言會是什么情況dCn28資訊網——每日最新資訊28at.com

結論

當我開始使用Hyperscript時,極其懷疑。然而,我逐漸被Hypserscript的感覺所吸引。我認為它會很快取代JavaScript嗎?,我不這么認為。但是我可以設想HTMX和Hyperscript極大地簡化JavaScript前端的場景dCn28資訊網——每日最新資訊28at.com

這種竭力追求一種更簡單的編程范式的做法,我稱之為應用常識(applied common sense)。通過質疑假設并將我們學到的一切推倒重來,也許我們就能構建更好的工具。dCn28資訊網——每日最新資訊28at.com

我們知道的一件事是,復雜性扼殺了軟件的創造力和生產力。作為工程師,我們永遠面臨在抽象中構建的風險,這是復雜性的最后一根稻草——它會扼殺我們的項目。dCn28資訊網——每日最新資訊28at.com

有時候我們接觸某項技術只是因為我們喜歡它工具隨之有了自己的生命。React等工具變成了產品。這在某些情況下是可以的,但在其他情況下,像Hypserscript這樣更簡單的替代方法可能更好。dCn28資訊網——每日最新資訊28at.com

至少,Hyperscript有新的想法可以貢獻。像HTMX一樣,這種語言有助于改善在互聯網上進行開發的整體體驗。dCn28資訊網——每日最新資訊28at.com

原文標題:Intro to Hyperscript: Rethinking JavaScript,作者:Matthew TysondCn28資訊網——每日最新資訊28at.com

本文鏈接:http://www.tebozhan.com/showinfo-26-15220-0.html帶您走近Hyperscript:重新思考JavaScript

聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。郵件:2376512515@qq.com

上一篇: InfoWorld 公布 2023 年最佳開源軟件,你知道幾個

下一篇: 你是否知道如何使用Python PyQt6事件處理器?

標簽:
  • 熱門焦點
  • K60 Pro官方停產 第三方瞬間漲價

    雖然沒有官方宣布,但Redmi的一些高管也已經透露了,Redmi K60 Pro已經停產且不會補貨,這一切都是為了即將到來的K60 Ultra鋪路,屬于廠家的正常操作。但有意思的是該機在停產之后
  • 石頭自清潔掃拖機器人G10S評測:多年黑科技集大成之作 懶人終極福音

    科技圈經常能看到一個詞叫“縫合怪”,用來形容那些把好多功能或者外觀結合在一起的產品,通常這樣的詞是貶義詞,但如果真的是產品縫合的好、縫合的實用的話,那它就成了中性詞,今
  • 2023年Q2用戶偏好榜:12+256G版本成新主流

    3月份的性能榜、性價比榜和好評榜之后,就要輪到2023年的第二季度偏好榜了,上半年的新機潮已經過去,最明顯的肯定就是大內存和存儲的機型了,另外部分中端機也取消了屏幕塑料支架
  • 不容錯過的MSBuild技巧,必備用法詳解和實踐指南

    一、MSBuild簡介MSBuild是一種基于XML的構建引擎,用于在.NET Framework和.NET Core應用程序中自動化構建過程。它是Visual Studio的構建引擎,可在命令行或其他構建工具中使用
  • 讓我們一起聊聊文件的操作

    文件【1】文件是什么?文件是保存數據的地方,是數據源的一種,比如大家經常使用的word文檔、txt文件、excel文件、jpg文件...都是文件。文件最主要的作用就是保存數據,它既可以保
  • 得物寵物生意「狂飆」,發力“它經濟”

    作者|花花小萌主近日,得物宣布正式上線寵物鑒別,通過得物App內的&ldquo;在線鑒別&rdquo;,可找到鑒別寵物的選項。通過上傳自家寵物的部位細節,就能收獲擁有專業資質認證的得物鑒
  • 騰訊蓋樓,字節拆墻

    來源 | 光子星球撰文 | 吳坤諺編輯 | 吳先之&ldquo;想重溫暴刷深淵、30+技能搭配暴搓到爽的游戲體驗嗎?一起上晶核,即刻暴打!&rdquo;曾憑借直播騰訊旗下代理格斗游戲《DNF》一
  • 最薄的14英寸游戲筆記本電腦 Alienware X14已可以購買

    2022年1月份在國際消費電子展(CES2022)上首次亮相的Alienware新品——Alienware X14現在已經可以購買了,這款筆記本電腦被譽為世界上最薄的 14 英寸游戲筆
  • 親歷馬斯克血洗Twitter,硅谷的苦日子在后頭

    文/劉哲銘  編輯/李薇  馬斯克再次揮下裁員大刀。  美國時間11月14日,Twitter約4400名外包員工遭解雇,此次被解雇的員工的主要工作為內容審核等。此前,T
Top