方法 - htmx.defineExtension()

htmx.defineExtension 是 HTMX 提供的一个注册自定义扩展的 API，允许你扩展 HTMX 的行为，例如在请求发出前修改参数、拦截响应、添加新属性支持等。

这是实现自定义行为的核心工具，适用于你想封装自己的逻辑，并通过 hx-ext="your-ext" 在页面中启用。

参数

• name - 扩展名
• ext - 扩展定义

基本语法

  // defines a silly extension that just logs the name of all events triggered
  htmx.defineExtension("silly", {
    onEvent : function(name, evt) {
      console.log("Event " + name + " was triggered!")
    }
  });

示例：添加请求时间戳参数

下面我们写一个扩展，每次请求自动加一个 ts=时间戳 参数：

htmx.defineExtension("add-timestamp", {
  onEvent: function (name, evt) {
    // 可以监听事件（可选）
  },
  encodeParameters: function(xhr, parameters, elt) {
    parameters.ts = Date.now(); // 添加时间戳
    return parameters;
  }
});

然后在 HTML 中启用它：

<div hx-get="/api/data" hx-target="#result" hx-ext="add-timestamp">
  加载数据
</div>
<div id="result"></div>

浏览器发出的请求就会全部变成以下格式：

/api/data?ts=1720000000000