htmx-使HTML更强大

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

htmx

让我们先来看一段俳句:

javascript fatigue:

longing for a hypertext

already in hand

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

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

htmx是什么

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

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

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

  2. 仅 clicksubmit 事件触发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-gethx-posthx-trigger 等,来指定需要执行的 AJAX 请求、响应后的操作以及触发 AJAX 请求的事件等。在响应返回后,htmx 会根据响应的内容和指定的操作,更新页面中的部分内容,从而实现了动态更新页面的效果。此外,htmx 还支持一些高级特性,如服务器推送、表单验证、动画效果等,可以帮助开发者更加方便地实现复杂的交互效果。

对了,htmxAJAX请求实现是继承自intercooler.js

htmx 如何使用

htmx的安装

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

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

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 等多种发展方向供员工选择,并辅以提供相应的技术力、专业力、通用力、领导力等培训课程。奇舞团以开放和求贤的心态欢迎各种优秀人才关注和加入奇舞团。

ad0f786a3b5011f04b7b9218d9d09a0a.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/97118.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

三、原型模式

一、什么是原型模式 原型&#xff08;Prototype&#xff09;模式的定义如下&#xff1a;用一个已经创建的实例作为原型&#xff0c;通过复制该原型对象来创建一个和原型相同或相似的新对象。在这里&#xff0c;原型实例指定了要创建的对象的种类。用这种方式创建对象非常高效&a…

模拟实现应用层协议

模拟实现应用层协议 文章目录 模拟实现应用层协议应用层再谈协议 序列化和反序列化 网络版计算器自定义协议利用Json进行序列化和反序列化json库的安装条件编译 应用层 应用层&#xff08;Application layer&#xff09;是OSI模型的第七层。应用层直接和应用程序接口并提供常见…

Unity 状态机

