项目简介

htmx是一个非常酷的前端工具，它让你在纯 HTML 中就能搞定 AJAX、CSS 过渡动画、WebSocket、服务端发送事件（SSE）等交互功能——而且不需要写一行 JavaScript。它体积超小（gzip 后约 14 KB），无任何外部依赖，还非常容易扩展，说它是超能力的 HTML 工具箱一点也不夸张

目前在Github上收获了45.8K star！这玩意儿在GitHub上已经狂揽45.8K star，绝对是最值得关注的前端工具之一！

项目特色

• 支持通过 HTML 属性直接发起 AJAX 请求，让你只需写标签就能操作网络请求
• 内置 CSS 过渡动画支持，响应式交互体验轻松实现
• 支持 WebSockets 和 Server-Sent Events（SSE），让前端实时交互更爽快
• 极简！代码压缩后只有 ~14 KB，无依赖，加载快不拖慢页面
• 易扩展架构，想加功能、写插件、定制行为都很方便

安装方式

方式一：CDN 引入（最简单直接）

在你的 HTML 文件里添加：

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

这行 HTML 就告诉浏览器：“按钮被点了以后，用 AJAX 发一个 POST 请求到 /clicked，然后用服务器返回的内容替换这个按钮。”

方式二：通过 npm 安装（适合项目集成）

npm install htmx.org --save

注意：千万不要装老的 htmx 包，正确的是 htmx.org。

安装完了之后，可以在你的打包工具里引入使用。

官方提供了不少UI实例供大家学习参考：

点击编辑（Click to Edit）

代码：

<!-- 引入htmx -->
<script src="https://unpkg.com/htmx.org"></script>

<!-- 可编辑的元素 -->
<span id="editable-text" hx-get="/api/edit" hx-target="this" hx-swap="outerHTML" style="border: 1px solid #ccc; padding: 5px;">Edit Me</span>

批量更新（Bulk Update）

代码：

<!-- 引入htmx -->
<script src="https://unpkg.com/htmx.org"></script>

<!-- 批量更新的按钮 -->
<button hx-post="/api/update-all" hx-target="#all-targets" hx-swap="outerHTML">Update All</button>

<!-- 多个更新目标 -->
<div id="all-targets">
  <div hx-get="/api/data1" hx-target="this" hx-swap="outerHTML">Loading...</div>
  <div hx-get="/api/data2" hx-target="this" hx-swap="outerHTML">Loading...</div>
  <div hx-get="/api/data3" hx-target="this" hx-swap="outerHTML">Loading...</div>
</div>

小结

用下来感觉 htmx 是真的懂前端开发者的痛点，不用学复杂的框架语法，靠 HTML 属性就能实现动态交互，写代码的效率直接提上来了，代码量也少了很多，后期维护起来也轻松。而且它轻量级不占资源，加载速度快，不管是小项目快速开发，还是老项目优化改造，都特别合适。

项目地址：
https://github.com/bigskysoftware/htmx

阅读原文：原文链接