新闻详情

新闻详情

首页 / 资讯中心 / 详情

htmx 0.0.8 版本发布解析:hx-swap 的 `view` 到 `show` 演进与锚点历史修复

发布时间:2026/10/4 2:04:29来源:尧图网络
htmx 0.0.8 版本发布解析:hx-swap 的 `view` 到 `show` 演进与锚点历史修复
前端【免费下载链接】htmxhtmx - high power tools for HTML项目地址https://gitcode.com/GitHub_Trending/ht/htmx点击查看免费下载本文基于 htmx 仓库发布的 0.0.8 版本公告展开逐条解读该版本的破坏性变更hx-swap的view修饰符更名为show与两项 bug 修复本地锚点历史记录、show滚动功能并结合仓库源码与测试用例说明这些能力在现代 htmx 中是如何被解析、执行与验证的。htmx 在 2020 年 7 月 8 日发布了 0.0.8 版本。这是项目早期0.0.x 系列的一次小型迭代但它确立了两项至今仍影响深远的技术决策hx-swap上的view修饰符正式更名为show以及本地锚点local anchor历史行为的修复。理解这次发布等于理解 htmx 滚动控制与历史记录机制的关键起点。0.0.8 版本发布公告官方发布公告位于 www/content/posts/2020-7-8-htmx-0.0.8-is-released.md同时在仓库根目录的 CHANGELOG.md 中留有对应记录## [0.0.8] - 2020-7-8内容与公告完全一致。0.0.8 的变更清单非常精简只有三类破坏性变更Breaking Changehx-swap的view修饰符更名为show即hx-swapinnerHTML show:top。Bug 修复修复了使用本地锚点a href#example时的历史记录问题。Bug 修复修复了前述show功能的若干问题。破坏性变更view修饰符更名为show变更背景在 0.0.7 版本CHANGELOG.md中hx-swap新增了两个修饰符scroll将目标元素滚动到top或bottom改变元素自身的滚动位置view将目标的top或bottom滚动到视野中把元素滚入视口。0.0.8 将view更名为show使用方式变为hx-swapinnerHTML show:top。这是一个破坏性变更所有在 0.0.7 中写了view:top/view:bottom的页面升级到 0.0.8 后必须改为show:top/show:bottom否则修饰符无法识别。现代源码中的完整修饰符体系在今天的 src/htmx.js 中getSwapSpecification()函数解析hx-swap的全部修饰符可以看到show:已经与scroll:、swap:、settle:等并列成为一套稳定的语法swap:time设置交换延迟swapDelaysettle:time设置稳定化延迟settleDelaytransition:true/false是否启用视图过渡ignoreTitle:true/false是否忽略响应中的title合并scroll:top|bottom|number滚动目标元素自身show:top|bottom将目标滚入视口focus-scroll:true/false请求完成后是否自动滚动到保持焦点的元素第一个空白分隔的词作为交换风格innerHTML、outerHTML、beforeend等。show:修饰符的解析逻辑src/htmx.js会取出show:之后的内容用冒号再次拆分最后一个片段是top/bottom前面的片段则是可选的 CSS 选择器目标元素。例如show:#another-div:top会被解析为show top、showTarget #another-div。show的现代完整语法结合官方属性文档 www/content/attributes/hx-swap.md 与源码show的完整用法如下1. 将交换后的目标元素顶部滚入视口div hx-get/example hx-swapinnerHTML show:top2. 指定一个 CSS 选择器作为滚动目标div hx-get/example hx-swapinnerHTML show:#another-div:top3. 将视口滚动到页面顶部 / 底部div hx-get/example hx-swapinnerHTML show:window:top div hx-get/example hx-swapinnerHTML show:window:bottom4. 禁用默认的show:top行为form action/example hx-swapshow:none底层执行逻辑show修饰符在交换完成后的 settle 阶段生效。在 src/htmx.js 中doSettle()会调用updateScrollState(settleInfo.elts, swapSpec)该函数src/htmx.js处理show逻辑若指定了showTarget则通过querySelectorExt在新内容中查找目标元素window会映射为bodyshow:top调用target.scrollIntoView({ block: start, behavior: htmx.config.scrollBehavior })show:bottom调用target.scrollIntoView({ block: end, behavior: htmx.config.scrollBehavior })。值得注意的是这里的行为模式取自htmx.config.scrollBehavior现代版本默认值为smooth而非硬编码因此开发者可以全局调整滚动动画。提升Boost场景下的默认行为show:top不仅是一个手写修饰符它还是增强型链接/表单boosted links and forms的默认行为。在 src/htmx.js 中可以看到if (htmx.config.scrollIntoViewOnBoost getInternalData(elt).boosted !isAnchorLink(elt)) { swapSpec.show top }也就是说当元素启用了hx-boost且全局配置htmx.config.scrollIntoViewOnBoost默认为true见 src/htmx.js开启时htmx 会自动在交换后将内容顶部滚入视口——除非该元素是本地锚点链接a href#example。要关闭这一默认行为可以全局将htmx.config.scrollIntoViewOnBoost设为false局部在元素上使用hx-swapshow:none。测试验证0.0.8 确立的show:语法至今仍是测试覆盖的重点见 test/attributes/hx-swap.jsworks with show:top验证hx-swapouterHTML show:#d2:top后目标元素被scrollIntoView({ block: start })调用scrollOptions.block.should.equal(start)works with show:bottom验证block: endworks with show:window:bottom验证show:window:bottom时滚动的是document.body。这三组用例分别覆盖了“无选择器”“带选择器”“针对 window”三种形态正好对应上述三种语法。修复一本地锚点的历史记录问题问题背景0.0.8 修复了使用本地锚点时的历史记录 buga href#example。这类链接的典型场景是单页内跳转——点击后浏览器地址栏会追加#example片段页面滚动到对应锚点。在 0.0.8 之前htmx 的历史记录管理对这类本地锚点处理不完善可能导致 URL 片段fragment在历史条目中丢失或记录错误进而引发后退 / 前进时无法恢复到正确的锚点位置。现代实现片段与锚点的完整保存与恢复在现代 src/htmx.js 中htmx 会在保存历史快照时拆分 URL 的路径与片段const splitPath path.split(#) const anchor splitPath[1] ... if (anchor) { finalPath # anchor }片段anchor被完整保留在路径信息pathInfo中见 src/htmx.js 的类型定义并在恢复历史时一并还原在 src/htmx.js 中若当前 URL 不包含#而保存的pathInfo.anchor存在则会把#anchor重新拼回路径在交换完成后的 settle 阶段src/htmx.js若存在swapOptions.anchorhtmx 会解析# anchor对应的元素并调用scrollIntoView({ block: start, behavior: auto })把页面滚动到锚点位置。这样a href#example的点击不仅完成了本地跳转其片段还会被纳入历史管理后退 / 前进时可以准确恢复。对本地锚点的特殊豁免除了历史保存本地锚点在事件处理中也有专门分支。在 src/htmx.js 的shouldCancel逻辑中const link elt.closest(a) // Allow links with href#fragment (anchors with content after #) to perform normal fragment navigation. const samePageAnchor /^#./ if (link link.href !samePageAnchor.test(link.getAttribute(href))) { return true }含义是href#foo带片段内容的本地锚点不取消默认行为允许浏览器执行正常的片段导航跳转到页面内锚点href#空片段则被取消默认行为避免页面滚回顶部或产生多余的 URL 变化。这正体现了 0.0.8 修复的延续本地锚点应该走浏览器的原生片段导航而不是被 htmx 拦截成一次 AJAX 请求。此外src/htmx.js 的isAnchorLink()通过href中是否包含#来判断锚点链接并被getSwapSpecification()用于豁免提升场景的默认show:topsrc/htmx.js——锚点跳转不应触发多余的视口滚动这与 0.0.8 修复的初衷一脉相承。修复二show功能自身的 bug 修复0.0.8 公告同时提到修复了show原view功能本身的问题。虽然公告未展开细节但从现代实现可以推断修复覆盖的核心点滚动目标解析show:selector:top中的选择器可能包含嵌套冒号现代解析逻辑src/htmx.js会先pop()出最后一个top/bottom再将剩余部分用join(:)还原为完整选择器避免#d1:top这类带冒号的选择器被错误拆分window特例show:window:top会把window映射为body再查找目标src/htmx.js滚动块方向top对应block: start、bottom对应block: endsrc/htmx.js保证视口对齐符合直觉。升级注意与历史脉络从 0.0.7 升级到 0.0.8 的迁移清单如果你正在维护使用 0.0.x 早期版本的项目升级到 0.0.8 需要做一次全局搜索替换旧写法0.0.7新写法0.0.8hx-swapinnerHTML view:tophx-swapinnerHTML show:tophx-swapinnerHTML view:bottomhx-swapinnerHTML show:bottomhx-swapouterHTML view:#el:tophx-swapouterHTML show:#el:top其余修饰符scroll、swap:、settle:等不受影响。版本脉络中的位置在 htmx 的版本史中0.0.8 处于一个承上启下的位置0.0.7CHANGELOG.md首次引入scroll与view修饰符同时新增hx-push-url接受 URL 参数、hx-vars动态追加请求参数0.0.8将view更名为show并修复锚点历史与show自身的问题后续版本在此基础上持续演进show语法被完整保留并写入官方文档 www/content/attributes/hx-swap.md。今天你在 htmx 官方文档、教程与各类示例中见到的show:top/show:window:bottom其语法源头正是 0.0.8 的这次改名。小结htmx 0.0.8 虽然是一个体量很小的版本但它的两个决定具有长期意义view→show的更名统一并稳定了 htmx 的滚动控制语法show:与scroll:一起构成了 htmx 处理内容交换后如何调整视口的完整方案并延续至今src/htmx.js本地锚点的历史修复让href#example这类链接在 htmx 页面中既能保持原生片段导航又能被历史记录正确保存与恢复src/htmx.js同时不会被提升boost场景的默认滚动行为干扰src/htmx.js。对于学习 htmx 源码的读者0.0.8 也是一个很好的切入点从getSwapSpecification()的修饰符解析到updateScrollState()的滚动执行再到shouldCancel()对本地锚点的豁免这一条调用链覆盖了属性解析 → 请求 → 交换 → 滚动/历史恢复的完整闭环值得沿着 src/htmx.js 与 test/attributes/hx-swap.js 继续深入阅读。赞分享前端【免费下载链接】htmxhtmx - high power tools for HTML项目地址https://gitcode.com/GitHub_Trending/ht/htmx点击查看免费下载相关推荐Go与C互操作实战xmly-downloader-qt5的cgo c-archive跨语言调用方案深度剖析Go与C互操作实战xmly downloader qt5的cgo c archive跨语言调用方案深度剖析 xmly downloader qt5 是一款前端htmx 1.2.0 版本特性详解hx-vals 取代 hx-vars、新增 hx-headers 与历史恢复请求标识htmx 1.2.0 版本特性详解hx vals 取代 hx vars、新增 hx headers 与历史恢复请求标识 2021 年 2 月 13 日发布的前端FastRTC机器人视觉通信实时传输与处理机器人摄像头数据FastRTC机器人视觉通信实时传输与处理机器人摄像头数据 在工业自动化与智能监控领域机器人视觉系统需要解决两大核心挑战低延迟的视频流传输和实时的图像分析前端UI组件上一篇3步快速部署OpenMetadata免费的元数据管理平台本地安装教程下一篇Equalizer APO音频调校技术指南从问题诊断到专业优化创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
网站建设高端定制企业官网
RELATED

