項目簡介 htmx是一個非?？岬那岸斯ぞ?，它讓你在純 HTML 中就能搞定 AJAX、CSS 過渡動畫、WebSocket、服務端發(fā)送事件（SSE）等交互功能——而且不需要寫一行 JavaScript。它體積超?。╣zip 后約 14 KB），無任何外部依賴，還非常容易擴展，說它是超能力的 HTML 工具箱一點也不夸張
目前在Github上收獲了45.8K star！這玩意兒在GitHub上已經狂攬45.8K star，絕對是最值得關注的前端工具之一！
項目特色 支持通過 HTML 屬性直接發(fā)起 AJAX 請求，讓你只需寫標簽就能操作網絡請求 內置 CSS 過渡動畫支持，響應式交互體驗輕松實現(xiàn) 支持 WebSockets 和 Server-Sent Events（SSE），讓前端實時交互更爽快 極簡！代碼壓縮后只有 ~14 KB，無依賴，加載快不拖慢頁面 安裝方式 方式一：CDN 引入（最簡單直接） 在你的 HTML 文件里添加：
< script src = "https://cdn.jsdelivr.net/npm/htmx.org@2.0.6/dist/htmx.min.js" > </ script > 然后你就可以用屬性寫請求了，例如：
< button hx-post = "/clicked" hx-swap = "outerHTML" > 點擊我 </ button > 這行 HTML 就告訴瀏覽器：“按鈕被點了以后，用 AJAX 發(fā)一個 POST 請求到 /clicked，然后用服務器返回的內容替換這個按鈕。”
方式二：通過 npm 安裝（適合項目集成） npm install htmx.org --save 注意：千萬不要裝老的 htmx 包，正確的是 htmx.org。
安裝完了之后，可以在你的打包工具里引入使用。
官方提供了不少UI實例供大家學習參考：
點擊編輯（Click to Edit）
代碼：
<!-- 引入htmx --> < script src = "https://unpkg.com/htmx.org" > </ script > <!-- 可編輯的元素 --> < span id = "editable-text" hx-get = "/api/edit" hx-target = "this" hx-swap = "outerHTML" style = "border: 1px solid #ccc; padding: 5px;" > Edit Me </ span > 批量更新（Bulk Update）
代碼：
<!-- 引入htmx --> < script src = "https://unpkg.com/htmx.org" > </ script > <!-- 批量更新的按鈕 --> < button hx-post = "/api/update-all" hx-target = "#all-targets" hx-swap = "outerHTML" > Update All </ button > <!-- 多個更新目標 --> < div id = "all-targets" > < div hx-get = "/api/data1" hx-target = "this" hx-swap = "outerHTML" > Loading... </ div > < div hx-get = "/api/data2" hx-target = "this" hx-swap = "outerHTML" > Loading... </ div > < div hx-get = "/api/data3" hx-target = "this" hx-swap = "outerHTML" > Loading... </ div > </ div > 小結 用下來感覺 htmx 是真的懂前端開發(fā)者的痛點，不用學復雜的框架語法，靠 HTML 屬性就能實現(xiàn)動態(tài)交互，寫代碼的效率直接提上來了，代碼量也少了很多，后期維護起來也輕松。而且它輕量級不占資源，加載速度快，不管是小項目快速開發(fā)，還是老項目優(yōu)化改造，都特別合適。
項目地址： https://github.com/bigskysoftware/htmx
閱讀原文：原文鏈接
400 186 1886
