前端框架 - htmx

2024-01-27 10:52
文章标签 框架 前端 frontend htmx

本文主要是介绍前端框架 - htmx,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

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

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

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是旧版本,不推荐使用

AJAX 请求 

htmx可以通过在html标签中添加hx-gethx-posthx-puthx-patchhx-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标签的内容。

htmxAJAX请求触发事件有很多,如clickinputloadmouseoversubmit等。

<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提供了很多更新页面的方式,如outerHTMLinnerHTMLafterbeginbeforebeginafterendbeforeend等。

<!-- 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的使用场景还是有一定的局限性的,需要根据实际情况来选择使用。 

 

 

 

 

这篇关于前端框架 - htmx的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/650021

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

🍊作者:计算机编程-吉哥 🍊简介:专业从事JavaWeb程序开发,微信小程序开发,定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事,生活就是快乐的。 🍊心愿:点赞 👍 收藏 ⭐评论 📝 🍅 文末获取源码联系 👇🏻 精彩专栏推荐订阅 👇🏻 不然下次找不到哟~Java毕业设计项目~热门选题推荐《1000套》 目录 1.技术选型 2.开发工具 3.功能

cross-plateform 跨平台应用程序-03-如果只选择一个框架,应该选择哪一个?

跨平台系列 cross-plateform 跨平台应用程序-01-概览 cross-plateform 跨平台应用程序-02-有哪些主流技术栈? cross-plateform 跨平台应用程序-03-如果只选择一个框架,应该选择哪一个? cross-plateform 跨平台应用程序-04-React Native 介绍 cross-plateform 跨平台应用程序-05-Flutte

Vue3项目开发——新闻发布管理系统(六)

文章目录 八、首页设计开发1、页面设计2、登录访问拦截实现3、用户基本信息显示①封装用户基本信息获取接口②用户基本信息存储③用户基本信息调用④用户基本信息动态渲染 4、退出功能实现①注册点击事件②添加退出功能③数据清理 5、代码下载 八、首页设计开发 登录成功后,系统就进入了首页。接下来,也就进行首页的开发了。 1、页面设计 系统页面主要分为三部分,左侧为系统的菜单栏,右侧

Spring框架5 - 容器的扩展功能 (ApplicationContext)

private static ApplicationContext applicationContext;static {applicationContext = new ClassPathXmlApplicationContext("bean.xml");} BeanFactory的功能扩展类ApplicationContext进行深度的分析。ApplicationConext与 BeanF

【VUE】跨域问题的概念,以及解决方法。

目录 1.跨域概念 2.解决方法 2.1 配置网络请求代理 2.2 使用@CrossOrigin 注解 2.3 通过配置文件实现跨域 2.4 添加 CorsWebFilter 来解决跨域问题 1.跨域概念 跨域问题是由于浏览器实施了同源策略,该策略要求请求的域名、协议和端口必须与提供资源的服务相同。如果不相同,则需要服务器显式地允许这种跨域请求。一般在springbo

数据治理框架-ISO数据治理标准

引言 "数据治理"并不是一个新的概念,国内外有很多组织专注于数据治理理论和实践的研究。目前国际上,主要的数据治理框架有ISO数据治理标准、GDI数据治理框架、DAMA数据治理管理框架等。 ISO数据治理标准 改标准阐述了数据治理的标准、基本原则和数据治理模型,是一套完整的数据治理方法论。 ISO/IEC 38505标准的数据治理方法论的核心内容如下: 数据治理的目标:促进组织高效、合理地