前端【免费下载链接】htmxhtmx - high power tools for HTML项目地址https://gitcode.com/GitHub_Trending/ht/htmx点击查看免费下载htmx 2.0.0-alpha1 是 htmx 迈向 2.x 时代的首个 alpha 版本它移除了历史遗留的hx-sse/hx-ws属性、将 head 标签处理并入核心、并引入了disableInheritance与responseHandling两项全新的可配置能力。本文以官方发布公告为主体结合 migration-guide-htmx-1.md 迁移指南与 src/htmx.js 源码实现梳理 1.x → 2.x 的破坏性变更、安装方式、扩展生态调整以及每一项新特性背后的配置默认值与底层逻辑帮助你评估是否值得升级、以及如何平滑迁移。一、版本定位alpha 发布面向真实场景的公开测试2.0.0-alpha1 是 htmx 2.0 系列的第一个 alpha 版本官方在公告中明确强调这是一个 alpha 版本不应被视为可用于生产环境。发布它的目的是让代码在真实世界场景下接受测试找出哪些功能被破坏、哪些需要改进。因此如果你有能力官方建议切换到该版本对你现有的 htmx 功能做一次快速回归测试并将发现的问题反馈给社区。alpha 阶段的重点是收集问题而非承诺稳定。截止到当前仓库htmx 主版本已演进至2.0.11见 src/htmx.js 中version字段alpha1 所确立的架构方向在后续版本中持续巩固。与 1.x 的关键差异还有一个长期承诺htmx 2.x 将不再兼容 IE但 1.x 会继续为 IE 用户提供支持。二、三大核心变更升级前必须了解公告列出了官方最关心的三项破坏性变更它们也是 1.x → 2.x 迁移中最重要的行为差异。1. 移除废弃的hx-sse与hx-ws属性1.x 中通过hx-sse和hx-ws属性提供的 Server-Sent Events 与 WebSocket 能力已被移除统一改用扩展extensions实现。扩展版本在 1.x 中就已可用因此升级路径是把属性写法改写为扩展写法例如引入 sse 扩展 与 ws 扩展 对应的 JS 文件并在元素上声明hx-extsse/hx-extws。2. head 标签处理并入核心成为 boosted 链接的默认行为此前由head-extension提供的head标签处理逻辑被集成进 htmx 核心。这意味着在 2.x 中当使用hx-boost或触发 boosted 请求时响应中的title等 head 内容会默认被合并处理不再需要额外引入扩展。3. DELETE 请求改为使用 URL 参数而非表单编码 body按照 HTTP 规范DELETE请求的负载应当像GET一样通过请求参数URL 参数传递而不是放在 form-encoded 的请求体中。2.x 遵循了这一规范因此服务端对 DELETE 参数的解析方式需要同步调整。这一行为在源码中由配置项methodsThatUseUrlParams控制其默认值已更新为// src/htmx.js 第 235 行附近的默认配置 methodsThatUseUrlParams: [get, delete],在 src/htmx.js 的请求构造逻辑中htmx 会根据htmx.config.methodsThatUseUrlParams.indexOf(verb) 0判断当前 HTTP 动词是否应把参数编码进 URL。如果你希望保留 1.x 的“DELETE 使用表单编码 body”行为可以将该配置改回[get]。三、迁移指南1.x → 2.x 的完整改动清单官方发布的完整迁移指南位于 migration-guide-htmx-1.md。官方高度重视向后兼容因此绝大多数场景下迁移工作量很小但以下清单需要逐项核对。1. 模块类型文件在模块化module使用场景中htmx 现在为三种主流 JavaScript 模块类型分别提供文件模块类型文件ESM 模块/dist/htmx.esm.jsAMD 模块/dist/htmx.amd.jsCJS 模块/dist/htmx.cjs.js而/dist/htmx.js继续作为浏览器可直接加载的文件使用。2. 扩展全部移出核心所有扩展已从 htmx 核心发行包中剥离独立分发。多数 1.x 扩展在 htmx 2 中仍可继续工作但SSE 扩展必须升级到 2.x 版本官方同时建议将所有扩展都升级到 2.x 版本。若你仍在用遗留的hx-ws、hx-sse属性请迁移到对应扩展。3. 默认行为变更可回退迁移指南明确列出了三项默认值变化如果你希望保留 1.x 行为可以通过配置回退平滑滚动若想恢复 1.0 默认的平滑滚动将htmx.config.scrollBehavior改回smoothDELETE 请求体若想恢复 form-encoded body将htmx.config.methodsThatUseUrlParams改回[get]注意按规范 DELETE 应如 GET 一样使用请求参数这一点略显反直觉跨域请求若想允许 htmx 发起跨域请求将htmx.config.selfRequestsOnly改回false。当前仓库中该配置默认值为true见 src/htmx.js即默认禁止向非同源主机发起基于 htmx 的请求。4.hx-on属性迁移为hx-on:语法1.x 的hx-on属性需转换为对应的hx-on:事件语法。由于 HTML 属性不区分大小写事件名必须使用 kebab-case。迁移前button hx-get/info hx-onhtmx:beforeRequest: alert(Making a request!) htmx:afterRequest: alert(Done making a request!) Get Info! /button迁移后button hx-get/info hx-on:htmx:before-requestalert(Making a request!) hx-on:htmx:after-requestalert(Done making a request!) Get Info! /button注意htmx:beforeRequest写成了htmx:before-request这正是 kebab-case 要求的体现。5.htmx.makeFragment()返回值类型统一htmx.makeFragment()方法现在始终返回DocumentFragment而不再是在Element与DocumentFragment之间二选一。这消除了调用方的类型不确定性。6. 扩展作者注意selectAndSwap已被swap取代如果你维护扩展且使用了内部 API 的selectAndSwap方法它已被移除并替换为swap方法。swap同时暴露在内部 API 与公开的 htmx API 中。新写法示例let content divHello world/div; // 将被 swap 进目标的 HTML let target api.getTarget(child); let swapSpec api.getSwapSpecification(child); api.swap(target, content, swapSpec);swap方法的完整文档见 api.md 中的swap一节。四、安装与获取 2.0.0-alpha1该 alpha 版本可通过包管理器引用2.0.0-alpha1版本号安装也可通过 CDN 直接引用script srchttps://unpkg.com/htmx.org2.0.0-alpha1/dist/htmx.min.js/script也可直接下载该 CDN 文件离线使用。对于后续的 2.x 正式版本官方分发渠道与 1.x 保持一致npm 包htmx.org、unpkg/jsdelivr 等 CDN以及本仓库的 dist 构建产物。五、扩展生态的重新布局公告指出扩展已从主代码库中移除统一收归独立的 htmx-extensions 仓库ext目录管理未来将通过扩展专属站点与 NPM 分发。在过渡期内扩展需要直接从该仓库链接引用。扩展体系中存在一个破坏性变更即 SSE 扩展因此必须使用其新版实现。这与迁移指南中“SSE 扩展必须升级到 2.x 版本”的提醒相互印证。六、2.0 系列新增特性详解公告总结了 alpha1 引入的五项新特性其中三项与可配置能力直接相关。下面逐一结合源码说明其含义与用法。1. head 标签合并功能开箱即用如上文所述head标签合并不再依赖扩展而是 htmx 核心的默认能力。在 handleAjaxResponse 的响应处理流程中htmx 会通过handleTitle见 src/htmx.js将响应中的title更新到当前文档——优先更新已有title元素否则回退到window.document.title。ignoreTitle配置默认false可关闭这一行为。2. Shadow DOM 下的 Web Components 支持htmx 现在可以在 Web Components 的 Shadow DOM 内部正常工作这解决了此前组件封装场景下 htmx 事件与查找逻辑失效的问题。相关回归测试见 test/core/shadowdom.js可用于验证 Shadow DOM 中的请求触发、目标解析与内容交换。3.htmx.config.disableInheritance彻底关闭属性继承属性继承是 htmx 的核心机制之一子元素自动继承祖先的hx-*属性而新配置disableInheritance允许你全局关闭这一机制htmx.config.disableInheritance true;其默认值为false见 src/htmx.js。从源码看该开关在getAttributeValueWithDisinheritance见 src/htmx.js中生效当目标元素不是初始元素、且disableInheritance为true时只有祖先显式声明了hx-inherit值为*或包含该属性名才会继续继承否则返回null终止向上查找。这意味着开启后属性继承只能通过显式的hx-inherit白名单恢复适合需要严格隔离组件边界的场景。4.htmx.config.responseHandling响应码处理全面可配置responseHandling是 2.0 引入的重量级新能力它把“不同 HTTP 状态码如何被处理”抽象为一张可配置规则表。当前仓库的默认配置为见 src/htmx.jsresponseHandling: [ { code: 204, swap: false }, { code: [23].., swap: true }, { code: [45].., swap: false, error: true } ]其含义为规则匹配状态码行为{ code: 204, swap: false }204不执行 swap无内容{ code: [23].., swap: true }200-399正常 swap 响应内容{ code: [45].., swap: false, error: true }400-599不 swap并标记为错误code字段是正则表达式会与状态码字符串进行匹配见 codeMatches。在 resolveResponseHandling 中htmx 按数组顺序逐一匹配xhr.status返回第一个命中的规则若无任何匹配则默认不 swap。每条规则还支持error标记请求失败、ignoreTitle忽略标题更新、select选择响应片段、target重定向目标、swapOverride覆盖交换策略与event触发自定义事件等可选字段这些字段会在 handleAjaxResponse 中被消费并合并进htmx:beforeSwap事件细节。典型自定义场景若你的服务端用286状态码表示“轮询停止”可追加规则{ code: 286, swap: false }源码中也确实对 286 做了取消轮询的特殊处理见 src/htmx.js若想让 4xx 响应也参与 swap 展示错误页可以调整[45]..规则或新增更高优先级的规则。5. 模板化解析成为标准机制htmx 2.0 将基于template的解析方式确立为解析新内容的标准机制。模板解析把新内容包裹在独立的模板节点中处理从而显著缓解了此前table等受 HTML 解析规则限制的元素与其他内容混排时出现的解析错乱问题。这意味着服务端返回的片段中包含表格行、列等特殊结构时处理将更加可靠。七、升级决策与验证建议综合发布公告与迁移指南升级到 htmx 2.x 前建议按以下顺序验证盘点扩展使用情况检查是否使用了hx-sse/hx-ws遗留属性以及 SSE 扩展版本是否为 2.x检查请求体解析确认服务端对 DELETE 请求参数的解析方式URL 参数 vs form body核对 head 处理依赖若此前依赖 head-extension2.x 已内置可移除该扩展引用迁移hx-on写法全部改为hx-on:kebab-case 语法回归测试核心交互重点覆盖 Shadow DOM 组件、属性继承边界与特殊状态码场景。当前仓库的完整测试套件位于 test 目录其中 test/core/ajax.js、test/core/config.js 与 test/core/shadowdom.js 分别覆盖了请求行为、配置项与 Shadow DOM 场景可作为升级后功能回归的参考基线。htmx 1.x 将继续维护并为 IE 用户提供支持因此不必担心旧版本被立即弃用——但 2.0 所确立的模块化分发、扩展独立化与可配置响应处理显然是 htmx 未来演进的主航道。赞分享前端【免费下载链接】htmxhtmx - high power tools for HTML项目地址https://gitcode.com/GitHub_Trending/ht/htmx点击查看免费下载相关推荐Shields 服务更新日志详解读懂 server 版本发布、配置迁移与自托管升级路径Shields 服务更新日志详解读懂 server 版本发布、配置迁移与自托管升级路径 Shields 仓库根目录的 CHANGELOG.md https:/开发工具后端Tom Select v2迁移指南核心变更与CSS调整详解Tom Select v2迁移指南核心变更与CSS调整详解 前言 Tom Select作为一款功能强大的选择框/标签输入库在v2版本中进行了多项重要改进。本前端UI库/组件SeaORM 2.0.0 正式发布新实体格式、RBAC 与同步版 ORM 核心变更全解析SeaORM 2.0.0 正式发布新实体格式、RBAC 与同步版 ORM 核心变更全解析 SeaORM 2.0 是 2.x 系列的第一个稳定版本它重新设计了后端数据库ORM上一篇如何快速构建GPT训练数据doccano文本标注完整指南下一篇Apache DolphinScheduler Slack 告警插件配置指南从 Incoming Webhooks 申请到消息发送原理创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考