</> htmx _{用于 HTML 的高性能工具}

介绍

htmx 让你可以使用 属性 直接在 HTML 中访问 AJAX、CSS 转换、WebSockets 和 服务器发送事件，因此你可以使用超文本的 简单 和 力量 构建 现代用户界面

¥htmx gives you access to AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML, using attributes, so you can build modern user interfaces with the simplicity and power of hypertext

htmx 很小（~14k min.gz’d）、无依赖、可扩展 并且将代码库大小减少了 与 react 相比为 67%

¥htmx is small (~14k min.gz’d), dependency-free, extendable & has reduced code base sizes by 67% when compared with react

动机

• 为什么只有 <a> 和 <form> 才能发出 HTTP 请求？

  ¥Why should only <a> & <form> be able to make HTTP requests?

• 为什么只有 click 和 submit 事件才能触发它们？

  ¥Why should only click & submit events trigger them?

• 为什么只有 GET 和 POST 方法应该是 可用的？

  ¥Why should only GET & POST methods be available?

• 为什么你只能替换整个屏幕？

  ¥Why should you only be able to replace the entire screen?

通过删除这些限制，htmx 将 HTML 完成为 超文本

¥By removing these constraints, htmx completes HTML as a hypertext

快速启动

  <script src="https://unpkg.com/htmx.org@2.0.4"></script>
  <!-- have a button POST a click via AJAX -->
  <button hx-post="/clicked" hx-swap="outerHTML">
    Click Me
  </button>

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

¥The hx-post and hx-swap attributes on this button tell htmx:

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

¥“When a user clicks on this button, issue an AJAX request to /clicked, and replace the entire button with the HTML response”

htmx 是 intercooler.js 的后继者

¥htmx is the successor to intercooler.js

阅读 文档介绍 以了解更多详细信息…介绍。

¥Read the docs introduction for a more in-depth… introduction.

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

¥Note that htmx 2.x has dropped IE support. If you require IE support you can use the 1.x code-line, which will be supported in perpetuity.