fly63前端网

www.fly63.com

首页文章资源工具教程 栏目
  • 关于我们
  • 网站投稿
  • 赞助一下
搜索

在线工具_工作生活好帮手

打造各种简单、易用、便捷的在线工具,网友无需注册和下载安装即可使用

点击查看

关闭

提交网站

htmx
分享
复制链接
新浪微博
QQ 好友

扫一扫分享

网站地址:https://htmx.org/
GitHub:https://github.com/bigskysoftware/htmx
网站描述:无需JavaScript的动态HTML

htmx为html页面提供了与众不同的交互性实现方式。开发者通过添加特定属性,而不是编写多行 JavaScript 代码,来增强 HTML,从而实现实时交互和动态更新。

它因其小巧的文件大小和与现有服务端框架的无缝集成而备受赞誉。这符合“通过线路发送 HTML”的趋势,即要求服务器发送部分 HTML 块,而不是在客户端处理 JSON。

例如,以下代码可以实现一个按钮,点击按钮后会向服务器发送一个请求,并将服务器的响应替换到按钮所在的位置。


高效

Htmx 通过 Ajax 技术实现局部页面更新,这使得它非常高效。只需要更新需要更新的部分,而无需重新加载整个页面。这可以提高页面的性能和用户体验。


灵活

Htmx 非常灵活,可以用于实现各种交互效果。例如,Htmx 可以用于实现表单交互、数据展示、动画和特效等。


应用场景

Htmx 适用于各种场景,包括:

表单交互: Htmx 可以用于实现表单的异步提交,从而提高用户体验。

数据展示: Htmx 可以用于实现数据的异步更新,从而提高页面的性能和用户体验。

动画和特效: Htmx 可以用于实现动画和特效,从而增强用户体验。


缺点

兼容性: Htmx 目前还不完全兼容所有浏览器。最新版本的 Chrome、Firefox、Edge 和 Safari 都支持 Htmx,但 IE11 和旧版本的浏览器可能不支持。

性能: Htmx 依赖于 Ajax 技术来实现局部页面更新。在某些情况下,这可能会导致性能下降。

复杂性: Htmx 的功能非常强大,但也可能导致代码变得复杂。开发人员需要注意避免使用过于复杂的 Htmx 代码。


未来发展

Htmx 是一个非常年轻的库,但它已经迅速获得了开发者的认可。Htmx 的开发团队也非常积极,他们经常会发布新的更新。未来,Htmx 有望成为现代 Web 开发的标准工具。

快速开始

<script src="https://unpkg.com/htmx.org@1.9.10"></script>
<!-- have a button POST a click via AJAX -->
<button hx-post="/clicked" hx-swap="outerHTML">
Click Me
</button>

按钮上的和hx-post属性hx-swap告诉 htmx:“当用户单击此按钮时,向 /clicked 发出 AJAX 请求,并用 HTML 响应替换整个按钮”。


原理

  • 从任何用户事件发出 AJAX 请求。
  • 让服务器生成代表该请求的新应用程序状态的 html。
  • 在响应中发送该 html。
  • 将该元素推到它应该去的 dom 中。

也就是倒回到服务器渲染 Html,不得不说历史就是轮回。

链接: https://fly63.com/nav/4044

more>>
相关栏目
react
Facebook开发的一款高效、灵活、声明式设计的JS库
官网GitHub
AngularJS
Google推出有条理,可维护,易编程的MVVM框架
官网GitHub
backbone
提供:模型、集合、视图,开发重量级的javascript应用的框架
官网GitHub
jquery
一个快速、简洁的JavaScript代码库
官网GitHub
zepto.js
一个轻量级的针对现代高级浏览器的JavaScript库
官网GitHub
Ember
JavaScript MVC框架,它用来创建复杂的Web应用程序,消除了样板
官网GitHub
nw.js
轻量级桌面应用开发的捷径
官网GitHub
socket.io
一个WebSocket库,包括了客户端的js和服务器端的nodejs
官网GitHub
petite-vue
vue的可替代发行版,针对渐进式增强进行了优化
点击进入GitHub
ocLazyLoad
AngularJS 的延迟加载(惰性加载)模块和组件
官网GitHub
weui.js
WeUI 的轻量级 js 封装
点击进入GitHub
Qatrix
一款超轻量级JS框架
点击进入GitHub
Mootools
大部分浏览器原生对象做了扩展
官网GitHub
enyo.js
强调模块化和封装的Js应用程序框架
点击进入GitHub
workbox
谷歌推进的 web 应用新模型,将网站升级成 PWA
官网GitHub
Senna.js
快速单页应用程序引擎
官网GitHub

手机预览