HTMX - 扩展

HTMX 扩展用于操纵此库的行为，您可以在 JavaScript 中定义扩展并通过 hx-ext 属性使用该扩展。

如何使用扩展?

在 HTMX 中使用扩展非常简单，因为您需要遵循两个步骤。

• 步骤 1:您需要在 head 元素中添加扩展，这会将其添加到 htmx 扩展注册表中。
• 步骤 2:现在您必须在元素上使用 hx-ext 属性才能使用它。

HTMX 扩展示例

在此示例中，我们将向您展示如何通过 hx-ext 使用预定义的扩展属性。

<script src="/tutorialspoint/htmx/debug.js" defer></script>

<div hx-ext="debug">
    <button hx-post="/content">Will Debug Code</button>
</div>

HTMX 忽略扩展

如果您在任何元素上使用了 hx-ext 属性，那么它将与该元素内的所有子元素一起应用于 DOM 节点。有一种方法可以忽略扩展 htmx，假设您不想在某些特定子元素上应用您定义的扩展，那么您必须使用 ignore: 关键字来阻止它被使用。

<script src="/tutorialspoint/htmx/debug.js" defer></script>

<div hx-ext="debug">
    <button hx-post="/content">Will Debug Code</button>
    <button hx-post="/content" hx-ext="ignore:debug">Will Not Debug</button>
</div>

如何定义扩展?

要定义扩展，您需要使用 htmx.defineExtension() 函数，并且应始终在单独的文件中创建扩展。请勿尝试在内联 <script> 标记中定义扩展。

<script>
    (function(){
        htmx.defineExtension('my-ext', {
            onEvent : function(name, evt) {
                console.log("Fired event: " + name, evt);
            }
        })
    })()
</script>

定义扩展的规则

如您在上面的代码中看到的，我们已经定义了一个扩展，只需付出最少的努力和代码。因此，当您定义扩展时，您需要维护一些东西。

• 扩展命名:扩展的名称应以破折号分隔，并且应简短易懂。
• 覆盖默认扩展:扩展可以覆盖默认扩展点以添加或更改功能。

扩展覆盖默认扩展点

{
  init: function(api) { return null },
  getSelectors: function() { return null },
  onEvent: function(name, evt) { return true },
  transformResponse: function(text, xhr, elt) { return text },
  isInlineSwap: function(swapStyle) { return false },
  handleSwap: function(swapStyle, target, fragment, settleInfo) { return false },
  encodeParameters: function(xhr, parameters, elt) { return null }
}