HTMX 4.0 发布:革新 Web 开发,性能与体验双提升!
更简单的 Web 开发HTMX 长期以来被认为功能已趋于完备是成功达成宏伟目标且广受赞誉、在生产环境广泛部署的项目。HTMX 2.0 曾被视为最终版本其创造者承诺不会有 HTMX 3.0。但 HTMX 团队摒弃旧引擎采用基于 JavaScript 的 Fetch API 的新引擎将新版本命名为 HTMX 4.0。当被问及跳过 3.0 版本的原因创造者 Carson Gross 只说了一个词“哎呀”。Gross 不仅创建了 HTMX还打造了 “Grug Brained Developer”为年轻开发者提供建议。HTMX 借助 HTML 和 REST 让 Web 开发回归简单。HTMX 4.0 移除旧的传输协议 XHR 对象代之以 Fetch API带来性能和开发体验的显著提升fetch() 方法支持流式响应与 React Server Components 工作方式类似。软件开发中人们热衷新技巧但有时会极端HTMX 践行审视需求、找简单方案的理念虽 HTMX 2.0 能满足需求但 HTMX 4.0 有更好实现方式。原生流式处理HTMX 2.x 使用源于 20 世纪 90 年代末 Internet Explorer 的 XMLHttpRequest 对象浏览器需缓冲整个响应后替换。HTMX 4.0 通过 Fetch API 采用 ReadableStream能在 HTML 片段到达时处理和注入实现流式 UI 效果只需 14KB 小脚本还可与能输出字符串的后端配合使用 Fetch 提升性能、减少代码量、简化架构。Idiomorph DOM 合并原生流式处理是 HTMX 4.0 基础新特性4.0 重构还带来“变形”或“差异比较” HTML 页面功能能超快速更改页面且不增加复杂性在 Hotwired 中较知名。其算法会比较页面与现有内容仅替换有变化部分。HTMX 4.0 默认启用 Idiomorph 算法由 Carson 领导在 HTMX 2.0 中是扩展4.0 中成标配。Idiomorph 受 Hotwired 的 Morphdom 启发被 Hotwired 采用GitHub 页面有其算法详细技术描述它是 Fetch 带来代码库简洁性的好处。属性继承一项重大变更HTMX 4.0 对属性继承有重大变更非 Fetch 升级必需基于实际使用经验。团队认为默认不继承 HTMX 属性更安全、开发体验更好。之前版本中 hx - target 等属性隐式继承导致子元素受不明影响4.0 中继承变为显式可用 :inherited 修饰符指定子元素继承属性遵循行为局部性原则。历史记录优化不再HTMX 2.x 有复杂历史记录引擎试图对本地 DOM 快照保存到 localStorage但效果不佳。HTMX 4.0 放弃此做法回归页面重新加载的标准行为。错误处理和状态特定替换多数 InfoWorld 读者很少遇 500 或 404 错误服务器返回错误代码时HTMX 4.0 直接替换内容避免静默失败能为用户提供视觉反馈。更新亮点是新的状态特定替换语法可在 HTML 中为不同 HTTP 代码定义行为将不同服务器错误路由到不同 UI 元素。htmx - swap 标签htmx - swap 标签添加是重大结构改进可包装响应片段针对特定元素是旧“带外”替换方式更简洁易读的替代方案类似 Hotwired 的 Turbo Streams体现 HTMX 和 Hotwired 相互影响能基于单个服务器响应实现复杂多点界面更新。原生视图过渡HTMX 4.0 默认集成浏览器的原生 View Transitions API无需额外 CSS 或 JavaScript就能实现页面状态动画过渡如淡入淡出或滑动效果。即便不熟悉 HTMX也值得了解其目标它与 Hotwired 等工具展示利用标准特性发挥效能的可能理解 HTMX 后看待 Web 开发领域方式会不同还能避免 JavaScript 复杂性。
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2521348.html
如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!