新闻： htmx 2.0 已发布！目前它尚未标记为latest NPM，因此使用1.x 系列的人不会意外升级。htmx 官方团队宣称将在 2025 年的某个时间点将 2.0 标记为latest。

介绍

htmx 让你可以使用属性直接在 HTML 中访问AJAX、CSS Transitions、WebSockets和服务器发送事件，这样你就可以使用超文本的简单性和 强大功能构建现代用户界面
htmx 体积小（~14k min.gz'd）、 无依赖、 可扩展，与 react 相比，代码库大小减少了67%

动机

  • 为什么只能 <a> 和 <form> 能够发出 HTTP 请求？
  • 为什么只有 click 和 submit 事件才能触发事件？
  • 为什么只提供 GET 和 POST 方法？
  • 为什么只能更换整个Web页面？
通过消除以上这些限制，htmx 完善了 HTML 作为超文本的功能。

快速开始

<script src="https://unpkg.com/[email protected]"></script>
<!-- have a button POST a click via AJAX -->
<button hx-post="/clicked" hx-swap="outerHTML">
    Click Me
</button>

hx-post此按钮上的属性hx-swap告诉 htmx：

“当用户点击此按钮时，向 /clicked 发出 AJAX 请求，并用 HTML 响应替换整个按钮。”

htmx 是intercooler.js的后继者。

阅读文档介绍以获得更深入的介绍。

请注意，htmx 2.x 已放弃对 IE 的支持。如果你需要 IE 支持，可以使用1.x 代码，该代码行将永久受支持。

书籍

htmx官方团队出版了《超媒体系统》（Hypermedia Systems）一书，这是一本关于如何使用 htmx 等构建超媒体驱动应用程序的书：

《超媒体系统》