2024 年 HTMX 探索

您准备好探索当前 Web 开发领域的游戏规则改变者了吗？HTMX是一个突破性的库，它改变了您与 Web 应用程序交互的方式。 HTMX 允许您将 AJAX 查询、服务器端事件和 Websockets 直接优雅地合并到 HTML 中，从而无需不必要的 JavaScript 代码。它时尚、高效，并使前端开发比以往任何时候都更容易——难怪它成为开发社区的热门话题。

HTMX 尝试直接在 HTML 代码中访问现代浏览器功能，而不需要一行 JavaScript。尽管该库的 1.0 版本几年前才发布，但在 2020 年底，该项目已经变得非常受欢迎。

截至本文，它在 GitHub 上已有近 30,000 个 star，并已被批准进入 GitHub开源加速器！

让我们进一步探讨为什么开发社区对 HTMX 如此兴奋。

什么是 HTMX

HTMX 是一个小型、无依赖性、可扩展的库，可让您直接从 HTML 使用现代浏览器功能，而不需要 JavaScript。它使您能够直接通过 HTML 属性利用 AJAX（即获取内容而不刷新整个页面）、CSS 转换、WebSocket 和服务器发送事件。该项目的目的是克服 HTML 的限制并创建真正的超文本。

理解我们正在讨论的内容的最简单方法是什么？一个例子！看看这个片段：

<button hx-get="/api/v1/hello-world" hx-swap="outerHTML">Click Me</button>

特殊hx-get和hx-swap属性告诉HTMX：

“当用户单击此按钮时，告诉浏览器向‘/api/v1/hello-world’端点执行 AJAX 请求，并使用服务器返回的 HTML 内容更改整个按钮。”

HTMX 是如何创建的

Web 开发自最初开始以来已经取得了显着的进步。它始于静态网站，当时手动更新 HTML 文件。 JavaScript 的到来实现了交互，为 Web 开发开启了一个全新的时代，并改变了我们曾经所知的编程方式。然后 AJAX 完成了转换，实现了平滑的内容更改和新的交互。

React、Vue和Angular等框架逐渐崭露头角，并最终成为行业标准。这些技术非常适合结构化应用程序。然而，它们也非常复杂，有时您只想让事情变得简单。这就是为什么 HTMX！

HTMX 承诺提供高效的交互性，而无需典型 JavaScript 安装的复杂性。特别是，它向 HTML 添加了自定义属性，允许在不需要 JavaScript 的情况下执行 AJAX 查询。

HTMX 基础：语法和功能

HTMX 的核心是能够直接从 HTML 发送 AJAX 查询，而无需使用 JavaScript。这可能是因为以下属性：

• hx-get``GET：对给定的 URL执行请求。
• hx-post``POST：对给定的 URL执行请求。
• hx-put``PUT：对给定的 URL执行请求。
• hx-patch``PATCH：对给定的 URL执行请求。
• hx-delete``DELETE：对给定的 URL执行请求。

当触发某个事件时，具有这些 HTMX 属性之一的 HTML 元素会向提供的 URL 发送指定类型的 AJAX 请求。考虑下面的情况：

<button hx-post="/api/v1/products/buy">Buy</button>

这基本上告诉浏览器当用户单击 时<button>，向 URL  '/api/v1/products/buy' 发送 POST 请求并将响应加载到<button>.

请求触发器

默认情况下，HTMX AJAX 请求由与 HTML 元素相关的“自然”事件发起。

• change：对于<input>、<textarea>、 和<select>元素。
• submit: 对于<form>元素。
• click：对于所有其他元素。

回到前面的示例，现在应该很清楚为什么发起请求的操作是单击，即使没有提及。

要对默认触发器行为进行任何修改，您可以应用hx-trigger属性来设置哪个 HTML 事件将引发请求。

现在看看下面这个例子：

<span hx-get="/api/v1/products" hx-trigger="mouseenter">Hover Me!</span>

此请求触发器让浏览器知道，当用户将鼠标移到 上时<span>，会对 URL  '/api/v1/products' 执行 GET 请求，并在<span>.

查询参数和主体数据

根据参数和正文数据，HTMX 以不同的方式处理此类请求。

• GET 请求：查询参数应包含在提供给 的 URL 中hx-get。默认情况下，hx-get 不随请求提供附加参数。在任何情况下，您都可以使用 hx-params 属性来调整它，这在文档中进行了讨论。
• 非 GET 请求：如果元素是 a <form>，则主体应包含所有输入的值，并使用 name 属性作为参数名称。如果不是 a <form>，则正文将包含最接近的周围 的输入值<form>。否则，如果它包含 value 属性，它将出现在正文中。当默认行为不够时，hx-include和hx-params属性使您能够指定要设置的值和参数。或者，您可以通过侦听 htmx:configRequest 事件以编程方式编辑正文数据。

使用 HTMX 的好处

1.简单易学

与 React 或 Angular 等需要较高学习曲线的完整前端框架不同，HTMX 采用更简单的方法。通过扩展 HTML，它为程序员创建了一个熟悉的环境，让他们更容易上手。

2. 性能增强

HTMX 的轻量级特性可以加快页面加载速度。用户受益于更快的交互和更低的延迟，因为他们不必加载大型 JavaScript 库或框架。

3. 降低客户端复杂性。

HTMX 通过将大部分动态行为转移到服务器逻辑来降低客户端的复杂性。这会产生更干净、维护更好的代码。

4. 无缝集成

HTMX 旨在与当前技术无缝协作。无论您处理服务器端框架还是数据库，HTMX 都可以无缝集成，无需进行重大更改。

5、改善用户体验

HTMX 允许动态更新内容而无需重新加载整个页面，从而提供更加无缝的用户体验。过渡流畅，用户不会因页面突然刷新而中断。

6. 具有成本效益的开发

由于 HTMX 项目简单且对前端开发的依赖较少，因此通常可以更快地完成，从而在开发时间和资源方面带来成本效益。

7. 后端开发人员赋能

后端开发人员现在可以在设计用户界面方面发挥积极作用。他们可以使用 HTMX 创建交互式 UI 组件，而无需深入了解前端代码。

在速度、性能和用户体验至关重要的世界中，HTMX 对于 Web 开发人员来说似乎是一个有吸引力的选择。它提供了强度和简单性的良好结合，使其成为当前 Web 开发的绝佳工具。

结论

在不断变化的 Web 开发格局中，HTMX 拥有自己的高速公路。它通过为开发人员提供熟悉的环境并使其易于深入研究 Web 交互性来改进 HTML。

当网页的性能可能决定其用户体验时，HTMX 以其轻量级特性脱颖而出，确保快速加载和流畅的交互。它还使后端开发人员能够进一步深入研究前端活动，从而弥合服务器逻辑和客户端行为之间通常存在的巨大差距。

虽然前端市场似乎由 React 和 Vue 等重量级产品主导，但 HTMX 提供了独特的视角。它对动态 Web 程序需要大量 JavaScript 的广泛观点提出了质疑，表明还有另一种方法。

HTMX 可能不仅仅是市场上最新的小工具。它暗示了我们对 Web 开发的看法发生了转变，强调了技术复杂性和用户体验之间的微妙平衡。谁知道随着社区的扩大和更多 Web 开发人员采用 HTMX，HTMX 将把 Web 开发的未来带向何方？