htmx Idiomorph 扩展

Idiomorph 是由 htmx 创建者开发的 DOM 变形算法。DOM 变形是一个过程，其中现有的 DOM 树被"变形"为另一个树的形状，尽可能多地重用现有 DOM 的节点。通过在改变树状态时保留节点，您可以在两种状态之间呈现更平滑的过渡。

您可以通过包含 idiomorph 扩展，将 idiomorph 变形算法用作交换策略。

安装

安装 idiomorph 最快的方法是通过 CDN 加载它。请记住始终在扩展之前包含核心 htmx 库并启用扩展。

<head>
    <script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.6/dist/htmx.min.js@2.0.6" integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/idiomorph@0.7.3" integrity="sha384-JcorokHTL/m+D6ZHe2+yFVQopVwZ+91GxAPDyEZ6/A/OEPGEx1+MeNSe2OGvoRS9" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/idiomorph@0.7.3/dist/idiomorph-ext.min.js" integrity="sha384-szktAZju9fwY15dZ6D2FKFN4eZoltuXiHStNDJWK9+FARrxJtquql828JzikODob" crossorigin="anonymous"></script>
</head>
<body hx-ext="morph">

未压缩版本也可在以下地址获取：
https://unpkg.com/idiomorph/dist/idiomorph.js
https://unpkg.com/idiomorph/dist/idiomorph-ext.js

虽然 CDN 方法简单，但您可能要考虑在生产环境中不使用 CDN。安装 idiomorph 的次简单方法是直接将其复制到您的项目中。从 https://unpkg.com/idiomorph 和 https://unpkg.com/idiomorph/dist/idiomorph-ext.min.js 下载 idiomorph 及其 htmx 扩展，将它们添加到项目中的适当目录，并在需要时通过 <script> 标签包含它们。

对于 npm 风格的构建系统，您可以通过 npm 安装 idiomorph：

npm install idiomorph

安装后，您需要使用适当的工具来打包 node_modules/idiomorph/dist/idiomorph.js（或 .min.js）和 node_modules/idiomorph/dist/idiomorph-ext.js。例如，您可以将扩展与来自 node_modules/htmx.org/dist/htmx.js 的 htmx 核心和项目特定代码一起打包。

如果您使用打包工具管理 JavaScript（例如 Webpack、Rollup）：

import `htmx.org`;
import `idiomorph`;

使用

引用 idiomorph 扩展后，您可以在 body 上以 morph 名称注册它，然后开始使用 morph、morph:outerHTML 或 morph:innerHTML 作为交换策略。

<body hx-ext="morph">

    <button hx-get="/example" hx-swap="morph">
        变形我的外部HTML
    </button>

    <button hx-get="/example" hx-swap="morph:outerHTML">
        变形我的外部HTML
    </button>
    
    <button hx-get="/example" hx-swap="morph:innerHTML">
        变形我的内部HTML
    </button>

</body>