用途
htmx 用于构建动态、交互式的 Web 应用。它通过 HTML 属性扩展 HTML,使任何元素都能发起 HTTP 请求并更新页面内容,无需编写 JavaScript。其核心哲学是:服务器返回 HTML(而非 JSON),保持超媒体/HATEOAS 模型;任何元素都可发起请求,而不仅是链接和表单;任何事件都可触发请求,而不仅是点击和提交。
主要能力
AJAX 属性:使用 hx-get、hx-post、hx-put、hx-patch、hx-delete 发起对应 HTTP 请求。
触发请求:通过 hx-trigger 控制请求时机。默认触发方式:input/textarea/select 使用 change,form 使用 submit,其他元素使用 click。支持自定义触发(mouseenter、keyup 等)、修饰符(once、changed、delay:500ms、throttle:1s、from:<selector>)、过滤器(如 click[ctrlKey])和特殊事件(load、revealed、every 2s)。
目标与交换:hx-target 控制内容插入位置,支持扩展选择器(this、closest、next、previous、find)。hx-swap 控制交换策略,包括 innerHTML(默认)、outerHTML、afterbegin、beforebegin、beforeend、afterend、delete、none,并可添加 swap/settle 修饰符。
请求指示器:通过 htmx-indicator 类显示加载状态,可用 hx-indicator 指定自定义指示器目标。
常见模式:实时搜索(keyup changed delay:500ms)、无限滚动(revealed 触发 + afterend 交换)、点击编辑(hx-target="this" + outerHTML)、带确认删除(hx-confirm)、带外交换(hx-swap-oob)。
表单处理:基本表单提交、通过 hx-include 包含其他元素值、通过 hx-vals 添加额外值、文件上传(hx-encoding="multipart/form-data")及上传进度监听。
请求同步:hx-sync 协调多个元素间的请求,策略包括 drop、abort、replace、queue。
Boosting:hx-boost="true" 将普通链接和表单转为 AJAX 请求并渐进增强,在禁用 JavaScript 时仍可优雅降级。
历史支持:hx-push-url="true" 将 URL 加入浏览器历史,支持后退按钮恢复状态;hx-history="false" 可禁用敏感数据的历史缓存。
头信息:自动发送 HX-Request、HX-Trigger、HX-Target、HX-Current-URL、HX-Prompt 等请求头,用于区分返回部分 HTML 还是完整页面;响应头可控制客户端行为,包括 HX-Trigger、HX-Redirect、HX-Location、HX-Refresh、HX-Retarget、HX-Reswap。
验证:集成 HTML5 验证,可设置 htmx.config.reportValidityOfForms = true 显示验证消息,也支持通过 htmx:validation:validate 事件自定义验证。
事件与脚本:使用 hx-on 进行内联事件处理,支持 htmx.ajax()、htmx.on()、htmx.process()、htmx.trigger() 等 JavaScript API。
CSS 过渡:在交换间保持元素 ID 稳定即可实现自动过渡。
配置:可通过 meta 标签或 JavaScript 全局配置,如 defaultSwapStyle、defaultSwapDelay、defaultSettleDelay、historyCacheSize、timeout。
使用方式
安装:
CDN(推荐快速开始):
<script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.8/dist/htmx.min.js"></script>
npm:
npm install htmx.org@2.0.8
然后导入:
import 'htmx.org';
下载后本地引入:
<script src="/js/htmx.min.js"></script>
调试:启用日志使用 htmx.logAll(),或设置自定义 logger。可通过浏览器开发者工具检查网络请求、HX-* 头信息、事件监听器及交换生命周期中的 htmx-* 类。
适用场景
适合希望以 HTML 为主、减少 JavaScript 编写量来构建动态交互界面的 Web 开发者。典型场景包括实时搜索、无限滚动、表单提交、局部内容更新、点击编辑、删除确认等。特别适合偏好超媒体驱动架构、希望保持服务端渲染的团队。
限制
资料未提供 htmx 的性能上限、浏览器兼容性范围、安全性考量或适用规模等明确限制说明。开发者需自行根据项目情况评估。
最佳实践
保持 ID 稳定以支持 CSS 过渡;为 htmx 请求返回部分内容,为直接访问返回完整页面;使用语义化 HTML;通过 hx-boost 实现渐进增强;监听 htmx:responseError 和 htmx:sendError 处理错误;启用表单验证;测试无 JavaScript 时的核心功能。
附加资源
详细资料可参考:references/attributes.md(完整属性参考)、references/events.md(所有 htmx 事件与生命周期)、references/examples.md(高级模式与真实示例)、references/server-side.md(服务端实现模式)。