前端【免费下载链接】htmxhtmx - high power tools for HTML项目地址https://gitcode.com/GitHub_Trending/ht/htmx点击查看免费下载htmx 是一个零依赖、体积小巧gzip 压缩后约 14–16KB的浏览器端 JavaScript 库它把 AJAX、CSS 过渡、WebSocket 与 Server Sent Events 的能力直接开放给 HTML 属性让你无需编写大量 JavaScript 就能构建现代 Web 界面。本篇文章以本仓库官网首页 www/content/_index.md 为主体脉络结合 官方文档、属性参考 与 核心源码 中的真实实现带你从设计动机、快速上手到源码级原理完整理解 htmx 的超媒体工作方式并掌握hx-post、hx-swap、hx-trigger、hx-target等核心属性的实战用法。htmx 是什么面向 HTML 的高功率工具htmx 的自我定位是high power tools for HTML。它让你直接在 HTML 中访问四类现代浏览器能力AJAX任意元素都可以发起异步 HTTP 请求并局部更新页面CSS Transitions通过稳定的元素id与 htmx 的 swap/settle 模型纯 CSS 即可实现平滑的过渡动画WebSockets与Server Sent EventsSSE通过扩展ws、sse在 HTML 中以声明式方式接入长连接与服务器推送。这一切都建立在 htmx 的属性attributes体系之上——你不需要写fetch()、不需要管理请求状态机只需要在标签上声明意图。在规模化与工程化层面htmx 具备三个鲜明特性均可从本仓库得到印证小巧官网首页标注约~16k min.gzdREADME.md 中则记录为约 14k数值因版本统计口径略有差异属于典型的小体积库零依赖package.json 中没有任何dependencies字段全部依赖仅存在于devDependencies用于测试与构建即运行时完全不依赖第三方库可扩展htmx 提供了一套完整的扩展机制核心扩展如response-targets、preload、sse、ws、idiomorph等均有对应文档见 www/content/extensions/_index.md。此外官方在首页还引用了真实迁移案例有项目从 React 迁移到 htmx 后代码库体积缩减了 67%详见 a-real-world-react-to-htmx-port.md。htmx 是 intercooler.js 的继任者继承了用超媒体驱动应用状态的核心理念。动机打破浏览器强加的四条约束htmx 诞生的动机源于对原生 HTML 的四句反问这也是官网首页motivation一节的核心为什么只有a和form能发起 HTTP 请求为什么只有click与submit事件能触发它们为什么只有GET与POST两种方法可用为什么你只能替换整个屏幕htmx 的回答是移除这些人为约束让 HTML 回归并补全它作为超文本hypertext的本来面目。官方文档 docs.md 用一个锚点标签做了更直白的类比a href/blogBlog/a浏览器收到这段 HTML 后的行为是当用户点击此链接时向/blog发起 HTTP GET 请求并把响应内容加载进浏览器窗口。htmx 把这个已经存在了几十年的超媒体机制泛化到任意元素、任意事件、任意 HTTP 动词与任意目标上从而让你始终停留在原始的 Web 编程模型中——使用 Hypertext As The Engine Of Application StateHATEOAS——甚至不需要真正理解这个概念。这带来一个重要的工程取向使用 htmx 时服务端通常返回 HTML 而非 JSON。页面片段就是 API 的响应格式服务端渲染与客户端更新天然统一这也是 hypermedia-driven-applications.md 所倡导的超媒体驱动应用架构。快速上手不到 10 行代码体验 htmx官网首页给出了最简的快速开始示例通过 CDN 引入 htmx 2.x 即可使用script srchttps://cdn.jsdelivr.net/npm/htmx.org2.0.11/dist/htmx.min.js integritysha384-2OatzQy1HZd/IIrjr1TcuDGqLXeHhbooAyJY1KdQMKnr4LZ22k31GBLdYKHmVjg crossoriginanonymous/script !-- have a button POST a click via AJAX -- button hx-post/clicked hx-swapouterHTML Click Me /button这段代码里只有两个关键属性hx-post与hx-swap它们告诉 htmx当用户点击这个按钮时向/clicked发起一个 AJAX 请求并用返回的 HTML 替换整个按钮。hx-post让任意元素发起 POST 请求hx-post属性会让元素向指定 URL 发起POST请求并把返回的 HTML 按指定的交换策略swap strategy写入 DOM。属性详情见 hx-post.md例如button hx-post/account/enable hx-targetbody Enable Your Account /button这个按钮会向/account/enable发起 POST并将返回 HTML 写入body的innerHTML。关于hx-post有四点值得记住hx-post不参与属性继承not inherited交换目标由 hx-target 控制交换策略由 hx-swap 控制触发请求的事件由 hx-trigger 控制。与hx-post并列的还有hx-get、hx-put、hx-patch、hx-delete它们共同构成 htmx 的 AJAX 属性族见 docs.md 的 AJAX 一节每个属性都以对应 HTTP 动词向给定 URL 发起请求。hx-swap8 种交换策略与 6 类修饰符hx-swap决定响应内容如何相对于目标元素插入 DOM。完整取值如下属性文档见 hx-swap.md取值行为innerHTML默认值替换目标元素的内部 HTMLouterHTML用响应替换整个目标元素textContent替换目标元素的文本内容不解析为 HTMLbeforebegin在目标元素之前插入afterbegin在目标元素第一个子节点之前插入beforeend在目标元素最后一个子节点之后插入afterend在目标元素之后插入delete无论响应内容如何直接删除目标元素none不追加响应内容带外交换与响应头仍会处理这些命名遵循标准 DOM 命名与Element.insertAdjacentHTML规范。例如下面的代码让div请求/example并把返回内容追加到自身之后div hx-get/example hx-swapafterendGet Some HTML Append It/divhx-swap还支持用冒号分隔的修饰符modifiers官方文档 docs.md 中的汇总如下修饰符说明transitiontrue/false是否对该次交换使用 View Transitions APIswap交换延迟如100ms旧内容清除到新内容插入之间的等待时间settle安定延迟如100ms新内容插入到 settle 完成之间的时间ignoreTitle设为true时忽略响应中的title不更新文档标题scrolltop/bottom将目标元素滚动到顶部或底部showtop/bottom将目标元素顶部或底部滚动进入视口例如让一个固定高度的可滚动容器在追加内容后自动滚到底部div styleheight:200px; overflow: scroll hx-get/example hx-swapbeforeend scroll:bottom Get Some HTML Append It Scroll To Bottom /divshow与scroll还支持window:top/window:bottom以及show:#another-div:top这种指定其他元素的选择器写法。对于被hx-boost提升的链接和表单默认行为是show:top可通过配置htmx.config.scrollIntoViewOnBoost或hx-swapshow:none关闭。触发机制hx-trigger 让请求由任何事件驱动默认情况下htmx 使用元素的自然事件触发请求input/textarea/select在change时触发form在submit时触发其余元素在click时触发。需要自定义时使用hx-trigger例如div hx-post/mouse_entered hx-triggermouseenter [Here Mouse, Mouse!] /divhx-trigger支持多种修饰符与语法完整说明见 hx-trigger.md 与 docs.mdonce请求只触发一次changed仅当元素值发生变化时才发起请求delay:interval延迟指定时间如500ms再发请求事件再次触发会重置计时throttle:interval节流时间窗口内到达的新事件会被丢弃窗口结束时触发一次from:CSS Selector监听其他元素上的事件可用于键盘快捷键等场景。多个触发器可用逗号分隔。经典即时搜索Active Search模式就是组合keyup changed delay:500msinput typetext nameq hx-get/trigger_delay hx-triggerkeyup changed delay:500ms hx-target#search-results placeholderSearch... div idsearch-results/div用户停止输入 500ms 后请求才发出结果插入#search-results。此外还有触发器过滤器事件名后用方括号包裹 JavaScript 表达式为true才触发例如hx-triggerclick[ctrlKey]只在 Ctrl点击时触发特殊事件load元素首次加载时、revealed元素首次滚入视口、intersect首次与视口相交支持root:与threshold:选项轮询every 2s语法让元素周期性轮询指定 URL服务端返回 HTTP 286 状态码即可停止轮询load delay:1shx-swapouterHTML则构成加载轮询。目标与参数hx-target、hx-include、hx-paramshx-target用 CSS 选择器指定响应装载位置并支持一套扩展 CSS 选择器语法this元素自身、closest selector最近的匹配祖先、next selector、previous selector、find selector第一个匹配的后代。例如closest tr会定位元素所在的表格行让你不必在 DOM 里铺满id属性。参数方面默认元素携带自身值表单则携带全部输入值发起请求name属性即参数名hx-include可附加其他元素的值hx-params可过滤参数hx-vals/hx-vars可注入额外值文件上传用hx-encodingmultipart/form-data并通过htmx:xhr:progress事件展示上传进度。安装 htmx 的四种方式官网文档 docs.md 的 Installing 一节给出了多种安装路径1. CDN最快script srchttps://cdn.jsdelivr.net/npm/htmx.org2.0.11/dist/htmx.min.js integritysha384-2OatzQy1HZd/IIrjr1TcuDGqLXeHhbooAyJY1KdQMKnr4LZ22k31GBLdYKHmVjg crossoriginanonymous/script未压缩版本同样提供dist/htmx.js。官方提示CDN 虽简单但生产环境可考虑自托管。2. 下载拷贝下载htmx.min.js放入项目目录用script src/path/to/htmx.min.js/script引入。3. npmnpm install htmx.org2.0.11注意 npm 上有一个旧的损坏包名叫htmx正确包名是htmx.orgpackage.json 中name字段即为htmx.org。4. Webpack / bundlerimport htmx.org;如需全局htmx变量可自定义模块执行window.htmx require(htmx.org);。在 npm 场景下安装后会使用node_modules/htmx.org/dist/htmx.js或.min.js包内同时提供类型声明dist/htmx.esm.d.ts与 JetBrains 系列 IDE 的editors/jetbrains/htmx.web-types.json补全支持。源码视角一次 AJAX 请求的完整生命周期htmx 的请求处理逻辑集中在 src/htmx.js其中几个关键函数值得关注getInternalData(elt)约 L729为元素建立内部数据槽hx内部状态对象所有属性解析结果与请求状态都挂载于此triggerEvent(elt, eventName, detail)约 L3156htmx 的事件分发核心所有htmx:*事件如htmx:configRequest、htmx:beforeSwap、htmx:afterSwap都经由它触发且同时以 Camel Case 与 Kebab Case 两种命名派发便于与其他库如 Alpine.js互操作issueAjaxRequest(verb, path, elt, event, etc, confirmed)约 L4319请求发起入口负责收集参数、应用htmx-request类、发出异步请求handleAjaxResponse(elt, responseInfo)约 L4855响应处理入口按htmx.config.responseHandling规则决定是否交换、是否视为错误。请求的完整顺序在 docs.md 的 Request Order of Operations 一节有精确描述元素被触发开始请求收集值 → 给相关元素打上htmx-request类 → 通过 AJAX 异步发出收到响应目标元素被打上htmx-swapping类 → 应用可选的交换延迟 → 执行内容交换 → 移除htmx-swapping、给新内容打上htmx-added类 → 目标打上htmx-settling类 → 等待 settle 延迟默认 20ms→ DOM 安定 → 移除htmx-settling与htmx-added。这一 swap/settle 模型正是 CSS 过渡得以零 JavaScript工作的原理htmx 在交换前会按id匹配新旧内容把旧元素的属性复制到新元素上先以旧属性值插入再在 settle 阶段切换到新属性值——id保持稳定过渡自然发生。源码中还能看到属性的解析细节hx-target在约 L1392 处解析并支持this等扩展选择器hx-trigger的显式解析在约 L2382hx-swap修饰符解析在约 L3819未知修饰符会记录错误日志。这些都可以在 src/htmx.js 中逐一核对。对应地test/attributes/hx-post.js、test/attributes/hx-swap.js、test/attributes/hx-trigger.js 等测试文件为上述行为提供了自动化验证。更进一步继承、Boost、事件与历史属性继承htmx 的大部分属性是可继承的——写在父元素上会对所有子孙生效。例如把hx-confirm提升到父div两个子按钮都会弹出确认框子元素用hx-confirmunset可取消继承hx-disinherit可按元素/属性禁用继承htmx.config.disableInheritance可全局关闭继承。Boosting 与渐进增强hx-boosttrue会把普通a和form转换为 AJAX 请求默认将响应交换进body。它的优雅之处在于 JavaScript 被禁用时链接和表单照常工作只是不再走 AJAX天然实现渐进增强Progressive Enhancement。服务端可用HX-Request请求头区分 htmx 请求与普通请求从而决定返回完整页面还是片段。事件与日志htmx 以事件机制兼作日志系统。htmx:load在每个元素被 htmx 装载后触发配合htmx.onLoad()辅助函数可初始化第三方库htmx:configRequest可在请求发出前注入参数与头htmx:beforeSwap可改写交换行为例如让 422 响应参与交换并显示表单错误。设置htmx.logger可记录所有事件htmx.logAll()可直接在控制台输出全部事件流是调试的利器。历史支持hx-push-urltrue会把请求 URL 压入浏览器历史栈并在按下后退键时从缓存恢复 DOM缓存未命中时 htmx 会带HX-History-Restore-Request: true请求头重新请求整页。hx-historyfalse可关闭快照防止敏感数据进入localStorage缓存。配置与安全htmx 提供大量可通过 JavaScript 或meta标签声明的配置项完整表格见 docs.md 的 Configuring 一节例如meta namehtmx-config content{defaultSwapStyle:outerHTML}常用配置包括defaultSwapStyle默认innerHTML、defaultSettleDelay默认 20ms、timeout请求超时毫秒数默认 0 即不超时、selfRequestsOnly默认true仅允许同域请求、allowScriptTags是否处理新内容中的script、allowEval是否允许依赖 eval 的特性如触发器过滤器与hx-on:属性、historyCacheSize、responseHandling按正则匹配状态码决定交换与错误策略等。responseHandling的默认行为等价于responseHandling: [ {code:204, swap: false}, // 204 默认不交换也不算错误 {code:[23].., swap: true}, // 2xx、3xx 正常交换 {code:[45].., swap: false, error:true}, // 4xx、5xx 不交换且视为错误 {code:..., swap: false} // 其余状态码不交换 ]安全方面官方强调的第一准则是转义所有用户内容防止 XSS同时提供hx-disable连同子孙元素禁用所有 htmx 属性处理、hx-historyfalse敏感页不入缓存、htmx:validateUrl事件白名单式校验请求域名等纵深防御工具并建议配合 Content-Security-Policy 使用。生态与学习资源围绕核心文档本仓库还提供了完整的进阶资料官方文档docs.md 覆盖 AJAX、交换、同步、CSS 过渡、带外交换、WebSocket/SSE、历史、缓存、安全、配置等全部主题属性参考reference.md 汇总全部属性、事件与请求头示例集www/content/examples/_index.md 提供即时搜索、点击编辑、无限滚动、文件上传、进度条等可直接复用的模式文章与观点www/content/essays/_index.md 收录了《Hypermedia-Driven Applications》《Locality of Behaviour》等论述以及真实项目从 React 迁移到 htmx 的实践报告书籍官网首页推荐了《Hypermedia Systems》一书系统讲解如何用 htmx 构建超媒体驱动应用迁移指南从 htmx 1.x 迁移见 migration-guide-htmx-1.md从 intercooler.js 迁移见 migration-guide-intercooler.md。需要留意的是版本现状本仓库 package.json 记录的最新版本为2.0.11官网首页同时公告 htmx 4.0 已发布但暂未在 NPM 标记为latest以避免 2.x 用户被意外升级。htmx 2.x 已放弃 IE 支持需要 IE 兼容的旧项目可继续使用 1.x 代码线官方承诺长期维护。结语从为什么只有a和form能发请求的朴素反问出发htmx 用一组 HTML 属性把超文本的力量还给了每一个元素。无论你是想快速替换页面里的局部刷新逻辑还是构建完整的多页面应用都可以从本仓库的 官方文档 起步、在 示例集 中找灵感再回到 src/htmx.js 源码里验证每一个细节。正如官网所说不用写很多代码你就能完成相当多的事。赞分享前端【免费下载链接】htmxhtmx - high power tools for HTML项目地址https://gitcode.com/GitHub_Trending/ht/htmx点击查看免费下载相关推荐htmx 入门指南用 HTML 属性直接驱动 AJAX、CSS 过渡与实时通信htmx 入门指南用 HTML 属性直接驱动 AJAX、CSS 过渡与实时通信 htmx 是一套为 HTML 提供高功率工具high power too前端Intercooler.js入门指南如何用HTML属性轻松实现AJAX功能Intercooler.js入门指南如何用HTML属性轻松实现AJAX功能 Intercooler.js是一个革命性的JavaScript库让AJAX功能实前端HTMX 速查手册用 HTML 属性驱动动态 Web 界面CheatSheets.zip 实战指南HTMX 速查手册用 HTML 属性驱动动态 Web 界面CheatSheets.zip 实战指南 HTMX 是一个轻量级现代 JavaScript 库文档教程知识库上一篇Sphinx autosummary 与模块 __all__autosummary_ignore_module_all 配置及递归文档生成实战解析下一篇ReactXP 状态管理指南从 Flux 到 ReSub 的 Store 与订阅机制深度解析创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 htmx 官方首页全解读：用 HTML 属性驱动 AJAX 的“HTML 高功率工具“入门指南
前端【免费下载链接】htmxhtmx - high power tools for HTML项目地址https://gitcode.com/GitHub_Trending/ht/htmx点击查看免费下载htmx 是一个零依赖、体积小巧gzip 压缩后约 14–16KB的浏览器端 JavaScript 库它把 AJAX、CSS 过渡、WebSocket 与 Server Sent Events 的能力直接开放给 HTML 属性让你无需编写大量 JavaScript 就能构建现代 Web 界面。本篇文章以本仓库官网首页 www/content/_index.md 为主体脉络结合 官方文档、属性参考 与 核心源码 中的真实实现带你从设计动机、快速上手到源码级原理完整理解 htmx 的超媒体工作方式并掌握hx-post、hx-swap、hx-trigger、hx-target等核心属性的实战用法。htmx 是什么面向 HTML 的高功率工具htmx 的自我定位是high power tools for HTML。它让你直接在 HTML 中访问四类现代浏览器能力AJAX任意元素都可以发起异步 HTTP 请求并局部更新页面CSS Transitions通过稳定的元素id与 htmx 的 swap/settle 模型纯 CSS 即可实现平滑的过渡动画WebSockets与Server Sent EventsSSE通过扩展ws、sse在 HTML 中以声明式方式接入长连接与服务器推送。这一切都建立在 htmx 的属性attributes体系之上——你不需要写fetch()、不需要管理请求状态机只需要在标签上声明意图。在规模化与工程化层面htmx 具备三个鲜明特性均可从本仓库得到印证小巧官网首页标注约~16k min.gzdREADME.md 中则记录为约 14k数值因版本统计口径略有差异属于典型的小体积库零依赖package.json 中没有任何dependencies字段全部依赖仅存在于devDependencies用于测试与构建即运行时完全不依赖第三方库可扩展htmx 提供了一套完整的扩展机制核心扩展如response-targets、preload、sse、ws、idiomorph等均有对应文档见 www/content/extensions/_index.md。此外官方在首页还引用了真实迁移案例有项目从 React 迁移到 htmx 后代码库体积缩减了 67%详见 a-real-world-react-to-htmx-port.md。htmx 是 intercooler.js 的继任者继承了用超媒体驱动应用状态的核心理念。动机打破浏览器强加的四条约束htmx 诞生的动机源于对原生 HTML 的四句反问这也是官网首页motivation一节的核心为什么只有a和form能发起 HTTP 请求为什么只有click与submit事件能触发它们为什么只有GET与POST两种方法可用为什么你只能替换整个屏幕htmx 的回答是移除这些人为约束让 HTML 回归并补全它作为超文本hypertext的本来面目。官方文档 docs.md 用一个锚点标签做了更直白的类比a href/blogBlog/a浏览器收到这段 HTML 后的行为是当用户点击此链接时向/blog发起 HTTP GET 请求并把响应内容加载进浏览器窗口。htmx 把这个已经存在了几十年的超媒体机制泛化到任意元素、任意事件、任意 HTTP 动词与任意目标上从而让你始终停留在原始的 Web 编程模型中——使用 Hypertext As The Engine Of Application StateHATEOAS——甚至不需要真正理解这个概念。这带来一个重要的工程取向使用 htmx 时服务端通常返回 HTML 而非 JSON。页面片段就是 API 的响应格式服务端渲染与客户端更新天然统一这也是 hypermedia-driven-applications.md 所倡导的超媒体驱动应用架构。快速上手不到 10 行代码体验 htmx官网首页给出了最简的快速开始示例通过 CDN 引入 htmx 2.x 即可使用script srchttps://cdn.jsdelivr.net/npm/htmx.org2.0.11/dist/htmx.min.js integritysha384-2OatzQy1HZd/IIrjr1TcuDGqLXeHhbooAyJY1KdQMKnr4LZ22k31GBLdYKHmVjg crossoriginanonymous/script !-- have a button POST a click via AJAX -- button hx-post/clicked hx-swapouterHTML Click Me /button这段代码里只有两个关键属性hx-post与hx-swap它们告诉 htmx当用户点击这个按钮时向/clicked发起一个 AJAX 请求并用返回的 HTML 替换整个按钮。hx-post让任意元素发起 POST 请求hx-post属性会让元素向指定 URL 发起POST请求并把返回的 HTML 按指定的交换策略swap strategy写入 DOM。属性详情见 hx-post.md例如button hx-post/account/enable hx-targetbody Enable Your Account /button这个按钮会向/account/enable发起 POST并将返回 HTML 写入body的innerHTML。关于hx-post有四点值得记住hx-post不参与属性继承not inherited交换目标由 hx-target 控制交换策略由 hx-swap 控制触发请求的事件由 hx-trigger 控制。与hx-post并列的还有hx-get、hx-put、hx-patch、hx-delete它们共同构成 htmx 的 AJAX 属性族见 docs.md 的 AJAX 一节每个属性都以对应 HTTP 动词向给定 URL 发起请求。hx-swap8 种交换策略与 6 类修饰符hx-swap决定响应内容如何相对于目标元素插入 DOM。完整取值如下属性文档见 hx-swap.md取值行为innerHTML默认值替换目标元素的内部 HTMLouterHTML用响应替换整个目标元素textContent替换目标元素的文本内容不解析为 HTMLbeforebegin在目标元素之前插入afterbegin在目标元素第一个子节点之前插入beforeend在目标元素最后一个子节点之后插入afterend在目标元素之后插入delete无论响应内容如何直接删除目标元素none不追加响应内容带外交换与响应头仍会处理这些命名遵循标准 DOM 命名与Element.insertAdjacentHTML规范。例如下面的代码让div请求/example并把返回内容追加到自身之后div hx-get/example hx-swapafterendGet Some HTML Append It/divhx-swap还支持用冒号分隔的修饰符modifiers官方文档 docs.md 中的汇总如下修饰符说明transitiontrue/false是否对该次交换使用 View Transitions APIswap交换延迟如100ms旧内容清除到新内容插入之间的等待时间settle安定延迟如100ms新内容插入到 settle 完成之间的时间ignoreTitle设为true时忽略响应中的title不更新文档标题scrolltop/bottom将目标元素滚动到顶部或底部showtop/bottom将目标元素顶部或底部滚动进入视口例如让一个固定高度的可滚动容器在追加内容后自动滚到底部div styleheight:200px; overflow: scroll hx-get/example hx-swapbeforeend scroll:bottom Get Some HTML Append It Scroll To Bottom /divshow与scroll还支持window:top/window:bottom以及show:#another-div:top这种指定其他元素的选择器写法。对于被hx-boost提升的链接和表单默认行为是show:top可通过配置htmx.config.scrollIntoViewOnBoost或hx-swapshow:none关闭。触发机制hx-trigger 让请求由任何事件驱动默认情况下htmx 使用元素的自然事件触发请求input/textarea/select在change时触发form在submit时触发其余元素在click时触发。需要自定义时使用hx-trigger例如div hx-post/mouse_entered hx-triggermouseenter [Here Mouse, Mouse!] /divhx-trigger支持多种修饰符与语法完整说明见 hx-trigger.md 与 docs.mdonce请求只触发一次changed仅当元素值发生变化时才发起请求delay:interval延迟指定时间如500ms再发请求事件再次触发会重置计时throttle:interval节流时间窗口内到达的新事件会被丢弃窗口结束时触发一次from:CSS Selector监听其他元素上的事件可用于键盘快捷键等场景。多个触发器可用逗号分隔。经典即时搜索Active Search模式就是组合keyup changed delay:500msinput typetext nameq hx-get/trigger_delay hx-triggerkeyup changed delay:500ms hx-target#search-results placeholderSearch... div idsearch-results/div用户停止输入 500ms 后请求才发出结果插入#search-results。此外还有触发器过滤器事件名后用方括号包裹 JavaScript 表达式为true才触发例如hx-triggerclick[ctrlKey]只在 Ctrl点击时触发特殊事件load元素首次加载时、revealed元素首次滚入视口、intersect首次与视口相交支持root:与threshold:选项轮询every 2s语法让元素周期性轮询指定 URL服务端返回 HTTP 286 状态码即可停止轮询load delay:1shx-swapouterHTML则构成加载轮询。目标与参数hx-target、hx-include、hx-paramshx-target用 CSS 选择器指定响应装载位置并支持一套扩展 CSS 选择器语法this元素自身、closest selector最近的匹配祖先、next selector、previous selector、find selector第一个匹配的后代。例如closest tr会定位元素所在的表格行让你不必在 DOM 里铺满id属性。参数方面默认元素携带自身值表单则携带全部输入值发起请求name属性即参数名hx-include可附加其他元素的值hx-params可过滤参数hx-vals/hx-vars可注入额外值文件上传用hx-encodingmultipart/form-data并通过htmx:xhr:progress事件展示上传进度。安装 htmx 的四种方式官网文档 docs.md 的 Installing 一节给出了多种安装路径1. CDN最快script srchttps://cdn.jsdelivr.net/npm/htmx.org2.0.11/dist/htmx.min.js integritysha384-2OatzQy1HZd/IIrjr1TcuDGqLXeHhbooAyJY1KdQMKnr4LZ22k31GBLdYKHmVjg crossoriginanonymous/script未压缩版本同样提供dist/htmx.js。官方提示CDN 虽简单但生产环境可考虑自托管。2. 下载拷贝下载htmx.min.js放入项目目录用script src/path/to/htmx.min.js/script引入。3. npmnpm install htmx.org2.0.11注意 npm 上有一个旧的损坏包名叫htmx正确包名是htmx.orgpackage.json 中name字段即为htmx.org。4. Webpack / bundlerimport htmx.org;如需全局htmx变量可自定义模块执行window.htmx require(htmx.org);。在 npm 场景下安装后会使用node_modules/htmx.org/dist/htmx.js或.min.js包内同时提供类型声明dist/htmx.esm.d.ts与 JetBrains 系列 IDE 的editors/jetbrains/htmx.web-types.json补全支持。源码视角一次 AJAX 请求的完整生命周期htmx 的请求处理逻辑集中在 src/htmx.js其中几个关键函数值得关注getInternalData(elt)约 L729为元素建立内部数据槽hx内部状态对象所有属性解析结果与请求状态都挂载于此triggerEvent(elt, eventName, detail)约 L3156htmx 的事件分发核心所有htmx:*事件如htmx:configRequest、htmx:beforeSwap、htmx:afterSwap都经由它触发且同时以 Camel Case 与 Kebab Case 两种命名派发便于与其他库如 Alpine.js互操作issueAjaxRequest(verb, path, elt, event, etc, confirmed)约 L4319请求发起入口负责收集参数、应用htmx-request类、发出异步请求handleAjaxResponse(elt, responseInfo)约 L4855响应处理入口按htmx.config.responseHandling规则决定是否交换、是否视为错误。请求的完整顺序在 docs.md 的 Request Order of Operations 一节有精确描述元素被触发开始请求收集值 → 给相关元素打上htmx-request类 → 通过 AJAX 异步发出收到响应目标元素被打上htmx-swapping类 → 应用可选的交换延迟 → 执行内容交换 → 移除htmx-swapping、给新内容打上htmx-added类 → 目标打上htmx-settling类 → 等待 settle 延迟默认 20ms→ DOM 安定 → 移除htmx-settling与htmx-added。这一 swap/settle 模型正是 CSS 过渡得以零 JavaScript工作的原理htmx 在交换前会按id匹配新旧内容把旧元素的属性复制到新元素上先以旧属性值插入再在 settle 阶段切换到新属性值——id保持稳定过渡自然发生。源码中还能看到属性的解析细节hx-target在约 L1392 处解析并支持this等扩展选择器hx-trigger的显式解析在约 L2382hx-swap修饰符解析在约 L3819未知修饰符会记录错误日志。这些都可以在 src/htmx.js 中逐一核对。对应地test/attributes/hx-post.js、test/attributes/hx-swap.js、test/attributes/hx-trigger.js 等测试文件为上述行为提供了自动化验证。更进一步继承、Boost、事件与历史属性继承htmx 的大部分属性是可继承的——写在父元素上会对所有子孙生效。例如把hx-confirm提升到父div两个子按钮都会弹出确认框子元素用hx-confirmunset可取消继承hx-disinherit可按元素/属性禁用继承htmx.config.disableInheritance可全局关闭继承。Boosting 与渐进增强hx-boosttrue会把普通a和form转换为 AJAX 请求默认将响应交换进body。它的优雅之处在于 JavaScript 被禁用时链接和表单照常工作只是不再走 AJAX天然实现渐进增强Progressive Enhancement。服务端可用HX-Request请求头区分 htmx 请求与普通请求从而决定返回完整页面还是片段。事件与日志htmx 以事件机制兼作日志系统。htmx:load在每个元素被 htmx 装载后触发配合htmx.onLoad()辅助函数可初始化第三方库htmx:configRequest可在请求发出前注入参数与头htmx:beforeSwap可改写交换行为例如让 422 响应参与交换并显示表单错误。设置htmx.logger可记录所有事件htmx.logAll()可直接在控制台输出全部事件流是调试的利器。历史支持hx-push-urltrue会把请求 URL 压入浏览器历史栈并在按下后退键时从缓存恢复 DOM缓存未命中时 htmx 会带HX-History-Restore-Request: true请求头重新请求整页。hx-historyfalse可关闭快照防止敏感数据进入localStorage缓存。配置与安全htmx 提供大量可通过 JavaScript 或meta标签声明的配置项完整表格见 docs.md 的 Configuring 一节例如meta namehtmx-config content{defaultSwapStyle:outerHTML}常用配置包括defaultSwapStyle默认innerHTML、defaultSettleDelay默认 20ms、timeout请求超时毫秒数默认 0 即不超时、selfRequestsOnly默认true仅允许同域请求、allowScriptTags是否处理新内容中的script、allowEval是否允许依赖 eval 的特性如触发器过滤器与hx-on:属性、historyCacheSize、responseHandling按正则匹配状态码决定交换与错误策略等。responseHandling的默认行为等价于responseHandling: [ {code:204, swap: false}, // 204 默认不交换也不算错误 {code:[23].., swap: true}, // 2xx、3xx 正常交换 {code:[45].., swap: false, error:true}, // 4xx、5xx 不交换且视为错误 {code:..., swap: false} // 其余状态码不交换 ]安全方面官方强调的第一准则是转义所有用户内容防止 XSS同时提供hx-disable连同子孙元素禁用所有 htmx 属性处理、hx-historyfalse敏感页不入缓存、htmx:validateUrl事件白名单式校验请求域名等纵深防御工具并建议配合 Content-Security-Policy 使用。生态与学习资源围绕核心文档本仓库还提供了完整的进阶资料官方文档docs.md 覆盖 AJAX、交换、同步、CSS 过渡、带外交换、WebSocket/SSE、历史、缓存、安全、配置等全部主题属性参考reference.md 汇总全部属性、事件与请求头示例集www/content/examples/_index.md 提供即时搜索、点击编辑、无限滚动、文件上传、进度条等可直接复用的模式文章与观点www/content/essays/_index.md 收录了《Hypermedia-Driven Applications》《Locality of Behaviour》等论述以及真实项目从 React 迁移到 htmx 的实践报告书籍官网首页推荐了《Hypermedia Systems》一书系统讲解如何用 htmx 构建超媒体驱动应用迁移指南从 htmx 1.x 迁移见 migration-guide-htmx-1.md从 intercooler.js 迁移见 migration-guide-intercooler.md。需要留意的是版本现状本仓库 package.json 记录的最新版本为2.0.11官网首页同时公告 htmx 4.0 已发布但暂未在 NPM 标记为latest以避免 2.x 用户被意外升级。htmx 2.x 已放弃 IE 支持需要 IE 兼容的旧项目可继续使用 1.x 代码线官方承诺长期维护。结语从为什么只有a和form能发请求的朴素反问出发htmx 用一组 HTML 属性把超文本的力量还给了每一个元素。无论你是想快速替换页面里的局部刷新逻辑还是构建完整的多页面应用都可以从本仓库的 官方文档 起步、在 示例集 中找灵感再回到 src/htmx.js 源码里验证每一个细节。正如官网所说不用写很多代码你就能完成相当多的事。赞分享前端【免费下载链接】htmxhtmx - high power tools for HTML项目地址https://gitcode.com/GitHub_Trending/ht/htmx点击查看免费下载相关推荐htmx 入门指南用 HTML 属性直接驱动 AJAX、CSS 过渡与实时通信htmx 入门指南用 HTML 属性直接驱动 AJAX、CSS 过渡与实时通信 htmx 是一套为 HTML 提供高功率工具high power too前端Intercooler.js入门指南如何用HTML属性轻松实现AJAX功能Intercooler.js入门指南如何用HTML属性轻松实现AJAX功能 Intercooler.js是一个革命性的JavaScript库让AJAX功能实前端HTMX 速查手册用 HTML 属性驱动动态 Web 界面CheatSheets.zip 实战指南HTMX 速查手册用 HTML 属性驱动动态 Web 界面CheatSheets.zip 实战指南 HTMX 是一个轻量级现代 JavaScript 库文档教程知识库上一篇Sphinx autosummary 与模块 __all__autosummary_ignore_module_all 配置及递归文档生成实战解析下一篇ReactXP 状态管理指南从 Flux 到 ReSub 的 Store 与订阅机制深度解析创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考