告别 JavaScript 框架内卷：用原生 HTML 就能写出现代交互界面的「超文本复兴工具」

昆仑开源易选

2026-08-30 0 38

你是否厌倦了为一个表单提交、一个下拉刷新或一次局部更新，就要引入 React/Vue、配置 Webpack、编写组件、管理状态？htmx 是一个颠覆认知的开源库——它不让你写一行 JS 逻辑，而是直接在 HTML 标签里加几个 hx-* 属性，就能实现 AJAX 请求、WebSocket 实时通信、CSS 过渡动画、服务端事件推送等现代 Web 功能。它不是框架，而是一次对 HTML 本质的回归：让超文本（hypertext）真正“活”起来。

核心功能

告别 JavaScript 框架内卷：用原生 HTML 就能写出现代交互界面的「超文本复兴工具」替换内部、hx-swap="outerHTML" 替换自身、hx-swap="beforeend" 追加到末尾，甚至支持 hx-swap="morph"（基于 morphdom 的智能 DOM 差分更新），让局部刷新既安全又高效。

原生级事件驱动交互：不只是 click 和 submit，还能监听 hx-trigger="revealed"（元素进入视口）、hx-trigger="every 2s"（定时轮询）、hx-trigger="intersect once"（首次交叠），让交互逻辑完全声明式地写在 HTML 中。

开箱即用的实时能力：无需手写 WebSocket 连接或 SSE 客户端——通过官方扩展 hx-ext="ws" 或 hx-ext="sse"，配合 hx-ws="/chat" 或 hx-sse="connect:/events"，几行 HTML 就能接入聊天室、实时通知、数据看板等场景。

无缝集成 CSS 过渡与动画：利用 hx-swap="innerHTML transition:true"，自动添加 htmx-swapping/htmx-settling 类名，开发者只需写好 CSS transition 规则，就能实现淡入、滑动、缩放等交互动效，零 JS 动画代码。

服务端优先的 HATEOAS 架构支持：响应体可直接返回带 hx-* 属性的新 HTML 片段，前端无需解析 JSON、拼接模板；服务端决定下一步交互能力（如“点击后禁用按钮 + 显示加载态 + 成功后跳转”），真正践行 REST 原则中的超媒体即应用状态引擎（HATEOAS）。

轻量可插拔的扩展生态：核心仅 14KB（gzip 后），无任何依赖；所有高级能力（如文件上传、客户端验证、延迟请求、历史管理）均以独立扩展（extensions）形式提供，按需加载，不增加基础包体积。

渐进增强、降级友好：所有 htmx 行为都建立在标准 HTML 语义之上——若 JS 失败或被禁用，hx-post 按钮会自动退化为普通表单提交（仍可工作），保障核心功能可用性，符合无障碍与 SEO 最佳实践。

技术亮点

纯属性驱动的声明式架构：不引入虚拟 DOM、不接管渲染生命周期，所有行为由 HTML 属性触发，DOM 更新直接操作真实节点，避免抽象层性能损耗与调试黑盒，学习成本趋近于零。
零运行时依赖的极简内核：源码仅一个 htmx.js 文件（约 2000 行），无第三方库依赖，打包体积可控，CDN 直引即可用，完美适配静态站点、PHP/Python/Ruby 服务端模板、甚至纯 HTML 页面。
扩展机制设计优雅：每个扩展（如 ws.js、sse.js）通过标准事件钩子（htmx:configRequest、htmx:beforeSwap）介入流程，不侵入核心逻辑，社区已贡献 30+ 扩展，覆盖表单验证、节流防抖、离线缓存等场景。
深度兼容现代 Web 标准：原生支持 Fetch API、AbortController（取消请求）、IntersectionObserver（懒加载）、Custom Elements（自定义标签），并提供完整 TypeScript 类型定义，兼顾前沿特性与向后兼容。
测试驱动开发成熟：采用 Mocha + Chai + Sinon 组合，覆盖属性解析、请求调度、DOM 操作、扩展集成等全链路，回归测试集完善，确保每次更新不破坏已有行为，企业级项目可放心采用。

适合哪些人用

htmx 特别适合三类开发者：后端工程师（想快速交付带交互的管理后台，不用学前端框架）、全栈初学者（专注业务逻辑，拒绝配置地狱）、注重性能与可维护性的团队（减少 JS 包体积、降低首屏加载时间、提升 SEO 友好度）。

真实场景案例：
• 某政务系统后台用 htmx 替换原有 jQuery 方案：登录表单提交后，服务端返回含 hx-trigger="login-success" 的 HTML，自动弹出欢迎提示并跳转首页，代码量减少 70%，首屏 JS 体积从 800KB 降至 14KB；
• 电商商品列表页实现“无限滚动”：滚动到底部时，<div hx-get="/products?page=2" hx-trigger="intersect once" hx-swap="beforeend"></div> 自动加载新商品并追加，全程无 JS 逻辑，服务端仅需返回标准 HTML 片段。

快速上手

两种方式任选其一：

① CDN 直接引入（推荐新手）：

<script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.10/dist/htmx.min.js" 
        integrity="sha384-H5SrcfygHmAuTDZphMHqBJLc3FhssKjG7w/CeCpFReSfwBWDTKpkzPP8c+cLsK+V" 
        crossorigin="anonymous"></script>

<button hx-post="/api/like" hx-swap="outerHTML" hx-target="#like-btn">
  <span id="like-count">124</span> 👍
</button>

② npm 安装（工程化项目）：

npm install htmx.org --save

注意：请务必使用 htmx.org（非已废弃的 htmx 包），然后在入口 JS 中导入：import 'htmx.org' 或通过 script 标签加载。

同类对比 / 注意事项

vs jQuery/AJAX 手写：htmx 不是语法糖，而是范式升级——它将请求逻辑、状态管理、DOM 更新全部声明化，避免回调地狱与内存泄漏风险；jQuery 插件生态碎片化，htmx 扩展机制统一规范。
vs Vue/React：不替代复杂 SPA 场景，但对 CRUD 管理后台、内容展示站、营销落地页等“HTML 为主、交互为辅”的场景，htmx 开发效率更高、部署更简单、长期维护成本更低。
注意事项：服务端需返回合法 HTML（非纯 JSON），建议搭配模板引擎（如 Jinja2、Twig、ERB）；高频交互需合理使用 hx-boost（全局启用）或 hx-disable（临时禁用）防止重复提交；部分旧版 IE 需 Polyfill（官方文档提供方案）。