相关资讯

更多精彩内容,欢迎继续阅读

较早相关资讯

最新相关资讯

USB(三): 磁盘、卷、分区解释(适用于U盘,SD等移动存储) 2026/10/4 2:02:51

USB(三): 磁盘、卷、分区解释(适用于U盘,SD等移动存储)

磁盘、卷、分区解释 最近快被磁盘、卷、分区搞懵了,于是整理一些资料理清这三个概念 一、简介 磁盘:磁盘很好理解,就是平时我们用的存储设备,包括像U盘、电脑硬盘以及软盘。 分区:将磁盘划分为多个独立的存储区域&…

阅读更多 →
高炉炼铁机器视觉与智能识别十八讲~系列文章02:高炉相机怎么“看清“——耐高温成像技术与选型 2026/10/4 2:01:57

高炉炼铁机器视觉与智能识别十八讲~系列文章02:高炉相机怎么“看清“——耐高温成像技术与选型

第 02 期 | 成像基础:高温恶劣环境下,高炉相机怎么"看清"——耐高温成像技术与选型上一期我们说高炉要"长出眼睛",可现实很骨感:风口前上千度、炉顶喷满粉尘、铁口火花四溅……普通相机一上去就"瞎了&qu…

阅读更多 →
2026年职业院校技能大赛“软件测试”赛项-ERP管理平台题库答案-做题录屏 2026/10/4 2:01:49

