创建 htmx 扩展

要定义扩展，请调用 htmx.defineExtension（）函数。

创建 HTMX 扩展的基本结构：

htmx.defineExtension("my-extension", {
  onEvent: function (name, evt) {
    // 监听事件（可选）
  },
  transformRequest: function (xhr, config, elt) {
    // 修改请求（可选）
  },
  handleSwap: function (swapStyle, target, fragment, settleInfo) {
    // 自定义响应插入逻辑（可选）
  },
  isInlineSwap: function (swapStyle) {
    // 用于扩展 swap 行为（可选）
  },
  encodeParameters: function (xhr, parameters, elt) {
    // 自定义参数编码方式（可选）
  }
});

通常，这是在独立的 javascript 文件中完成的，而不是在内联脚本标记中完成的。

扩展的名称应以破折号分隔，并且相当简短且具有描述性。

扩展可以覆盖以下默认扩展点以添加或更改功能：

{
    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;}
}

一个简单的扩展示例：添加默认请求头

htmx.defineExtension("default-headers", {
  transformRequest: function (xhr, config, elt) {
    xhr.setRequestHeader("X-Custom-Header", "HelloFromExtension");
  }
});

配合 HTML 使用：

<body hx-ext="default-headers">
  <button hx-get="/some-endpoint" hx-target="#result">点我</button>
  <div id="result"></div>
</body>