前端框架 - htmx

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

htmx 的实现原理是通过 AJAX、HTML5 和 WebSocket 等技术，将前端和后端的交互方式从传统的请求-响应模式转变为增量更新模式，从而实现了无刷新、无跳转的动态页面更新。

htmx 如何使用

cdn

复制代码

<script src="https://unpkg.com/[email protected]" integrity="sha384-xcuj3WpfgjlKF+FXhSQFQ0ZNr39ln+hwjN3npfM9VBnUskLolQAcN80McRIVOPuO" crossorigin="anonymous"></script>

npm

复制代码

 npm install htmx.org --save

htmx.org是最新版本, 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>

总结

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