Enemy状态以及切换图 程序架构 接口 public interface IState {void OnEnter(); //进入状态时void OnUpdate();//执行状态时void OnExit(); //退出状态时 }接口实现及状态切换类 public class IdleState : IState {private FSM manager;private Parameter parameter;public…

开源且强大的网络嗅探分析工具——Wireshark

Wireshark是一款强大的开源网络协议分析工具&#xff0c;旨在帮助用户深入了解网络通信的细节。通过捕获、解析和展示网络数据包&#xff0c;Wireshark能够帮助工程师诊断问题、优化性能&#xff0c;以及解决各种网络难题。无论是深入分析还是快速调试&#xff0c;Wireshark都是…

C++ 多重继承

所谓多重继承就是一个儿子有好几个爹&#xff0c;然后一个人继承了这几个爹的财产。只需注意构造顺序即可&#xff0c;反正析构的顺序也是一样的。 #include <iostream> #include <string.h> using namespace std;class base_a { public:base_a(const char *str){…

华硕笔记本摄像头倒置怎么办?华硕笔记本摄像头上下颠倒怎么调整

笔记本电脑相较于台式电脑&#xff0c;更易携带&#xff0c;解决了很大一部分人的使用需求。但是笔记本电脑也存在很多不足&#xff0c;比如华硕笔记本电脑就经常会出现摄像头倒置的错误&#xff0c;出现这种问题要如何修复呢&#xff1f;下面就来看看详细的调整方法。 华硕笔记…

opencv 案例05-基于二值图像分析(简单缺陷检测)

缺陷检测&#xff0c;分为两个部分&#xff0c;一个部分是提取指定的轮廓&#xff0c;第二个部分通过对比实现划痕检测与缺角检测。本次主要搞定第一部分&#xff0c;学会观察图像与提取图像ROI对象轮廓外接矩形与轮廓。 下面是基于二值图像分析的大致流程 读取图像将图像转换…

C/C++ 个人笔记

仅供个人复习&#xff0c; C语言IO占位符表 %d十进制整数(int)%ldlong%lldlong long%uunsigned int%o八进制整型%x十六进制整数/字符串地址%c单个字符%s字符串%ffloat&#xff0c;默认保留6位%lfdouble%e科学计数法%g根据大小自动选取f或e格式&#xff0c;去掉无效0 转义符表…

LeetCode第6~10题解

CONTENTS LeetCode 6. N 字形变换&#xff08;中等&#xff09;LeetCode 7. 整数反转&#xff08;中等&#xff09;LeetCode 8. 字符串转换整数-atoi&#xff08;中等&#xff09;LeetCode 9. 回文数&#xff08;简单&#xff09;LeetCode 10. 正则表达式匹配&#xff08;困难&…

Flutter 混合开发调试

针对Flutter开发的同学来说&#xff0c;大部分的应用还是Native Flutter的混合开发&#xff0c;所以每次改完Flutter代码&#xff0c;运行整个项目无疑是很费时间的。所以Flutter官方也给我们提供了混合调试的方案【在混合开发模式下进行调试】&#xff0c;这里以Android Stud…

VUE笔记(四)vue的组件

一、组件的介绍 1、组件的作用 整个项目都是由组件组成 可以让代码复用&#xff1a;相似结构代码可以做成一个组件&#xff0c;直接进行调用就可以使用&#xff0c;提高代码复用性 可以让代码具有可维护性&#xff08;只要改一处&#xff0c;整个引用的部分全部都变&#xf…

Java8实战-总结17

Java8实战-总结17 引入流流操作中间操作终端操作使用流 小结 引入流 流操作 java.util.stream.Stream中的Stream接口定义了许多操作。它们可以分为两大类。再来看一下前面的例子&#xff1a; List<String> names menu.stream() //从菜单获得流 .filter(d -> d.get…

SpringBoot - Google EventBus、AsyncEventBus

介绍 EventBus 顾名思义&#xff0c;事件总线&#xff0c;是一个轻量级的发布/订阅模式的应用模式&#xff0c;最初设计及应用源与 google guava 库。 相比于各种 MQ 中间件更加简洁、轻量&#xff0c;它可以在单体非分布式的小型应用模块内部使用&#xff08;即同一个JVM范围…

xml和json互转工具类

分享一个json与xml互转的工具类&#xff0c;非常好用 一、maven依赖 <!-->json 和 xm 互转</!--><dependency><groupId>org.dom4j</groupId><artifactId>dom4j</artifactId><version>2.1.3</version></dependency&g…

图形化管理工具ossbrowser

文章目录 一、OSS介绍二、通过工具管理OSS三、安装四、使用-通过AK五、免责声明摘抄 一、OSS介绍 云对象存储OSS&#xff08;Object Storage Service&#xff09;是一款海量、安全、低成本、高可靠的云存储服务&#xff0c;可提供99.9999999999%&#xff08;12个9&#xff09;…

Javaweb入门

Spring Spring发展到今天已经形成一种开发生态圈&#xff0c;Spring提供若干个子项目&#xff0c;每个项目用于完成特定的功能。 Spring Boot可以帮助我们非常快速的构建应用程序、简化开发、提高效率 SpringBootWeb入门 需求&#xff1a;使用Spring Boot开发一个web应用&a…

结构体(个人学习笔记黑马学习)

1、结构体的定义和使用 #include <iostream> using namespace std; #include <string>struct Student {string name;int age;int score; }s3;int main() {//1、struct Student s1;s1.name "张三";s1.age 18;s1.score 100;cout << "姓名&a…

便携式水质自动采样器可应用的场景

便携式水质自动采样器符合中国环境保护部HJ/T 372-2007《水质自动采样器技术要求及检测方法》&#xff0c;是集流量测量、水样采集&#xff0c;自动分瓶、一体的多功能环境监测仪器。 具有体积小&#xff0c;方便移动、操作简捷、环保节能等特点。适用于各级环境监测站、监察机…

go vet中的那些检测项

go vet 是 Go 语言自带的一个工具&#xff0c;用于分析 Go 代码中的常见错误和潜在问题。它可以检查代码中可能存在的各种问题&#xff0c;例如&#xff1a; 未使用的变量、函数或包 可疑的函数调用 错误的函数签名 程序中的竞态条件 错误的类型转换等 本文意图指令当前go vet所…