前端【免费下载链接】htmxhtmx - high power tools for HTML项目地址https://gitcode.com/GitHub_Trending/ht/htmx点击查看免费下载htmx 1.8.62023-03-02 发布是 htmx 从浏览器全局脚本迈向现代模块化生态的关键版本它首次引入官方 ESMECMAScript Modules构建产物让开发者可以通过import语句以标准模块方式加载 htmx同时从 htmx.org 官网构建链中彻底移除了 Sass使得 Python 2 不再是开发 htmx 的前置依赖。本文基于当前仓库源码与测试逐项拆解这两个新特性、一个关键 bug 修复keyup事件的changed修饰符在 Tab 聚焦输入框时失效并给出可直接运行的实战用法与源码级验证路径。一、版本背景1.8.6 在 htmx 演进中的位置htmx 1.8.x 系列处于 1.x 时代的成熟期1.8.6 之后仍陆续有 1.8.5、1.8.6 等补丁版本注意 1.8.6 实际在 1.8.5 之后发布是 1.8 分支的收尾版本之一随后项目于 2024 年进入 2.x 时代。当前仓库的 package.json 显示版本已迭代到2.0.11但 1.8.6 确立的两项技术决策——发布 ESM 产物与官网构建不再依赖 Sass/Python 2——至今仍是仓库工程化的基石构建脚本 scripts/dist.sh 至今仍在生成 ESM 产物官网 www/themes/htmx-theme 也始终以纯 CSS 与静态模板运行。本次发布公告原文结构清晰包含两个新特性、两个改进/修复条目。下面逐一深入。二、新特性一官方 ESM 支持2.1 特性意义1.8.6 之前htmx 主要以 IIFE立即执行函数形式的全局脚本分发使用方式几乎只有script srchtmx.min.js/script一种。1.8.6 起官方构建产物中新增ESM 版本前端工程化项目中可以直接script typemodule import htmx from htmx.org // 或使用相对路径/本地文件 import htmx from /path/to/htmx.esm.js htmx.ajax(GET, /example, { target: #target-div }) /script2.2 源码实现ESM 产物如何生成当前仓库的 scripts/dist.sh 明确展示了 ESM 产物的生成方式——并非手工维护一份独立源码而是把唯一的源码文件 src/htmx.js 直接包装为 ES 模块# Generate ESM script cat dist/htmx.esm.js EOF $(cat $HTMX_SRC) export default htmx EOF也就是说htmx 的全部逻辑始终以一份源码src/htmx.js为准ESM 版只是在末尾追加一行export default htmx。同时该脚本还会生成dist/htmx.jsIIFE、dist/htmx.min.js、dist/htmx.min.js.gz、dist/htmx.amd.jsAMD与dist/htmx.cjs.jsCommonJS覆盖script标签、RequireJS、Node/打包器三种主流加载场景。2.3 工程化配套类型声明与 IDE 支持ESM 支持并非孤立存在它与类型系统、编辑器提示紧密配套类型声明文件 src/htmx.esm.d.ts 为 TypeScript 项目提供完整的htmx类型当前仓库中htmx.esm.d.ts由npm run types-generate从源码生成。JetBrains 系 IDE 的 web-types 元数据由 scripts/generate-web-types.mjs 生成产物为 editors/jetbrains/htmx.web-types.json让hx-*属性在 IDE 中具备自动补全与校验。package.json 中main、types、jsdelivr、unpkg字段分别指向dist/htmx.esm.js、dist/htmx.esm.d.ts与dist/htmx.min.js——从 2.0.1 起main正式指向 ESM 产物说明 1.8.6 开创的 ESM 路径最终成为 htmx 的主分发入口。2.4 从 1.8.6 到当前的演进1.8.6 首次提供dist/htmx.esm.js让 Vite、Webpack、Rollup 等构建工具可以直接import htmx from htmx.org并参与 tree-shaking 与模块依赖分析到了 2.0.1dist/htmx.esm.js更被提升为包入口main文件这意味着现代打包器默认就会解析到 ESM 产物。可以说 1.8.6 是 htmx 完成模块化转身的起点。三、新特性二官网构建链移除 SassPython 2 不再是开发前提3.1 背景htmx.org 官网即本仓库的 www 目录基于 Zola 静态站点生成器早期使用 Sass 预处理器编写样式而构建 Sass 需要 Ruby 环境在部分老旧工具链下甚至牵扯到 Python 2。1.8.6 起网站样式被改为纯 CSS整个网站构建不再依赖 SassPython 2 随之从开发依赖中消失大幅降低了参与 htmx 开发的门槛。3.2 当前仓库中的实际形态查看 www/themes/htmx-theme 主题目录可以看到样式文件为纯 CSSwww/themes/htmx-theme/static/css/site.css仓库中不存在任何.scss/.sass源文件网站运行时所需的 htmx 脚本直接来自源码拷贝——scripts/www.sh 会把 src/htmx.js 复制为 www/themes/htmx-theme/static/js/htmx.js保证官网演示与仓库源码始终同步该脚本还会把test/与src/同步到 www/static使官网可以直接运行浏览器测试套件。这一改动让 htmx 的源码→构建→官网演示→测试链条全部收敛到 Node.js bash 之上。当前 package.json 的脚本npm run dist、npm run www、npm run test等已完全不需要 Python 2与 1.8.6 的决策一脉相承。四、关键 Bug 修复keyup的changed修饰符在 Tab 聚焦时失效4.1 问题描述hx-trigger支持changed修饰符其语义为仅当元素的值相对于上一次触发时发生了变化才发起请求。1.8.6 修复了一个边界 bug当输入框是通过键盘 Tab 键聚焦tabbed into时keyup changed组合无法正确判断值变化导致请求被错误地触发或漏触发。4.2 源码级原理changed修饰符如何工作当前 src/htmx.js 中的实现分为两个阶段阶段一触发规范解析。在解析hx-trigger字符串时遇到changedtoken 即给该触发规范打上标记src/htmx.jsif (token changed) { triggerSpec.changed true }阶段二值快照与比对。htmx 在addEventListener绑定监听器时会为每个被监听元素记录当前value作为基准快照src/htmx.js使用嵌套的WeakMap按触发规范隔离存储避免不同 triggerSpec 相互干扰if (triggerSpec.changed) { if (!(lastValue in elementData)) { elementData.lastValue new WeakMap() } eltsToListenOn.forEach(function(eltToListenOn) { if (!elementData.lastValue.has(triggerSpec)) { elementData.lastValue.set(triggerSpec, new WeakMap()) } elementData.lastValue.get(triggerSpec).set(eltToListenOn, eltToListenOn.value) }) }事件触发时src/htmx.js取出evt.target.value与快照比较相同则直接 return不发起请求不同则更新快照if (triggerSpec.changed) { const node evt.target const value node.value const lastValue elementData.lastValue.get(triggerSpec) if (lastValue.has(node) lastValue.get(node) value) { return } lastValue.set(node, value) }可以推断1.8.6 之前的 bug 与值快照的初始化时机/来源元素判定有关Tab 聚焦路径下事件目标与快照记录的元素不一致或快照未正确初始化导致changed判定失效。修复后无论用户是点击进入输入框还是 Tab 聚焦快照比对都保持一致。4.3 测试验证changed修饰符的回归保护当前仓库的 test/attributes/hx-trigger.js 为changed修饰符提供了多组用例其中 test/attributes/hx-trigger.js 的核心用例完整覆盖了值未变不请求、值变化才请求、再次点击不重复请求的行为it(changed modifier works, function() { // ... 模拟点击 input input.click(); this.server.respond() div.innerHTML.should.equal() // 值未变无请求 input.value bar input.click(); this.server.respond() div.innerHTML.should.equal(Requests: 1) // 值已变发起请求 input.click(); this.server.respond() div.innerHTML.should.equal(Requests: 1) // 值未再变不再请求 })仓库还覆盖了与from:子句组合、多输入框、多 triggerSpec 隔离等场景test/attributes/hx-trigger.js确保这一修复不会破坏既有行为。五、实战changed修饰符的典型用法5.1 标准修饰符速查hx-trigger的标准修饰符完整定义见 www/content/attributes/hx-trigger.md修饰符作用once事件只触发一次如首次点击changed仅当元素值发生变化时才触发注意change是事件名changed是修饰符名二者不同delay:时间事件触发前延迟期间再次触发则重置计时throttle:时间事件触发后节流节流期间再次触发被忽略from:选择器监听其他元素的事件如from:input、from:document、from:closest divtarget:选择器按事件目标过滤5.2 搜索框防抖示例官方文档 www/content/attributes/hx-trigger.md 给出的经典组合——changed搭配delay实现输入变化且停顿 1 秒后才搜索input nameq hx-get/search hx-triggerinput changed delay:1s hx-target#search-results/响应内容会被插入到idsearch-results的元素中。changed保证连续输入同一值不重复请求delay:1s保证输入停顿后才请求两者结合正是防抖搜索的标准范式。六、如何在本仓库中验证 1.8.6 的两项遗产当前仓库可以直接复现/验证上述机制查看 ESM 构建执行npm run dist由 scripts/dist.sh 驱动先运行npm install安装依赖即可在dist/下生成htmx.esm.js等全部产物源码产物逻辑见 scripts/dist.sh。运行changed修饰符测试执行npm run test:chrome依赖 Playwright详见 package.json测试套件中的 test/attributes/hx-trigger.js 会覆盖changed修饰符的完整行为矩阵。观察官网构建链执行npm run wwwscripts/www.sh可看到网站如何将 src/htmx.js 同步为官网静态资源——全程无需 Python 2 与 Sass。七、总结htmx 1.8.6 表面上是 1.x 时代的一个小版本却承载了三项影响深远的变更ESM 支持让 htmx 进入现代模块化前端工具链为后续 2.x 将 ESM 设为包入口见 package.json 的main字段铺平道路移除 Sass / Python 2 依赖让官网构建与整体开发环境回归纯 Node bash降低贡献门槛keyup changed聚焦 bug 修复完善了hx-trigger修饰符在键盘导航场景下的可靠性其修复逻辑至今保留在 src/htmx.js 的值快照机制中并有 test/attributes/hx-trigger.js 的完整测试守护。对于使用 htmx 的开发者1.8.6 最直接的收获是你可以在构建工具中原生import htmx同时放心地在输入类元素上使用changed修饰符无论用户用鼠标还是 Tab 键聚焦行为都一致可靠。赞分享前端【免费下载链接】htmxhtmx - high power tools for HTML项目地址https://gitcode.com/GitHub_Trending/ht/htmx点击查看免费下载相关推荐Gatsby v5.10.0 发布说明解析SSR/DSG 引擎瘦身、Drupal/Contentful typePrefix 支持与构建稳定性修复Gatsby v5.10.0 发布说明解析SSR/DSG 引擎瘦身、Drupal/Contentful typePrefix 支持与构建稳定性修复 本篇文章围前端静态站点Web框架CommandAPI Kotlin DSL用Kotlin编写Minecraft命令的完全指南CommandAPI Kotlin DSL用Kotlin编写Minecraft命令的完全指南 CommandAPI 是专为 Bukkit/Spigot 服务器Eclipse Mosquitto 1.5.7 发布详解Broker 持久化瘦身、include_dir 排序与库 API 修复Eclipse Mosquitto 1.5.7 发布详解Broker 持久化瘦身、include_dir 排序与库 API 修复 本篇文章基于 Mosquit物联网消息队列后端网络/通信上一篇终极指南如何用tcc-g15完全掌控Dell G15散热系统下一篇NVIDIA Profile Inspector终极指南5分钟解锁显卡隐藏性能设置创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考