high power tools for HTML
新闻: 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 方法?
  • 为什么只能更换整个屏幕?
通过消除这些限制,htmx 完善了 HTML 作为超文本的功能。

快速开始

<script src="https://unpkg.com/htmx.org@2.0.3"></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 等构建超媒体驱动应用程序的书:

《超媒体系统》