htmx是一个小巧的JavaScript库。它让你可以直接在html标签中添加特殊属性来实现动态效果,不需要写复杂的JavaScript代码。
这个库只有大约14KB大小,不需要其他依赖。有报告显示,使用htmx可以减少67%的前端代码量。
突破HTML的限制
普通的HTML中,只有链接和表单能发送请求,而且会刷新整个页面。htmx让任何元素都能发送各种请求,并且只更新页面的一部分。
开发更简单
所有的交互逻辑都在HTML属性中设置,代码看起来很清楚,容易理解。
后端驱动
服务器直接返回HTML片段,前端直接显示。不需要先返回JSON数据,再用JavaScript渲染。
在HTML文件中引入htmx:
<script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.6/dist/htmx.min.js"></script>
看一个简单的例子:
<button hx-post="/clicked" hx-swap="outerHTML">
点击我
</button>
hx-post="/clicked":点击时向/clicked发送POST请求
hx-swap="outerHTML":用服务器返回的内容替换整个按钮
如果服务器返回:
<button>已点击!</button>
页面上的按钮就会变成"已点击!"。
属性 | 说明 |
---|---|
hx-get / hx-post / hx-put / hx-patch / hx-delete | 发送不同类型的HTTP请求 |
hx-trigger | 设置触发事件(点击、变化、按键等) |
hx-target | 设置内容插入的目标元素 |
hx-swap | 设置内容替换方式 |
hx-select | 从返回的HTML中选择部分内容 |
hx-swap-oob | 更新页面其他位置的元素 |
htmx可以处理很多常见的网页功能:
表单提交不刷新页面
滚动到页面底部时自动加载更多内容
点击内容直接编辑
文件上传和进度显示
弹窗对话框
实时更新内容
我们来做一个完整的留言板项目。
项目结构:
/
├─ public/
│ └─ index.html
└─ server.js
服务器代码(server.js):
const express = require('express');
const app = express();
app.use(express.urlencoded({ extended: true }));
app.use(express.static('public'));
let posts = [];
// 主页面
app.get('/', (req, res) => {
res.sendFile(__dirname + '/public/index.html');
});
// 获取所有留言
app.get('/posts', (req, res) => {
const postsHtml = posts.map(post =>
`<div>
<p>${post.text}</p>
<small>发布时间:${post.time}</small>
</div>`
).join('');
res.send(postsHtml);
});
// 提交新留言
app.post('/post', (req, res) => {
const { message } = req.body;
const newPost = {
text: message,
time: new Date().toLocaleString()
};
posts.push(newPost);
res.send(`
<div>
<p>${newPost.text}</p>
<small>发布时间:${newPost.time}</small>
</div>
`);
});
// 获取留言数量
app.get('/post-count', (req, res) => {
res.send(`<span>共有 ${posts.length} 条留言</span>`);
});
app.listen(3333, () => console.log('服务器运行在端口3333'));
前端页面(index.html):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>htmx留言板</title>
<script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.6/dist/htmx.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
max-width: 600px;
margin: 0 auto;
padding: 20px;
}
.post {
border: 1px solid #ddd;
padding: 15px;
margin: 10px 0;
border-radius: 5px;
}
form {
margin: 20px 0;
}
input[type="text"] {
width: 70%;
padding: 8px;
margin-right: 10px;
}
button {
padding: 8px 16px;
background: #007acc;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
.stats {
margin: 10px 0;
color: #666;
}
</style>
</head>
<body>
<h1>留言板</h1>
<div class="stats"
hx-get="/post-count"
hx-trigger="load, every 10s">
正在加载...
</div>
<form hx-post="/post"
hx-target="#posts"
hx-swap="afterbegin"
hx-on::after-request="this.reset()">
<input type="text" name="message" placeholder="输入留言内容..." required>
<button type="submit">发布留言</button>
</form>
<div id="posts" hx-get="/posts" hx-trigger="load"></div>
</body>
</html>
页面加载时:自动获取所有留言
提交表单时:发送新留言到服务器,成功后清空输入框
实时统计:每10秒更新一次留言数量
无刷新体验:所有操作都不刷新整个页面
整个过程不需要写任何JavaScript代码。
<!-- 搜索框 -->
<input type="text"
name="query"
placeholder="搜索..."
hx-get="/search"
hx-trigger="keyup changed delay:500ms"
hx-target="#search-results">
<!-- 搜索结果 -->
<div id="search-results"></div>
<button hx-post="/like/123"
hx-swap="outerHTML"
class="like-btn">
点赞 <span>42</span>
</button>
服务器返回:
<button hx-post="/like/123"
hx-swap="outerHTML"
class="like-btn liked">
已点赞 <span>43</span>
</button>
<div hx-get="/more-items"
hx-trigger="revealed"
hx-swap="beforeend">
加载更多...
</div>
适合用htmx的情况:
内容管理系统
后台管理界面
企业内部系统
已有的服务端渲染项目
可能不适合的情况:
需要复杂前端状态管理的应用
高并发场景(服务器渲染压力大)
需要复杂客户端逻辑的应用
判断请求来源:服务器需要检查HX-Request请求头,决定返回完整页面还是HTML片段
错误处理:考虑网络错误的情况,提供友好的提示
加载状态:使用hx-indicator属性显示加载动画
兼容性:确保后端返回正确的HTML片段
htmx让HTML变得更强大。不需要写大量JavaScript代码,只需要在HTML标签中添加属性,配合后端渲染,就能实现各种动态效果。
如果你正在开发传统的服务端渲染项目,或者想要快速为现有项目添加交互功能,htmx是一个很好的选择。它学习成本低,使用简单,能显著提高开发效率。
对于很多项目来说,htmx提供了复杂前端框架之外的另一种选择。它让我们回归Web的初衷,用更简单的方式构建功能完善的网页应用。
本文内容仅供个人学习/研究/参考使用,不构成任何决策建议或专业指导。分享/转载时请标明原文来源,同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦~感谢您的理解与支持!
目前前端框架很多,但是很多时候我们只是想要一个简单的功能,比如点击一个按钮,然后发送一个请求,然后更新页面的某个部分,这个时候,我们就不需要一个复杂的前端框架,只需要一个简单的工具就可以了
众所周知,全球互联网得以蓬勃发展在很大程度上归功于HTML和CSS。Javascript(JS)可以充当HTML和CSS之间的粘合剂,使页面更具动态性和交互性,但Web编程的历史发展不同
HTMX允许你使用扩展的HTML语法代替 JavaScript 来实现交互性。HTMX 在标记中直接为你提供HTTP 交互,并支持许多其他交互需求,无需求助于 JavaScript。这是一个有趣的想法
HTMX 的终极目标目标,就是让开发者在 HTML 中就能实现现代浏览器级的交互性,而无需使用 JavaScript。这个前端库虽然起步晚,首次亮相是在 2020 年底,但却迅速吸引了开发者社区的眼球。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!