對(duì) htmx 最常見的批評(píng)之一通常來自第一次聽說它的人,如下所示:
你抱怨現(xiàn)代前端框架的復(fù)雜性,但你的解決方案只是另一個(gè)復(fù)雜的前端框架。
這是一個(gè)很好的反對(duì)意見!對(duì)于你引入到項(xiàng)目中的任何第三方 (3P) 代碼,你都有權(quán)提出疑問。即使你沒有親自編寫 3P 代碼,但只要將其納入項(xiàng)目,你就必須了解它--如果你想升級(jí)它,就必須重新了解它。
讓我們將這些批評(píng)分解成其組成部分,并確定htmx在其聲稱要解決的傷害中到底有多少沉迷其中。
一些 htmx 捍衛(wèi)者向我們求助:“htmx 不是一個(gè)框架,它是一個(gè)庫。”這可能是不正確的。
“框架”是一個(gè)口語術(shù)語——對(duì)于某些第三方代碼從“庫”演變?yōu)椤翱蚣堋钡某潭葲]有硬性規(guī)定——但我們?nèi)匀粦?yīng)該嘗試定義它。在這種情況下:
如果你更喜歡比喻:庫是你添加到機(jī)器上的一個(gè)齒輪,框架是一個(gè)預(yù)先構(gòu)建的機(jī)器,你可以通過自定義其齒輪來控制它。
這種區(qū)別雖然可能很模糊,但很重要,因?yàn)樗枋隽颂鎿Q某些第三方代碼的容易程度。例如,使用 CSV 解析庫的 JavaScript 服務(wù)可能可以輕松地交換不同的 CSV 解析庫;然而,使用 NextJS 框架的 JavaScript 服務(wù)可能在其整個(gè)使用壽命中都依賴于 NextJS,因?yàn)榇罅看a是在假設(shè)它與 NextJS 結(jié)構(gòu)交互的情況下編寫的。
因此,如果你的服務(wù)是在框架之上構(gòu)建的,則其使用壽命與該框架的使用壽命相關(guān)。如果該框架被放棄,或被鄙視,或以其他方式不受歡迎,那么修改項(xiàng)目的難度將穩(wěn)步增加,直到你放棄修改它,并最終將其完全封存。
這就是人們?cè)趩枴癶tmx 只是另一個(gè) JavaScript 框架嗎?”時(shí)所擔(dān)心的問題。他們希望確保自己不會(huì)致力于一個(gè)很快就會(huì)過時(shí)的系統(tǒng),就像過去的許多 Web 開發(fā)框架一樣。
那么:htmx是一個(gè)框架嗎?它是否會(huì)很快被淘汰,在其迅速消亡后留下一系列無法維護(hù)的網(wǎng)站?
對(duì)我們社區(qū)關(guān)于這個(gè)問題的持續(xù)爭(zhēng)論表示歉意——我認(rèn)為 htmx 顯然是一個(gè)框架,至少在大多數(shù)用例中是這樣。但這確實(shí)取決于你如何使用它。
無論你在項(xiàng)目中的何處使用 htmx,你都會(huì)在 HTML 中包含 htmx 屬性(即 hx-post 、 hx-target ),編寫使用 htmx 格式數(shù)據(jù)調(diào)用的端點(diǎn)(使用某些請(qǐng)求標(biāo)頭),并從這些端點(diǎn)返回以 htmx 期望的方式格式化的數(shù)據(jù)(帶有 hx-* 控件的 HTML)。所有這些屬性以及標(biāo)頭和端點(diǎn)相互交互以創(chuàng)建一個(gè)系統(tǒng),元素通過該系統(tǒng)通過網(wǎng)絡(luò)請(qǐng)求進(jìn)入和退出 DOM。
如果你使用 htmx 來處理網(wǎng)站的大量網(wǎng)絡(luò)請(qǐng)求,那么在應(yīng)用程序中包含 htmx 會(huì)對(duì)項(xiàng)目的結(jié)構(gòu)產(chǎn)生重大影響,從構(gòu)建前端標(biāo)記的方式到端點(diǎn)進(jìn)行的數(shù)據(jù)庫查詢。這是類似框架的行為,在這種情況下,htmx 不能輕易被替換。
你絕對(duì)可以以類似庫的方式使用 htmx,為網(wǎng)頁的幾個(gè)部分添加動(dòng)態(tài)功能。但你也可以用這種類似于庫的方式編寫 React,沒有人會(huì)說 React 不是一個(gè)框架。我只想說,許多在應(yīng)用程序中使用 htmx 的人都是為了滿足 htmx 的需求,將其作為構(gòu)建超媒體應(yīng)用程序的框架。
如果能發(fā)揮 htmx 的優(yōu)勢(shì),那么使用 htmx 構(gòu)建程序的效果會(huì)更好。如果你真的堅(jiān)持,可以發(fā)送 JSON 格式的表單體。但你不應(yīng)該這樣做!application/x-www-form-urlencoded 格式的表單體并編寫一個(gè)可接受它們的端點(diǎn)會(huì)更簡(jiǎn)單。如果你真的堅(jiān)持,你可以編寫一個(gè)在多個(gè)不同客戶端之間重復(fù)使用的端點(diǎn)。但你不應(yīng)該這樣做!將數(shù)據(jù)和超媒體 API 分離到不同的 URL 中會(huì)更簡(jiǎn)單。是的,htmx 可以作為一個(gè)庫使用,但或許也可以讓它成為你的框架。
然而,這并不意味著 htmx 只是另一個(gè) JavaScript 框架,因?yàn)?htmx 具有其他框架沒有的巨大優(yōu)勢(shì):HTML。
假設(shè)你使用 htmx 作為框架 - 它是 JavaScript 框架嗎?從一種明顯的意義上來說,是的:htmx 是用大約 4k 行 JS 實(shí)現(xiàn)的。但從另一個(gè)更重要的意義上來說,它不是:React、Svelte、Solid 等等,你寫的 JS(X) 框架會(huì)轉(zhuǎn)換成 HTML;htmx 只是讓你編寫 HTML。這就免去了可能會(huì)讓你放棄其他框架的各種維護(hù)工作。
當(dāng)你想要升級(jí)或更改某些依賴項(xiàng),但你使用的框架與該更改不兼容時(shí),代碼庫往往會(huì)陷入困境。Java 是這里最臭名昭著的罪犯——生產(chǎn)中有數(shù)百萬行 Java 永遠(yuǎn)不會(huì)離開 Java 8,因?yàn)樯?jí) Spring 太難了——但 npm 包生態(tài)系統(tǒng)緊隨其后。當(dāng)你使用 htmx“框架”時(shí),你永遠(yuǎn)不會(huì)遇到這個(gè)問題,因?yàn)?htmx 是一個(gè)零依賴、客戶端加載的 JavaScript 文件,因此保證它永遠(yuǎn)不會(huì)與你的服務(wù)器所依賴的任何構(gòu)建過程或依賴鏈發(fā)生沖突。
瀏覽器渲染 HTML,因此無需編譯器或轉(zhuǎn)譯器即可使用 htmx。雖然許多 htmx 用戶很樂意使用 JSX 渲染 API 響應(yīng),但 htmx 與經(jīng)典模板引擎配合得很好,使其可移植到你喜歡的任何語言。不管你對(duì) Django 和 Rails 有何看法,但它們?cè)?2008 年和今天都很重要 — htmx 與它們無縫集成。這是 htmx 驅(qū)動(dòng)開發(fā)的一個(gè)反復(fù)出現(xiàn)的主題:htmx 與新舊開發(fā)工具都能很好地配合,因?yàn)樗羞@些工具的共同點(diǎn)是 HTML,而 htmx 是用于編寫 HTML 的。
推動(dòng)用戶主要通過 HTML 而不是 JS 來定義其應(yīng)用程序的行為有太多優(yōu)點(diǎn),本文無法一一介紹,因此我將重點(diǎn)談?wù)勅藗冏钔春薜?JavaScript 成名之作:“churn”。根據(jù)你編寫 React 應(yīng)用程序的時(shí)間,你可能在編寫表單時(shí)使用了受控類組件、react Hooks 或這種實(shí)驗(yàn)性的 <form> 擴(kuò)展。這確實(shí)讓人抓狂,尤其是如果你和我一樣,最初是通過類組件學(xué)習(xí)如何制作網(wǎng)絡(luò)表單的。
然而,無論你是何時(shí)編寫的 htmx 應(yīng)用程序,htmx 表單的行為都是以與普通 HTML 表單大致相同的方式定義的:使用 <form>。隨著 htmx 增加了額外的網(wǎng)絡(luò)功能,你終于可以使用 PUT 請(qǐng)求并控制響應(yīng)的去向,但在所有其他方面--驗(yàn)證、輸入、標(biāo)簽、自動(dòng)完成--你都只能使用默認(rèn)的 <form> 元素行為。
最后,因?yàn)?htmx 只是在一個(gè)非常狹窄的域中擴(kuò)展 HTML(網(wǎng)絡(luò)請(qǐng)求和 DOM 替換),所以你編寫的大多數(shù)“htmx”只是普通的舊 HTML。當(dāng)你可以訪問復(fù)雜的狀態(tài)管理機(jī)制時(shí),實(shí)現(xiàn)自定義可折疊 div 變得非常容易;如果不這樣做,你可能會(huì)停下來足夠長的時(shí)間來搜索 <details> 元素。每當(dāng)問題可以通過本機(jī) HTML 元素解決時(shí),代碼的壽命就會(huì)大大提高。這是一種學(xué)習(xí) Web 開發(fā)的不太陌生的方式,因?yàn)橹灰?HTML 存在,你的大部分知識(shí)就將保持相關(guān)性。
在這方面,htmx 比 React 更像 jQuery(htmx 的前身 intercooler.js 是 jQuery 擴(kuò)展),但它通過使用聲明性的、基于 HTML 的界面對(duì) jQuery 進(jìn)行了改進(jìn):jQuery 讓你轉(zhuǎn)到 <script> 標(biāo)簽來指定AJAX行為,htmx只需要一個(gè)簡(jiǎn)單的 hx-post 屬性。
簡(jiǎn)而言之,雖然 htmx 可以用作框架,但與 JavaScript 框架相比,它與 Web 語義的偏差要小得多,并且將受益于這些語義的改進(jìn),而無需用戶進(jìn)行額外的工作,這要?dú)w功于 Web 的出色性能向后兼容性保證。如果你想建立一個(gè)持續(xù)很長時(shí)間的網(wǎng)站,這些品質(zhì)使 htmx 成為比許多同時(shí)代網(wǎng)站更好的選擇。
注:盡管卡森(Carson)同意這一分析,認(rèn)為這篇文章沒有邏輯缺陷,并允許我在他的網(wǎng)站上發(fā)表,但他仍然堅(jiān)持認(rèn)為 htmx 是一個(gè)庫。
圖片
原文:https://htmx.org/essays/is-htmx-another-javascript-framework/
本文鏈接:http://www.www897cc.com/showinfo-26-60950-0.htmlHtmx 只是另一個(gè) JavaScript 框架嗎?
聲明:本網(wǎng)頁內(nèi)容旨在傳播知識(shí),若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系,我們將在第一時(shí)間刪除處理。郵件:2376512515@qq.com
上一篇: C# 登頂!超越Java或非空想