从零开始用 htmx 开发构建动态 Web 应用

admin

2025年9月2日 23:1 本文热度 102

1. 什么是 htmx？

htmx 是一个轻量级的开源 JavaScript 库，它允许你直接通过 HTML 属性（如 hx-get、hx-post 等）来实现 AJAX 请求、CSS 过渡、WebSocket、Server-Sent Events 等功能。换句话说，它让 HTML 本身就能拥有现代前端的动态交互能力，而无需额外编写复杂的 JavaScript。

特点：

体积小巧（约 14 KB min.gz），零依赖；
与 React、Vue 等框架相比，能大幅减少前端代码量（有报告称可减少约 67%）htmx.org。

为什么选择 htmx？

突破 HTML 的限制默认情况下，只有 <a> 和 <form> 标签能触发 HTTP 请求，而且会导致整个页面刷新。htmx 通过扩展属性让任意元素都能触发各种 HTTP 请求，并能精确更新页面局部。
开发更简单交互逻辑通过 HTML 属性配置，无需复杂的 JavaScript，保持代码简洁、直观。
后端驱动服务器返回 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>

示例：点击按钮

<button hx-post="/clicked" hx-swap="outerHTML">  Click Me</button>

hx-post="/clicked"：点击按钮时向 /clicked 发送 AJAX POST 请求；
hx-swap="outerHTML"：用服务器返回的 HTML 替换当前按钮本身。

如果服务器返回：

<button>Clicked!</button>

页面按钮会变成 “Clicked!”。

3. 常见属性

以下是 htmx 的核心属性（来自官方文档）：

属性	说明
`hx-get` / `hx-post` / `hx-put` / `hx-patch` / `hx-delete`	发送指定 HTTP 方法请求
`hx-trigger`	指定触发请求的事件（如 `click`、`change`、`keyup` 等）
`hx-target`	指定响应内容要插入的目标元素
`hx-swap`	定义内容替换方式，如 `innerHTML`、`outerHTML`、`beforeend` 等
`hx-select`	从响应 HTML 中选择部分内容插入
`hx-swap-oob`	支持“带外”更新（OOB swaps），允许更新页面上其他位置的元素
`htmx.config.*`	全局配置（跨域凭证、默认 swap 行为等）

4. 高级功能

除了基础 AJAX，htmx 还支持许多实用场景：

无刷新表单提交：hx-post + hx-swap
延迟加载 / 无限滚动：hx-trigger="revealed" 实现滚动到底部时加载
内联编辑（Inline Editing）：点击后替换为输入框，提交保存
文件上传、进度条、模态对话框 等 UI 交互
实时更新：支持 Server-Sent Events (SSE) 和 WebSocket

完整示例可查看 htmx 官方 Examples（https://htmx.org/examples/）。

5. 实战：留言板（Node.js + htmx）

项目结构

/├─ 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>