intercooler.js 到 htmx 迁移指南

本指南的目的是：

• 映射 Intercooler 中可用的等效 htmx 属性、头信息、事件、方法等
• 提供变通方案 在 htmx 核心中没有直接等效功能的情况下实现相同/类似的结果（通常通过 htmx 扩展或 hyperscript）
• 突出显示 目前无法通过核心 htmx、任何现有扩展或 hyperscript 优雅解决的差距

开始之前

值得注意 Intercooler 的目标方法与 htmx 的做法之间的区别。

Intercooler 试图为其大部分功能提供自定义 HTML 属性。这体现在其较长的属性列表中，其中许多可以描述为便利性或客户端焦点性质。

htmx 遵循保持核心小巧的方法，提供较少的可用属性，主要集中在内容加载和交换上。

这种能力主要通过两种方式增强：

1. 扩展。htmx 扩展框架允许通过自定义扩展/插件实现特定功能。例如 Intercooler 中内置的依赖机制，在 htmx 核心中不存在，但可以通过 扩展 获得。还有其他扩展可以实现 Intercooler 无法原生支持的新行为，例如 preload 扩展

2. 使用 htmx 事件系统与原生 JavaScript、alpine.js 或 hyperscript。Hyperscript 是一种小型、开放的脚本语言，设计用于嵌入 HTML 中，灵感来自 HyperTalk，是 htmx 的配套项目。

htmx 还包含 Intercooler 中不存在的功能。这超出了本指南的范围。

最后，值得注意的是，这仍然是一个进行中的工作，可能会随时间变化。

迁移信息

本指南的其余部分以一系列表格形式呈现，每个表格尝试将 Intercooler 的以下常见功能区域映射到 htmx 的等效功能：

• 属性
• 请求参数
• 请求头
• 响应头
• 事件
• JavaScript API 方法
• 元标签

属性

注意：对于某些 Intercooler 属性（主要是客户端特定的属性，例如 ic-action 和相关属性），没有直接的 htmx 等效功能。相反，有一个称为 hyperscript 的小型表达性语言可用（参见 http://hyperscript.org），设计用于嵌入 HTML 中，并作为 htmx 的无缝伴侣。它允许您实现与一些特别是客户端焦点的 Intercooler 属性相同的行为，但以更灵活和开放的方式。

有关实际示例，请参见 htmx 关于 hyperscript 的文档，以及更多关于 hyperscipt 背后的哲学。

请求参数

请求头

响应头

事件

注意：所有 htmx 事件 都以驼峰式和短横线式触发。

JavaScript API 方法

元标签