前端【免费下载链接】htmxhtmx - high power tools for HTML项目地址https://gitcode.com/GitHub_Trending/ht/htmx点击查看免费下载导读htmx 于 2024 年 3 月 15 日发布了 2.0.0 的首个 beta 版本2.0.0-beta1这是 htmx 迈向 2.x 时代的重要里程碑。本文基于官方发布说明结合本仓库htmx 官方源码仓库的src/htmx.js实现、迁移指南与扩展文档为你系统梳理该版本的核心变更——包括hx-sse/hx-ws属性的移除、DELETE请求负载方式的变化、扩展机制与核心代码库的分离以及新增的textContent交换方式、嵌套 OOB 交换配置项等。读完本文你将掌握 1.x 到 2.x 迁移的完整要点并理解这些变更在源码层面的落地方式可直接用于评估与执行你项目中的升级工作。重要提示2.0.0-beta1属于beta 预发布版本官方明确不建议用于生产环境发布它的目的是开启针对真实场景的最终测试。如果你有余力官方建议切换到该版本对你现有 htmx 功能做一次快速回归并反馈问题。一、版本定位与发布背景htmx 2.0.0-beta1 是 2.x 系列的第一个 beta 版本。官方在发布说明中强调该版本不应视为生产就绪仅为真实场景的最终测试而发布官方特别希望社区帮助验证两类高风险变更见下文第二节完整升级路径请参考 htmx 1.x → 2.x 迁移指南从 2.x 起不再兼容 IE但 1.x 系列会继续为 IE 用户提供支持。这一定位意味着如果你在生产环境使用 htmx当前阶段仍应以 1.x 稳定版为主若要进行 2.x 预研则应在测试/预发环境执行迁移验证。二、本次发布的两大重点变更发布说明明确列出了社区最需要关注的两处行为变化这也是 2.0 语义化主版本号升级的核心理由。2.1 移除废弃的hx-sse与hx-ws属性1.x 中内置于核心代码库的hx-sse、hx-ws两个属性以及配套的hx-extsse/hx-extws用法已被移除统一改为**扩展extension**方式提供。扩展版本在 1.x 中已经可用因此这是一条提前告知、向后兼容的迁移路径。迁移动作非常直接把hx-sse/hx-ws属性写法替换为扩展写法例如!-- 1.x 旧写法 -- div hx-sseconnect:/events/div div hx-wsconnect:/socket/div !-- 2.x 新写法显式引入扩展属性改为事件级配置 -- div hx-extsse sse-connect/events hx-triggersse:message/div div hx-extws ws-connect/socket/div其中 SSE 扩展存在一处破坏性变更见第四节升级时必须使用新版 SSE 扩展文件。2.2DELETE请求改用参数而非表单编码体1.x 中DELETE请求的负载通过表单编码form-encoded的请求体body发送而按照 HTTP 规范DELETE应与GET一样使用 URL 参数request parameters。2.0 遵循了规范DELETE请求的参数将编码进 URL。在 src/htmx.js 中可以看到这一默认值的源码定义/** * htmx will format requests with these methods by encoding their parameters in the URL, not the request body * type {(HttpVerb)[]} * default [get, delete] */ methodsThatUseUrlParams: [get, delete],对应的请求构造逻辑位于 src/htmx.jslet useUrlParams htmx.config.methodsThatUseUrlParams.indexOf(verb) 0也就是说凡是在methodsThatUseUrlParams列表中的 HTTP 动词其参数都会走 URL 而非请求体。如果后端接口仍按 1.x 行为解析DELETE请求体迁移后需要同步调整服务端若希望保留旧行为可改回htmx.config.methodsThatUseUrlParams [get]详见第五节。三、安装方式2.0.0-beta1可以通过包管理器以版本号2.0.0-beta1安装也可以直接通过 CDN 引用script srchttps://unpkg.com/htmx.org2.0.0-beta1/dist/htmx.min.js/script也可以直接下载https://unpkg.com/htmx.org2.0.0-beta1/dist/htmx.min.js到本地引入。四、扩展生态的重组2.0 的一个结构性变化是所有扩展已从 htmx 核心代码库中移除迁移到独立的扩展仓库htmx-extensions并通过 https://extensions.htmx.org 站点分发。这意味着 htmx 核心变得更精简扩展的生命周期、版本发布与核心解耦。对使用者的影响原来依赖核心包内置扩展如 class-tools、preload、sse、ws、response-targets、idiomorph 等的页面2.x 需要显式引入对应扩展文件大部分 1.x 扩展可以继续在 htmx 2 上工作但SSE 扩展有破坏性变更必须升级到新版 sse.js官方提供了htmx 1.x 兼容扩展htmx-1-compat用于在 2.x 中恢复部分 1.x 行为其说明见 htmx-1-compat 扩展文档。本仓库中与之对应的文档还包括 SSE 扩展、WebSocket 扩展 与 扩展开发指南可作为迁移与二次开发的参考。五、迁移要点全解基于官方迁移指南迁移指南htmx 1.x → 2.x Migration Guide强调 htmx 一贯重视向后兼容多数场景几乎无需改动。以下逐条说明关键差异与默认值变化。5.1 模块化产物新增 AMD / CJS / ESM 专用文件如果以模块方式使用 htmx2.x 为三种主流 JS 模块类型都提供了独立文件模块类型文件ESM 模块/dist/htmx.esm.jsAMD 模块/dist/htmx.amd.jsCJS 模块/dist/htmx.cjs.js浏览器直接加载/dist/htmx.js继续可用本仓库源码中的类型定义文件 src/htmx.esm.d.ts 即对应 ESM 产物可供 TypeScript 项目直接消费。5.2 扩展从核心分发中移除与第四节一致所有扩展不再随核心包分发需单独引入SSE 扩展必须升级其余建议升级到 2.x 版本仍在使用的旧hx-ws/hx-sse属性请迁移到扩展写法。5.3 默认配置项的变化三个可回退点迁移指南明确给出了三处默认值变更均可通过htmx.config回退到 1.x 行为平滑滚动2.x 默认scrollBehavior为instant源码见 src/htmx.js。若想保留 1.0 的平滑滚动改回htmx.config.scrollBehavior smooth该配置的实际消费点在 src/htmx.jsscrollIntoView({ block, behavior: htmx.config.scrollBehavior })决定了目标元素的滚动方式。DELETE请求负载默认methodsThatUseUrlParams为[get, delete]见第二节。若希望DELETE使用表单编码体改回htmx.config.methodsThatUseUrlParams [get]跨域请求2.x 默认selfRequestsOnly为true即禁止向非同源主机发起 htmx 请求源码见 src/htmx.js其生效逻辑见 src/htmx.js。若需要跨域请求改回htmx.config.selfRequestsOnly false5.4hx-on改为hx-on:语法1.x 的hx-on属性用事件名加冒号分隔多条监听在 2.x 中必须改为独立的hx-on:前缀属性。迁移指南给出的对照示例!-- 1.x 写法 -- button hx-get/info hx-onhtmx:beforeRequest: alert(Making a request!) htmx:afterRequest: alert(Done making a request!) Get Info! /button !-- 2.x 写法 -- button hx-get/info hx-on:htmx:before-requestalert(Making a request!) hx-on:htmx:after-requestalert(Done making a request!) Get Info! /button注意由于 HTML 属性名大小写不敏感事件名必须使用kebab-case短横线命名如htmx:before-request。更多用法见 hx-on 属性文档。5.5makeFragment()返回值统一为 DocumentFragment2.x 中htmx.makeFragment()始终返回DocumentFragment不再像 1.x 那样视情况返回Element或DocumentFragment。源码实现见 src/htmx.js它会先对hx-*自定义标签做template转换以安全通过 HTML 解析再剥离head区域、按响应形态解析为片段。依赖旧返回类型的代码需要相应调整。5.6 内部 APIselectAndSwap被swap取代对扩展作者而言内部 API 中的selectAndSwap方法已被移除替换为swap方法内部与公共 htmx API 均可使用。新的调用方式let content divHello world/div; // 将被交换到目标元素的 HTML let target api.getTarget(child); let swapSpec api.getSwapSpecification(child); api.swap(target, content, swapSpec);swap方法的完整文档见 JS API 参考。5.7 IE 支持终止htmx 2.0 不再支持 IEhtmx 1.xv1.htmx.org会继续支持 IE 并在可预见的未来持续维护。六、新特性与源码印证除了破坏性变更本次发布还带来若干新能力均可在本仓库源码中找到实现证据。6.1 配置项忽略嵌套 OOB 交换issue #1235新增配置项allowNestedOobSwaps用于决定是否处理嵌套在主响应元素内部的 out-of-bandOOB交换元素。源码默认值为truesrc/htmx.js/** * Whether to process OOB swaps on elements that are nested within the main response element. * type boolean * default true */ allowNestedOobSwaps: true,实际生效逻辑位于 src/htmx.js 的findAndSwapOobElementsvar oobElts findAll(fragment, [hx-swap-oob], [data-hx-swap-oob]) forEach(oobElts, function(oobElement) { if (htmx.config.allowNestedOobSwaps || oobElement.parentElement null) { const oobValue getAttributeValue(oobElement, hx-swap-oob) if (oobValue ! null) { oobSwap(oobValue, oobElement, settleInfo, rootNode) } } ... })即当allowNestedOobSwaps为false时只有顶层parentElement null的 OOB 元素会被处理嵌套在响应片段内部、随主交换一同插入的 OOB 元素则被忽略。需要时可通过htmx.config.allowNestedOobSwaps false关闭以应对特定的响应结构问题。6.2 新增textContent交换方式issue #23562.0 新增textContent交换风格不把响应解析为 HTML 片段而是直接以纯文本形式写入目标元素的内容。源码位于 src/htmx.js// For text content swaps, dont parse the response as HTML, just insert it if (swapSpec.swapStyle textContent) { target.textContent content } else { let fragment typeof content string ? makeFragment(content) : content ... }用法示例div hx-get/counter hx-swaptextContent hx-triggerevery 1s/div服务器返回纯文本如42时目标元素内容会被直接设置为该文本不会经历 HTML 解析、片段处理与 OOB/partial 交换流程适合计数器、状态文本等纯文本刷新场景。可与其他hx-swap值innerHTML、outerHTML、beforebegin等配合理解详见 hx-swap 属性文档。6.3 完整 JSDoc 与生成的 TypeScript 定义#2336感谢贡献者 Telroshan本版本为htmx.js补齐了完整 JSDoc 注释并生成了 TypeScript 类型定义。本仓库中的 src/htmx.js 与 src/htmx.esm.d.ts 即为成果后者包含HtmxConfig相关字段如wsReconnectDelay、wsBinaryType等让 TypeScript 项目可以获得完整的类型提示与配置项校验。仓库中另有生成脚本 scripts/generate-web-types.mjs 与 JetBrains 编辑器的 web-types 文件 editors/jetbrains/htmx.web-types.json用于编辑器智能提示。6.4 扩展网站上线与 1.x 兼容扩展本次发布同步完成了扩展网站extensions.htmx.org并新增了htmx 1.x 兼容扩展帮助仍依赖部分 1.x 行为的用户在 2.x 中平滑过渡对应文档见 htmx-1-compat。七、升级路径建议综合发布说明与迁移指南从 1.x 升级到 2.x 的推荐路径为先在测试环境验证beta 版本仅供测试不要直接用于生产替换废弃属性把hx-sse/hx-ws属性迁移到对应扩展并确认 SSE 扩展为 2.x 新版本检查DELETE请求确认服务端能接受 URL 参数形式的负载或按需改回methodsThatUseUrlParams [get]替换hx-on语法统一改为hx-on:前缀 kebab-case 事件名评估三项默认值scrollBehavior、selfRequestsOnly、methodsThatUseUrlParams是否与现有页面行为冲突适配 API 变化检查makeFragment()返回类型使用、扩展中的selectAndSwap→swap调用确认模块产物按项目模块体系选用dist/htmx.esm.js、dist/htmx.amd.js、dist/htmx.cjs.js或浏览器版dist/htmx.js享受新特性按需启用textContent交换、allowNestedOobSwaps配置与 TypeScript 类型支持。更完整的迁移细节与示例请以仓库内的 迁移指南 为准各属性的最新语义可对照 参考手册 与 CHANGELOG 进一步核实。赞分享前端【免费下载链接】htmxhtmx - high power tools for HTML项目地址https://gitcode.com/GitHub_Trending/ht/htmx点击查看免费下载相关推荐Hippy React 版本演进全景解读从 1.x 到 3.x 的关键特性与源码印证Hippy React 版本演进全景解读从 1.x 到 3.x 的关键特性与源码印证 本文以仓库内 driver/js/packages/hippy reac跨平台移动开发前端htmx 2.0.0-alpha1 发布详解核心变更、迁移路径与新配置能力htmx 2.0.0 alpha1 发布详解核心变更、迁移路径与新配置能力 htmx 2.0.0 alpha1 是 htmx 迈向 2.x 时代的首个 alp前端Polly.JS 版本演进全解析从 1.x 到 6.x 的破坏性变更、迁移路径与源码印证Polly.JS 版本演进全解析从 1.x 到 6.x 的破坏性变更、迁移路径与源码印证 Polly.JS 是一款用于录制Record、回放Replay测试开发工具上一篇IPXWrapper完整指南3步让经典游戏在现代Windows恢复IPX局域网联机下一篇QModMaster免费开源ModBus主站工具的高效上手指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考