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.7/dist/htmx.min.js@2.0.7" integrity="sha384-ZBXiYtYQ6hJ2Y0ZNoYuI+Nq5MqWBr+chMrS/RkXpNzQCApHEhOt2aY8EJgqwHLkJ" 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-ext.js

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

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

npm install idiomorph

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

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

通过 npm 安装 htmx.org 和 idiomorph
将两个包导入到您的 index.js

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

使用

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

morph 和 morph:outerHTML 将变形目标元素及其子元素
morph:innerHTML 将仅变形元素的内部子元素，保持目标元素不变

<body hx-ext="morph">
  <button hx-get="/example" hx-swap="morph">
    Morph My Outer HTML
  </button>

  <button hx-get="/example" hx-swap="morph:outerHTML">
    Morph My Outer HTML
  </button>

  <button hx-get="/example" hx-swap="morph:innerHTML">
    Morph My Inner HTML
  </button>
</body>