前端框架很多,但是很多时候只是想要一个简单的功能,如点击一个按钮,然后发送一个请求,然后更新页面的某个部分,这个时候,就不需要复杂的前端框架,只需要一个简单的工具就可以了,这个时候,htmx
就是一个很好的选择。
htmx
的实现原理是通过 AJAX、HTML5 和 WebSocket 等技术,将前端和后端的交互方式从传统的请求-响应模式转变为增量更新模式,从而实现了无刷新、无跳转的动态页面更新。
htmx 如何使用
cdn
npm
npm install htmx.org --save
htmx.org
是最新版本,htmx
是旧版本,不推荐使用
AJAX 请求
htmx
可以通过在html标签中添加hx-get
、hx-post
、hx-put
、hx-patch
、hx-delete
属性来实现AJAX请求
The time is now:
hx-get
属性指定了请求的URL,hx-trigger
属性指定了触发请求的事件,这里是每5秒触发一次,hx-swap
属性指定了响应返回后,需要更新的内容,这里是更新span
标签的内容。
htmx
的AJAX
请求触发事件有很多,如click
、input
、load
、mouseover
、submit
等。
在进行 AJAX 请求时,给用户反馈
htmx
提供了hx-indicator
属性,可以指定一个元素,当AJAX
请求发出时,会在这个元素上添加一个hx-indicator
类,当请求返回时,会移除这个类,这样就可以通过 CSS 来实现一些动画效果,来给用户反馈。
另外,如果你希望响应返回后的内容被加载到一个不同于发出请求的元素中,可以使用hx-target
属性,该属性接受一个 CSS 选择器。通过指定hx-target
属性,可以将响应返回的内容加载到指定的元素中,而不是默认的发出请求的元素中。
有了返回的数据,我们可以通过hx-swap
属性来指定如何更新页面,htmx
提供了很多更新页面的方式,如outerHTML
、innerHTML
、afterbegin
、beforebegin
、afterend
、beforeend
等。
Get Some HTML & Append It & Scroll To Bottom
更复杂情况,需要协调两个元素之间的请求,如何处理呢?例如一个元素的请求能够取代另一个元素的请求,或者等待另一个元素的请求完成后再发出请求。
htmx
提供了hx-sync
属性, 通过指定 hx-sync 属性,可以将多个元素的请求进行同步,从而实现协调和控制请求的顺序和优先级。
总结
htmx
是一个很好的工具,可以让在不需要写js代码的情况下,实现很多复杂的功能。但是,通过上述例子也可以发现,为了实现一些复杂的功能,需要在html中添加很多属性,这样会导致HTML
代码变得很臃肿,不利于维护,所以,htmx
的使用场景还是有一定的局限性的,需要根据实际情况来选择使用。