1. 什么是 htmx？
htmx 是一個(gè)輕量級(jí)的開源 JavaScript 庫(kù)，它允許你直接通過 HTML 屬性（如 hx-get、hx-post 等）來實(shí)現(xiàn) AJAX 請(qǐng)求、CSS 過渡、WebSocket、Server-Sent Events 等功能。換句話說，它讓 HTML 本身就能擁有現(xiàn)代前端的動(dòng)態(tài)交互能力，而無需額外編寫復(fù)雜的 JavaScript。
特點(diǎn)：
為什么選擇 htmx？
突破 HTML 的限制默認(rèn)情況下，只有 <a> 和 <form> 標(biāo)簽?zāi)苡|發(fā) HTTP 請(qǐng)求，而且會(huì)導(dǎo)致整個(gè)頁面刷新。htmx 通過擴(kuò)展屬性讓任意元素都能觸發(fā)各種 HTTP 請(qǐng)求，并能精確更新頁面局部。
開發(fā)更簡(jiǎn)單交互邏輯通過 HTML 屬性配置，無需復(fù)雜的 JavaScript，保持代碼簡(jiǎn)潔、直觀。
后端驅(qū)動(dòng)服務(wù)器返回 HTML 片段即可直接插入頁面，不需要 JSON + 前端模板解析，后端渲染即“即插即用”。
2. 快速入門
引入 htmx
在 HTML 中加入以下腳本即可（以 2.0.6 版本為例）：
<script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.6/dist/htmx.min.js"></script>
示例：點(diǎn)擊按鈕
<button hx-post="/clicked" hx-swap="outerHTML"> Click Me</button>
如果服務(wù)器返回：
<button>Clicked!</button>
頁面按鈕會(huì)變成 “Clicked!”。
3. 常見屬性
以下是 htmx 的核心屬性（來自官方文檔）：
| 屬性 | 說明 |
|---|
hx-get / hx-post / hx-put / hx-patch / hx-delete | 發(fā)送指定 HTTP 方法請(qǐng)求 |
hx-trigger | 指定觸發(fā)請(qǐng)求的事件（如 click、change、keyup 等） |
hx-target | 指定響應(yīng)內(nèi)容要插入的目標(biāo)元素 |
hx-swap | 定義內(nèi)容替換方式，如 innerHTML、outerHTML、beforeend 等 |
hx-select | 從響應(yīng) HTML 中選擇部分內(nèi)容插入 |
hx-swap-oob | 支持“帶外”更新（OOB swaps），允許更新頁面上其他位置的元素 |
htmx.config.* | 全局配置（跨域憑證、默認(rèn) swap 行為等） |
4. 高級(jí)功能
除了基礎(chǔ) AJAX，htmx 還支持許多實(shí)用場(chǎng)景：
無刷新表單提交：hx-post + hx-swap
延遲加載 / 無限滾動(dòng)：hx-trigger="revealed" 實(shí)現(xiàn)滾動(dòng)到底部時(shí)加載
內(nèi)聯(lián)編輯（Inline Editing）：點(diǎn)擊后替換為輸入框，提交保存
文件上傳、進(jìn)度條、模態(tài)對(duì)話框 等 UI 交互
實(shí)時(shí)更新：支持 Server-Sent Events (SSE) 和 WebSocket
完整示例可查看 htmx 官方 Examples（https://htmx.org/examples/）。
5. 實(shí)戰(zhàn)：留言板（Node.js + htmx）
項(xiàng)目結(jié)構(gòu)
/├─ public/│ └─ index.html└─ server.js
server.js
const express = require('express');const app = express();app.use(express.urlencoded({ extended: true }));
let posts = [];
app.get('/', (req, res) => { res.sendFile(__dirname + '/public/index.html');});
app.get('/posts', (req, res) => { res.send(posts.map(p => `<div class="post">${p}</div>`).join(''));});
app.post('/post', (req, res) => { const { message } = req.body; posts.push(message); res.send(`<div class="post">${message}</div>`);});
app.listen(3333, () => console.log('Server started on port 3333'));
index.html
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>HTMX 留言板</title> <script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.6/dist/htmx.min.js"></script></head><body> <h1>留言板</h1>
<form hx-post="/post" hx-target="#posts" hx-swap="beforeend"> <input type="text" name="message" placeholder="輸入留言..." required> <button type="submit">提交</button> </form>
<div id="posts" hx-get="/posts" hx-trigger="load"></div></body></html>
功能說明
整個(gè)過程無需任何額外的前端 JavaScript。
6. 總結(jié)與應(yīng)用場(chǎng)景
優(yōu)點(diǎn)
HTML + 后端渲染即可實(shí)現(xiàn)豐富交互，無需引入大型前端框架；
小巧、零依賴，適合中小型項(xiàng)目或內(nèi)嵌功能；
與服務(wù)端模板天然契合，利于 SEO 和安全性。
適用場(chǎng)景
CMS、后臺(tái)管理、業(yè)務(wù)系統(tǒng)；
已有 Django、Rails、Flask、Spring 等服務(wù)端渲染項(xiàng)目；
希望快速增強(qiáng)頁面交互的傳統(tǒng)應(yīng)用。
注意事項(xiàng)
更復(fù)雜的前端狀態(tài)管理，htmx 不如 React/Vue 靈活；
高并發(fā)場(chǎng)景下，需關(guān)注后端渲染壓力；
開發(fā)時(shí)常需判斷請(qǐng)求是否來自 htmx（HX-Request header），以決定返回整頁還是片段。
總結(jié)
htmx 讓 HTML 本身具備“超能力”： 無需大量 JavaScript，僅靠屬性配置和后端渲染，就能實(shí)現(xiàn) AJAX、動(dòng)畫、實(shí)時(shí)更新等功能。
對(duì)于 傳統(tǒng) SSR 項(xiàng)目 或 追求簡(jiǎn)潔開發(fā)體驗(yàn)的場(chǎng)景，htmx 都是一個(gè)極具吸引力的選擇。
閱讀原文：原文鏈接
該文章在 2025/9/3 10:10:02 編輯過
400 186 1886
