- 从 XMLHttpRequest 迁移到原生 fetch() API，以获得更好的性能和流式传输功能。
- 转向显式属性继承和标准化事件命名约定。
- 引入变形交换和用于复杂 DOM 更新的 hx-partial 标签。
- 通过用真实的服务器请求替换本地快照，彻底改革历史记录管理。
如果你在 Web 开发领域待过一段时间，你可能知道 htmx 就像是 HTML 的魔法师。它让你只需在标签中添加几个属性，就能实现通常需要庞大的 JavaScript 框架才能完成的功能——比如无需重新加载页面即可更新页面。htmx 4的发布意义重大，因为它不仅仅是添加了一些花哨的功能；它从根本上重构了引擎，让你的应用运行更流畅、更可靠。
核心理念依然不变：将逻辑保留在服务器端，并使用超文本作为应用程序状态引擎（HATEOAS）。htmx 4 不再像以前那样来回交换 JSON 数据，而是直接向服务器请求 HTML 片段并将其插入 DOM。对于那些厌倦了现代前端工具复杂性的人来说，这无疑是一股清流，它专注于行为的局部性，让你只需查看 HTML 代码就能理解其功能。
伟大的 Fetch()ening
最重要的内部变化是 htmx 最终放弃了 XMLHttpRequest，转而使用原生的 fetch() API。虽然这看似只是一个不起眼的底层细节，但实际上却意义重大。使用 fetch 使库更加精简，并为高级流式 HTML处理打开了大门。然而，这也意味着 XHR 特有的事件不再存在，你会注意到请求超时时间现在默认为 60 秒，而不是无限期地等待。
打破继承的习惯
从版本 2 升级到版本 4 时，最大的障碍之一是如何将属性传递给子元素。过去，属性继承是隐式的——如果你在一个 div 元素上放置一个确认对话框，那么它内部的每个按钮都会继承这个对话框。现在，你必须通过在属性前添加 ` :inherited` 修饰符来显式地指定继承关系。例如，使用`hx-confirm:inherited`会告诉 htmx，这种行为应该向下传递到 DOM 树的各个层级。这消除了那种令人烦恼的“远程操作”感，并大大简化了 UI 调试过程。
更智能的互换和多目标
内容替换是 htmx 的真正亮点所在，而版本 4 引入了变形替换（innerMorph 和 outerMorph）。变形替换并非简单地移除页面的一部分并插入新的 HTML，而是使用 idiomorph 算法来合并更改。这对于保持输入焦点或在更新其他内容的同时保持视频播放至关重要。此外，新的<hx-partial> 标签允许单个服务器响应更新页面的多个不同部分，从而提供比旧式带外 (OOB) 替换更大的控制权。
错误处理和历史记录
在之前的版本中，htmx 通常会忽略 400 或 500 错误响应。现在不会了。htmx 4默认会交换错误响应，这对于显示服务器端验证错误非常有用。为了实现这一点，您可以使用`hx-status` 属性将特定代码（例如 422）路由到专门的错误 div。关于历史记录，该库已停止在 localStorage 中保存 DOM 快照。现在，当用户点击后退按钮时，htmx 会直接从服务器重新获取页面，从而确保页面状态始终保持最新，而不是之前会话的残留状态。
事件、扩展和脚本
事件系统已完全清理，遵循htmx:phase:action模式。这种一致性使得接入请求生命周期变得更加容易。在扩展方面，我们现在对SSE（服务器发送事件）、WebSocket 和 multipart/mixed 响应提供了一流的支持，使构建实时仪表板变得轻而易举。对于需要一些客户端响应的用户，hx-live提供了一个基于 DOM 的脚本解决方案，其风格类似于 Alpine.js 和 jQuery 的结合体，允许您使用简单的q() 选择器来操作元素。
安装和升级路径
如果您正在启动一个新项目，只需通过 CDN 或 NPM 获取最新版本 4 即可。对于现有应用，团队提供了一个命令行升级工具（通过 npx），该工具会扫描您的模板，查找已弃用的属性和旧的事件名称。如果您尚未准备好进行全面升级，htmx-2-compat 扩展可以暂时恢复旧的行为。值得注意的是，版本 2 仍然受支持，并且在 2027 年初之前，NPM 上的“最新”标签将保持不变，以防止意外破坏数百万使用非版本化 CDN 链接的网站。
安全和最佳实践
由于 htmx 允许您直接注入 HTML，因此为了防止 XSS 攻击，转义用户内容是必不可少的。hx -ignore 属性在这里非常有用；它指示 htmx 完全跳过处理特定容器内的任何属性，这对于安全地渲染原始用户生成内容非常理想。对于高安全性环境，hx-csp 扩展通过管理 nonce 值和限制请求的发送位置，有助于与严格的内容安全策略 (CSP)集成。
htmx 的此次演进使其从一个巧妙的实用工具转变为构建长期 Web 服务的强大基础。通过整合 fetch API、明确属性继承方式以及引入复杂的变形和局部更新功能，它消除了服务器和浏览器之间的摩擦。无论您是构建简单的 CRUD 应用还是复杂的实时界面，简化的事件系统和强大的流式扩展相结合，都能让您在 HTML 的舒适环境中轻松创建动态体验。
