htmx-使HTML更强大

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

htmx

让我们先来看一段俳句:

javascript fatigue:

longing for a hypertext

already in hand

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

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

htmx是什么

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

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

1. 仅 <a> 和 <form> 发送HTTP请求

2. 仅 click和submit 事件触发HTTP请求

3. 仅 GET 和 POST 方法可以用

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

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 属性，可以将响应返回的内容加载到指定的元素中，而不是默认的发出请求的元素中。

<input type="text" name="q"hx-get="/trigger_delay"hx-trigger="keyup delay:500ms changed"hx-target="#search-results"placeholder="Search..."
>
<div id="search-results"></div>

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

<!-- 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>

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

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

<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>

CSS Animations 示例

<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

- END -

关于奇舞团

奇舞团是 360 集团最大的大前端团队，代表集团参与 W3C 和 ECMA 会员（TC39）工作。奇舞团非常重视人才培养，有工程师、讲师、翻译官、业务接口人、团队 Leader 等多种发展方向供员工选择，并辅以提供相应的技术力、专业力、通用力、领导力等培训课程。奇舞团以开放和求贤的心态欢迎各种优秀人才关注和加入奇舞团。