htmx Idiomorph 扩展

Idiomorph 是由 htmx 创建者创建的 DOM 变形算法。DOM 变形是一个过程，其中现有 DOM 树 “morphed” 为另一个形状，以尽可能多地重复使用现有 DOM 的节点。通过在从一棵树切换到另一棵树时保留节点，你可以在两种状态之间渲染更平滑的过渡。

¥Idiomorph is a DOM morphing algorithm created by the htmx creator. DOM morphing is a process where an existing DOM tree is “morphed” into the shape of another in a way that resuses as much of the existing DOM’s nodes as possible. By preserving nodes when changing from one tree to another you can present a much smoother transition between the two states.

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

¥You can use the idiomorph morphing algorithm as a swapping strategy by including the idiomorph extension.

安装

¥Installing

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

¥The fastest way to install idiomorph is to load it via a CDN. Remember to always include the core htmx library before the extension and enable the extension.

<head>
    <script src="https://unpkg.com/htmx.org@2.0.4" integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/idiomorph@0.3.0" integrity="sha384-tg/2Ca9U/RohyxmGCb8qJVR3j9cswtKbdRSXOaPX/aDDOW1bfbeyV+7G9ifYF4bC" crossorigin="anonymous"></script>
</head>
<body hx-ext="morph">

https://unpkg.com/idiomorph/dist/idiomorph.js 上还有一个未缩小的版本。

¥An unminified version is also available at https://unpkg.com/idiomorph/dist/idiomorph.js.

虽然 CDN 方法很简单，但你可能需要考虑 在生产中不使用 CDN。安装 idiomorph 的下一个最简单的方法是将其复制到你的项目中。从 https://unpkg.com/idiomorph 下载扩展，将其添加到项目中的相应目录中，并在必要时使用 <script> 标签将其包含在内。

¥While the CDN approach is simple, you may want to consider not using CDNs in production. The next easiest way to install idiomorph is to simply copy it into your project. Download the extension from https://unpkg.com/idiomorph, add it to the appropriate directory in your project and include it where necessary with a <script> tag.

对于 npm 样式的构建系统，你可以通过 npm 安装 idiomorph：

¥For npm-style build systems, you can install idiomorph via npm:

npm install idiomorph

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

¥After installing, you’ll need to use appropriate tooling to bundle node_modules/idiomorph/dist/idiomorph.js (or .min.js). For example, you might bundle the extension with htmx core from node_modules/htmx.org/dist/htmx.js and project-specific code.

如果你使用打包器来管理你的 javascript（例如 Webpack、Rollup）：

¥If you are using a bundler to manage your javascript (e.g. Webpack, Rollup):

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

使用

¥Usage

一旦你引用了 idiomorph 扩展，你就可以在主体上使用名称 morph 注册它，然后使用 morph、morph:outerHTML 或 morph:innerHTML 作为交换策略。

¥Once you have referenced the idiomorph extension, you can register it with the name morph on the body and then being using morph, morph:outerHTML or morph:innerHTML as swap strategies.

<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>