Htmx 4.0.0 已发布

htmx 4.0.0 发布 htmx团队非常高兴地宣布发布htmx 4.0.0！这是8个月工作的成果（加上游戏），我们对结果非常满意。htmx 4的构思开始于我决定创建fixi，并在此过程中更加熟悉fetch() API和JavaScript中的异步编程。（由于向后兼容性问题，htmx一直使用XMLHttpRequest。）一个偶然的晚上，我收到了Christian的联系，他对流式HTML有些有趣的想法，这让我觉得将内部结构移动到fetch()将为他和库本身简化许多。经过一番努力，我成功地让Michael和Alex参与进来，我们便开始了开发。开发过程非常顺利。我们开始了一项fixi + htmx测试套件的移植。随着时间的推移，我们重新发现了htmx为何做许多事情的原因，并使我们的新实现越来越接近旧版。目前，2.x和4.x之间的行为差异相对较小，而在这些差异的地方，我们做出了明确的选择，使得基于htmx的应用在未来100年内能很好地作为网络服务。请注意，我们不会将4.0标记为NPM中的最新版本，因为我们不想强迫依赖非版本化CDN URL的用户升级。相反，2.x将保持为最新，4.0版本将在2027年初之前保持为下一个版本。然而，网站将会提及4.0。主要变化如上所述，从用户的观点来看，htmx 4几乎与htmx 2完全相同。有三个主要变化：属性继承现在默认明确而非隐式（这是最重要的升级项）htmx事件名称已被标准化和清理。一些高级用户可能需要更改他们监听的事件。历史支持现在默认不使用localStorage（这曾是许多支持问题的根源）。大多数人根本不会注意到这一点。在内部，我们已从XMLHttpRequest迁移到fetch()，但这对大多数htmx用户而言应该是透明的。属性继承在htmx 2中，许多属性默认是“继承”的。这允许您将属性放置在父元素上，并且其行为将应用于子元素。这种行为源于intercooler.js时代，受到CSS的启发，而且不出所料，与CSS的效果大致相同：强大但有时难以理解。在htmx 4中，除非您明确通过在属性名称后添加：inherited来声明，否则属性不会被继承： < div hx-confirm = "您确定吗？" > < button hx-delete = "/item/1" >删除</ button > </ div >  < div hx-confirm:inherited = "您确定吗？" > < button hx-delete = "/item/1" >删除</ button > </ div > 这将在从htmx 2迁移到htmx 4时成为最大的升级负担。为了简化操作，我们提供了一个命令行工具来查找需要标记为继承的地方。请注意，属性如hx-disinherit事件 ht2中触发的事件在库的发展过程中自然增长，并且未特别组织，因此很难确切知道哪一个事件在何时触发。在htmx 4中，所有事件现在遵循htmx:phase:action[:sub-action]：htmx 2 htmx 4 htmx:beforeRequest htmx:before:request htmx:afterRequest htmx:after:request htmx:beforeSwap htmx:before:swap htmx:afterSwap htmx:after:swap htmx:configRequest htmx:config:request 此外，还做了以下更改：大多数错误事件合并为htmx:error。HTTP错误响应触发htmx:response:error。htmx:xhr:*事件被移除。htmx 4使用fetch()。htmx:validation:*事件被移除，以支持本地浏览器表单验证。完整表格在“htmx 4中的新功能”中。命令行升级检查器标记hx-on属性和您可以找到的JavaScript中的旧事件名称。历史历史支持一直包含在htmx中，允许您通过简单的属性实现对“后退”按钮的感知操作。在htmx 2中，使用localStorage中的缓存快照页面以便恢复。不幸的是，许多问题的根源在于这个快照可能包括第三方JavaScript库的DOM变更。当页面恢复时，这些变更仍然存在，但底层JavaScript逻辑并不存在。htmx 4不在localStorage中缓存页面。在后退导航时，htmx重新获取页面并将其交换到<body>中，或者如果存在，将其交换到[hx-history-elt]元素中。这使得大多数情况下第三方JavaScript库“正常工作”，并且在良好的请求缓存下，速度非常快。如果您想要本地缓存，我们现在提供了一个非常完整的hx-history-cache扩展，从sessionStorage恢复历史，并设计得与Alpine.js等脚本解决方案良好集成。新特性在htmx 4中有两个新的重大功能，我们都感到非常兴奋：Morph Swaps 我们现在支持形态交换。