快速导航
重点摘要
- htmx 是一个 JavaScript 工具库，通过使用 HTML 属性来完成常见功能，从而简化了 HTTP 请求的处理过程。
- 你可以通过 CDN 上提供的 htmx 脚本链接，轻松地将它加入到你的网页应用中。
- 你可以运用 htmx 实现诸如分页、表单验证和在线编辑等互动功能，而无需编写任何 JavaScript 代码。
最近，网络开发社区对 htmx 的讨论非常热烈，但这项令人兴奋的新技术究竟是什么呢？ 实际上，它比你想象的要简单得多，而且 htmx 的实用性可能足以证明其受欢迎程度是合理的。
什么是 htmx？
htmx 是一个功能专一的小型 JavaScript 库。 它利用 HTML 属性来提供常见的 JavaScript 功能。 以下是一个简单的例子：
<a href="https://wilku.top/about" hx-get="https://wilku.top/about">关于</a>
这段代码展示了一个自定义的 HTML 属性 hx-get。 当你点击这个链接时，htmx 库会发送一个 AJAX 请求并加载目标页面，而无需完全刷新浏览器。
htmx 还具备其他功能，可以让你发送请求：
- 从 a 和 form 以外的元素触发。
- 在点击和提交之外的事件中触发。
- 使用除 GET 和 POST 之外的 HTTP 方法。
- 替换页面的任何部分，而不仅仅是整个页面。
虽然 htmx 支持 CSS 动画和 WebSockets 等技术，但其核心目标是简化 HTTP 请求的处理流程。
如何在简易网页应用中运用 htmx
htmx 专注于解决网络应用程序或网站中的特定功能，而不是整个应用程序的行为模式。
这个库的一个巨大优点是它非常容易上手。 你可以选择下载并安装它的副本，但由于它没有依赖项，你只需在 CDN 上添加指向脚本的链接即可：
<script
src="https://unpkg.com/[email protected]"
integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC"
crossorigin="anonymous"></script>
对于本地开发和测试，如果还没有运行 Web 服务器，你需要搭建一个，例如 Apache。 即使你只是尝试使用静态文件，这也是必需的，因为 file: 协议不允许 AJAX 请求。
使用无限滚动的简单示例
无限滚动是 Twitter 等网站广泛使用的一种技术。 当你到达列表底部时，无限滚动会加载更多项目，让你继续浏览。
此功能通常需要 JavaScript 来检测页面滚动位置，并在不刷新页面的情况下加载新项目。 但 htmx 可以帮你完成这一切。
考虑以下用于表示帖子列表的标记，每个帖子都使用一个图像：
<ol>
<li><img src="http://placekitten.com/420/300" /></li>
<li><img src="http://placekitten.com/400/320" /></li>
<li><img src="http://placekitten.com/440/300" /></li>
<li><img src="http://placekitten.com/420/340" /></li>
<li><img src="http://placekitten.com/300/200" /></li>
</ol>
假设你在文件 feed1.html 中有这些项目，而在 feed2.html 等文件中还有更多项目。 这样，每个页面将显示一部分项目，你可以滚动浏览：
现在，你可以使用“下一页”链接从一个页面跳转到另一个页面，但你也可以轻松实现无限滚动。 你只需将最后一个列表项修改为：
<li hx-trigger="revealed" hx-get="feed2.html" hx-select="li" hx-swap="afterend">
<img src="http://placekitten.com/300/200" />
</li>
通过将这四个属性添加到最后一个列表项，你就能实现无限滚动。 以下是每个属性的含义：
|
属性 |
值 |
含义 |
|---|---|---|
|
hx-trigger |
revealed |
当这个元素首次在屏幕上显示时…… |
|
hx-get |
feed2.html |
…向 feed2.html 发送一个 GET 请求，… |
|
hx-select |
li |
…从响应中选择 li 元素，… |
|
hx-swap |
afterend |
…并将它们添加到这个元素之后。 |
当你滚动到列表底部时，你会注意到页面会自动加载新的内容。 你可以通过观察滚动条并检查浏览器的开发者工具来确认这一点：
请注意，在这个简单的静态页面设置中，feed2.html 页面包含一个 hx-get 属性设置为 feed3.html 的最后一个项目，依此类推。 另外，请留意 htmx 如何为滚动事件添加监听器。
htmx 的其他潜在用途
你可以运用 htmx 实现许多其他常见的交互，包括：
- 分页：当访问者点击分页链接时加载并替换项目。
- 表单验证：提交时，用确认消息或表单的子集替换表单。
- 进度条：根据 ping 响应定期更新进度条的值。
- 在线编辑：将元素替换为包含该元素值的文本区域。
虽然可以使用标准的 JavaScript 构建上述每个示例，但 htmx 只是简化了这个过程。
htmx 的优劣势分析
优势
htmx 可以极大地简化常见的交互，这对于许多网络应用程序甚至是网站都非常有益。 它使得设计师和其他前端网页使用者无需学习 JavaScript 就能添加功能。
通过抽象常见行为，htmx 确保项目间以及项目内部的一致性。 无论谁来实现，无限滚动在不同页面上的行为方式都完全相同。
由于它强调声明性（是什么）方法而不是命令式（如何）方法，htmx 的功能通常更容易理解和推理。
劣势
虽然 htmx 可以让你在许多情况下不必考虑 JavaScript，但它并不能解决所有问题！ 你仍然需要编写代码来处理特定的业务逻辑和更多底层功能。
因为 htmx 为你做了很多工作，所以自定义行为的可能性会降低。 这通常是一个积极的权衡，但你需要准备好放弃一些控制权。
htmx 可能会让你避免编写 JavaScript，但你仍然应该意识到 JavaScript 代码是在后台运行的。 你可能会考虑在每个链接上使用 hx-get 属性来代替 href 属性。 但这引入了对 JavaScript 的依赖； 如果代码由于某种原因无法运行，你的用户将看到一个没有任何功能的链接。 你应该始终实践渐进增强，以防止这种情况发生。