用于 HTML 的强大工具

引言

htmx 允许你直接在 HTML 中访问 AJAX、CSS 过渡、 WebSockets 和 服务器发送事件， 使用 属性，从而你可以用超文本的 简洁性 和 强大功能 来构建 现代用户界面

htmx 很小（~14k min.gz'd）， 无依赖 且 可扩展

动机

• 为什么只有 <a> 和 <form> 能够发起 HTTP 请求？
• 为什么只有 click 和 submit 事件能够触发它们？
• 为什么只应提供 GET 和 POST？
• 为什么你只能替换整个屏幕？

通过移除这些任意约束，htmx 将 HTML 补全为一种 hypertext

快速入门

  <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>
  <!-- have a button POST a click via AJAX -->
  <button hx-post="/clicked" hx-swap="outerHTML">
    Click Me
  </button>

The hx-post and hx-swap attributes tell htmx:

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

htmx 是 intercooler.js 的继任者

作为 node 包安装

使用 npm 安装：

npm install htmx.org --save

请注意，有一个名为 htmx 的旧版损坏包。 这是 htmx.org。

网站与文档

• https://htmx.org
• https://htmx.org/docs

贡献

想要贡献？请查看我们的贡献指南

没时间？那么成为赞助者

开发指南

要在本地开发 htmx，你需要安装开发依赖项。

运行：

npm install

然后，在根目录运行一个 Web 服务器。

使用以下方法最简单：

npx serve

然后，您可以通过导航到以下位置来运行测试套件：

http://0.0.0.0:3000/test/

此时，你可以修改 /src/htmx.js 以添加功能，然后在 /test 下的相应区域添加测试。

• /test/index.html - 包含所有其他测试的根测试页面
• /test/attributes - 特定于属性的测试
• /test/core - 核心功能测试
• /test/core/regressions.js - 回归测试
• /test/ext - 扩展测试
• /test/manual - 无法自动化的手动测试

htmx 使用 mocha 测试框架、chai 断言框架 以及 sinon 来模拟 AJAX 请求。 它们都没问题。

haiku

javascript 疲劳：
渴望超文本
已在手中