bigskysoftware/htmx
摘要
htmx 是一个 JavaScript 库,通过简单的 HTML 属性支持构建现代用户界面,实现 AJAX、CSS 过渡和其他交互,从而简化 Web 开发。
查看缓存全文
缓存时间: 2026/08/29 21:22
bigskysoftware/htmx 来源:https://github.com/bigskysoftware/htmx
htmx (https://htmx.org) — HTML的高性能工具
Discord (https://htmx.org/discord)
Netlify (https://app.netlify.com/sites/htmx/deploys)
Bundlephobia (https://bundlephobia.com/result?p=htmx.org)
Bundlephobia (https://bundlephobia.com/result?p=htmx.org)
简介
htmx 允许你直接在 HTML 中访问 AJAX (https://htmx.org/docs#ajax)、CSS 过渡 (https://htmx.org/docs#css_transitions)、WebSockets (https://htmx.org/extensions/ws/) 和服务器推送事件 (https://htmx.org/extensions/sse/),使用属性 (https://htmx.org/reference#attributes) 实现。这使你能够以超文本的简洁性 (https://en.wikipedia.org/wiki/HATEOAS) 和强大能力 (https://www.ics.uci.edu/~fielding/pubs/dissertation/rest_arch_style.htm) 构建现代化用户界面 (https://htmx.org/examples)。
htmx 体积小巧(约 14KB 压缩后 (https://cdn.jsdelivr.net/npm/htmx.org/dist/)),无依赖 (https://github.com/bigskysoftware/htmx/blob/master/package.json) 且可扩展 (https://htmx.org/extensions)。
设计动机
- 为什么只有
<script>和<a>能发起 HTTP 请求? - 为什么只有
click和submit事件能触发请求? - 为什么只有 GET 和 POST 方法可用?
- 为什么你只能替换整个页面?
通过消除这些人为限制,htmx 将 HTML 补全为真正的超文本 (https://en.wikipedia.org/wiki/Hypertext)。
快速开始
<button hx-post="/clicked" hx-swap="outerHTML">
点击我
</button>
hx-post (https://htmx.org/attributes/hx-post) 和 hx-swap (https://htmx.org/attributes/hx-swap) 属性告诉 htmx:
“当用户点击此按钮时,向 /clicked 发送 AJAX 请求,并用响应内容替换整个按钮。”
htmx 是 intercooler.js (http://intercoolerjs.org) 的升级版。
作为 Node 包安装
使用 npm 安装:
npm install htmx.org --save
注意:存在一个旧版失效包 htmx。本包正确名称为 htmx.org。
网站与文档
贡献指南
想参与贡献?请查看我们的 贡献指南。
时间有限?欢迎成为赞助者 (https://github.com/sponsors/bigskysoftware#sponsors)。
开发指南
在本地开发 htmx,需先安装开发依赖:
npm install
然后在项目根目录启动 Web 服务器(推荐使用):
npx serve
通过访问以下路径运行测试套件:
此时你可修改 /src/htmx.js 添加功能,并在 /test 相应目录中添加测试:
/test/index.html— 主测试页面(包含所有其他测试)/test/attributes— 属性专项测试/test/core— 核心功能测试/test/core/regressions.js— 回归测试/test/ext— 扩展测试/test/manual— 无法自动化的手动测试
htmx 使用 mocha (https://mochajs.org/) 测试框架、chai (https://www.chaijs.com/) 断言库以及 sinon (https://sinonjs.org/releases/v9/fake-xhr-and-server/) 模拟 AJAX 请求。这些工具都非常优秀。
短歌
JavaScript 疲倦感:
渴望手中已有的超文本
相似文章
HTMX 太酷了,我自己写了一个
本文探讨了 HTMX 这个库,它偏爱服务器端渲染的 HTML,而非大量使用 JavaScript 的前端。作者发现 HTMX 对于持久化的 UI 组件很有用,但最终出于个人对最小依赖的偏好,决定自己实现一套解决方案。
@htmx_org: 非常高兴宣布 htmx 4 的发布!
htmx 宣布发布其 HTML 扩展库版本 4,该库用于构建现代 Web 界面。
htmx 4.0.0 已发布
htmx 4.0.0 已发布,主要变更包括显式属性继承、标准化事件名称,以及从 XMLHttpRequest 迁移至 fetch() API,与版本 2 相比行为差异极小。
从代码库中移除 React.js 并采用 HTMX 实现 UI 交互
Misago 论坛项目解释了其移除 React.js 并采用 HTMX 实现 UI 交互的决定,理由包括降低复杂度、提升性能以及更易于定制。
我如何将 HTMX 与 Go 结合使用
这篇博文由 Alex Edwards 撰写,解释了如何将 HTMX 与 Go 集成以构建服务端渲染的 Web 应用程序,涵盖了模板结构、局部响应、重定向和错误处理。