2026年职业院校技能大赛“软件测试”赛项-ERP管理平台题库答案-做题录屏

阅读更多 →
假眼+扫描 假眼+真眼 2026/10/4 2:01:39

假眼+扫描 假眼+真眼

一. 假眼真眼假设草丛里面有一个 假眼 这个时候开启扫描 敌方的敌人将要丢失视野二.假眼真眼假设草丛里面现在有个假眼这个时候 去插一个真眼,地方一样会丢到视野,三.结论可以通过这个小技巧来使敌方丢到视野,从而进行压制

阅读更多 →
路由器千万别乱开智能加速!看似提速,实则偷偷拖垮你家全网网速 2026/10/4 2:00:50

路由器千万别乱开智能加速!看似提速,实则偷偷拖垮你家全网网速

很多人为了让网速更快,都会在路由器后台、手机管理APP里主动开启「智能加速」「游戏加速」「智能优选」功能。本以为打开之后网速更稳、延迟更低、跑速更高,结果开完之后恰恰相反:网速忽快忽慢、短视频频繁缓冲、游戏跳ping严重、晚高峰直接卡…

阅读更多 →
DeepLabCut-live-GUI 相机配置完全指南:从多相机添加到触发同步与参数调优 2026/10/4 1:57:01

DeepLabCut-live-GUI 相机配置完全指南:从多相机添加到触发同步与参数调优

人工智能深度学习计算机视觉科研 【免费下载链接】DeepLabCut Official implementation of DeepLabCut: Markerless pose estimation of user-defined features with deep learning for all animals incl. humans 项目地址: https://gitcode.com/gh_mirrors/de/Deep…

阅读更多 →

今日资讯

本周资讯

本月资讯

看完文章仍有疑问?

联系尧图顾问,获取一对一建站咨询

立即免费咨询 📞 400-888-8888
📞 ✉