htmx-使 HTML 更强大

让我们先来看一段俳句:

javascript fatigue:

longing for a hypertext

already in hand

这个俳句很有意思，是开源项目 htmx 文档中写的，意思是说，我们已经有了超文本，为什么还要去使用 javascript，javascript 的繁琐，让人感到疲惫。

目前前端框架很多，但是很多时候我们只是想要一个简单的功能，比如点击一个按钮，然后发送一个请求，然后更新页面的某个部分，这个时候，我们就不需要一个复杂的前端框架，只需要一个简单的工具就可以了，这个时候，htmx 就是一个很好的选择。

htmx 是什么

先来看HTML，HTML 的优势在于，它是一个声明式的语言，我们可以直接在 html 中声明我们想要的效果，而不需要去写 js 代码，这样就可以减少很多的代码量，同时也可以减少很多的 bug。而且，html是一个很简单的语言，很多人都可以很快的上手，这样也可以减少很多的学习成本。

我们先看看HTML的一些限制：

• 仅 <a> 和 <form> 发送HTTP请求

• 仅 click和submit 事件触发HTTP请求

• 仅 GET 和 POST 方法可以用

传统的前端开发中，页面的更新通常是通过重新加载整个页面来实现的

htmx 让我们可以在 HTML 中使用属性直接访问AJAX, CSS Transitions, WebSockets和Server Sent Events，用超文本语言来构建现代用户界面。还有一个消息，2023年6月,htmx 进入了 github 加速器扶持的项目的第一序列。

htmx 就是利用了这些 HTML 优势，解决了 HTML 的这些限制，让我们可以在HTML中直接声明我们想要的效果，而不需要去写js代码。

htmx 如何实现的

htmx 的实现原理是通过 AJAX、HTML5 和 WebSocket 等技术，将前端和后端的交互方式从传统的请求-响应模式转变为增量更新模式，从而实现了无刷新、无跳转的动态页面更新。具体来说，htmx 通过在 HTML标签中添加自定义属性，如 hx-get、hx-post、hx-trigger 等，来指定需要执行的 AJAX 请求、响应后的操作以及触发 AJAX 请求的事件等。在响应返回后，htmx 会根据响应的内容和指定的操作，更新页面中的部分内容，从而实现了动态更新页面的效果。此外，htmx 还支持一些高级特性，如服务器推送、表单验证、动画效果等，可以帮助开发者更加方便地实现复杂的交互效果。

对了，htmx 的AJAX请求实现是继承自 intercooler.js。

htmx 如何使用

htmx 的安装

htmx 的安装非常简单，只需要在HTML中引入htmx 的cdn地址就可以了，如下所示:

<script src="https://unpkg.com/htmx.org@1.9.5" integrity="sha384-xcuj3WpfgjlKF+FXhSQFQ0ZNr39ln+hwjN3npfM9VBnUskLolQAcN80McRIVOPuO" crossorigin="anonymous"></script>

使用 npm 安装的话，只需要执行下面的命令就可以了:

npm install htmx.org --save

htmx.org是最新版本, htmx 是旧版本，不推荐使用。

htmx 的使用

AJAX 请求

htmx 可以通过在html标签中添加hx-get、hx-post、hx-put、hx-patch、hx-delete属性来实现AJAX请求，如下所示:

<div hx-get="/time" hx-trigger="every 5s">The time is now: <span hx-swap="outerHTML"></span></div>

上面的代码中，hx-get属性指定了请求的URL，hx-trigger属性指定了触发请求的事件，这里是每5秒触发一次，hx-swap 属性指定了响应返回后，需要更新的内容，这里是更新 span 标签的内容。

htmx 的AJAX请求触发事件有很多，如click、input、load、mouseover、submit等。

<button hx-get="/click" hx-trigger="click">Click Me!</button>

在进行 AJAX 请求时，如何给用户反馈呢？

htmx 提供了hx-indicator属性，可以指定一个元素，当 AJAX 请求发出时，会在这个元素上添加一个hx-indicator类，当请求返回时，会移除这个类，这样我们就可以通过 CSS 来实现一些动画效果，来给用户反馈。

<div>
    <button hx-get="/click" hx-indicator="#indicator">
        Click Me!
    </button>
    <img id="indicator" class="htmx-indicator" src="/spinner.gif"/>
</div>

另外，如果你希望响应返回后的内容被加载到一个不同于发出请求的元素中，可以使用 hx-target 属性，该属性接受一个 CSS 选择器。通过指定 hx-target 属性，可以将响应返回的内容加载到指定的元素中，而不是默认的发出请求的元素中。

<!-- this fixed-height div will scroll to the bottom of the div after content is appended -->
<div style="height:200px; overflow: scroll" 
   hx-get="/example" 
   hx-swap="beforeend scroll:bottom">
 Get Some HTML & Append It & Scroll To Bottom
</div>

有了返回的数据，我们可以通过 hx-swap 属性来指定如何更新页面，htmx 提供了很多更新页面的方式，如 outerHTML、innerHTML、afterbegin、beforebegin、afterend、beforeend等。

v<form hx-post="/store">
    <input id="title" name="title" type="text"
        hx-post="/validate"
        hx-trigger="change"
        hx-sync="closest form:abort"
    >
    <button type="submit">Submit</button>
</form>

更复杂情况，需要协调两个元素之间的请求，如何处理呢？例如一个元素的请求能够取代另一个元素的请求，或者等待另一个元素的请求完成后再发出请求。

htmx 提供了 hx-sync 属性, 通过指定 hx-sync 属性，可以将多个元素的请求进行同步，从而实现协调和控制请求的顺序和优先级。

<style>
  .smooth {
    transition: all 1s ease-in;
  }
</style>
<div id="color-demo" class="smooth" style="color:red"
      hx-get="/colors" hx-swap="outerHTML" hx-trigger="every 1s">
  Color Swap Demo
</div>

在 htmx 中，当从服务器接收到新的内容时，会先检查页面中是否存在与新内容中相同 id 属性的元素。如果找到了匹配的元素，则会将旧内容的属性复制到新元素上，然后再进行内容的替换。在替换完成后，会有一个“settle”延迟（默认为20毫秒），然后再将新属性值进行替换。这种方式可以让 CSS 过渡效果在不需要开发者编写任何 JavaScript 的情况下实现。

htmx 还有很多其他的功能，如表单验证、服务器推送、WebSocket等，具体可以参考 htmx 文档，这里不再一一介绍了。

总结

htmx 是一个很好的工具，可以让我们在不需要写js代码的情况下，实现很多复杂的功能。但是，通过上述例子也可以发现，为了实现一些复杂的功能，我们需要在html中添加很多属性，这样会导致 HTML 代码变得很臃肿，不利于维护，所以，htmx 的使用场景还是有一定的局限性的，我们需要根据实际情况来选择使用。总之，善于使用工具，才能更好的提高我们的开发效率。

参考资料：

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_transitions/Using_CSS_transitions

https://htmx.org/docs

本文作者是360奇舞团开发工程师 - alwy