3分钟了解 HTMX

HTMX 是一个主打增强 HTML 功能的前端框架，通过给 HTML 添加自定义的属性，让任何元素都可以发送 Ajax 请求，实现 CSS 过渡、Web Socket 和服务端事件响应等常见的 Web 端功能，而不需要我们编写额外的 JS 代码。

这个设计哲学就符合了 HTML 的 Hypertext 特性，也就是使用纯文本的方式来编写网页内容。

htmx 的包体积很小，只有 14k，但用它可以实现常见的前端应用：例如网站、单页应用、实时应用等等。

要使用 htmx，只需要引入它的库即可：

<script src="https://unpkg.com/htmx.org@1.9.10"></script>

发送 HTTP 请求

要发送 HTTP 请求，可以给触发的元素添加 hx-get、hx-post 等属性，分别发送 GET、POST 请求，HTMX 默认会在鼠标点击的时候触发：

<button
  hx-get="https://jsonplaceholder.typicode.com/todos"
  >
  加载 Todos
</button>

之后通过 hx-target 指定要替换的页面元素，一般通过 id 来查找：

<button
  hx-get="https://jsonplaceholder.typicode.com/todos"
  hx-target="#todo-list"
>

更新页面

之后我们可以定义一个要显示请求数据的 HTML 元素，并指定 ID 属性：

<div id="todo-list"></div>

这样服务端返回的数据就会放到这里边。htmx 建议后端直接返回 HTML 内容，这样可以拿来就用。

htmx 默认会把数据放到元素内部，我们可以通过 hx-swap 来指定其它的替换方式，默认是innerHTML：

<button
  hx-get="https://jsonplaceholder.typicode.com/todos"
  hx-target="#todo-list"
  hx-swap="innerHTML"
>

也可以指定其他值：

outerHTML：替换整个元素。

afterBegin: 在元素内部开头插入

beforeBegin：在元素外部上方插入

beforeEnd：在元素内部结尾插入

afterend：在元素外部下方插入

delete： 删除元素

none：不添加内容

加载状态

要显示加载状态，可以给元素设置 htmx-indicator class，htmx 会自动控制它的显示与隐藏：

<button
  hx-get="https://jsonplaceholder.typicode.com/todos"
  hx-target="#todo-list"
  hx-swap="innerHTML"
  >
  加载 Todos <span class="htmx-indicator">...</span>
</button>

自定义事件触发

如果要修改htmx默认的鼠标点击触发事件，可以配置 hx-trigger，例如在鼠标移上去时触发事件

<button
  hx-get="https://jsonplaceholder.typicode.com/todos"
  hx-target="#todo-list"
  hx-swap="innerHTML"
  hx-trigger="mouseenter"
>
  加载 Todos <span class="htmx-indicator">...</span>
</button>

事件 Modifiers

htmx 也支持给事件添加修饰符，配置延迟，或者事件是不是之触发一次：

<button
  hx-get="https://jsonplaceholder.typicode.com/todos"
  hx-target="#todo-list"
  hx-swap="innerHTML"
  hx-trigger="mouseenter delay:1s once"
>
  加载 Todos <span class="htmx-indicator">...</span>
</button>

使用 Extensions（handlebars）

htmx 支持 Extensions 扩展来实现更多功能，如果后端返回 JSON 格式数据，可以利用 client-side-templates 插件，配合 handlebars 模板引擎来渲染：

<script src="https://unpkg.com/htmx.org/dist/ext/client-side-templates.js"></script>
<script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js"></script>

通过 script 引入相关的库后，在需要使用插件的元素外层元素中：

• 添加 hx-ext 属性，值为插件名。
• 然后配置 handlebars-array-template 值为自定义的模板 id，这个用于处理服务端返回数组 JSON 数据，如果是单个对象，可以把属性名中的 array去掉。
• 之后使用 template 定义模板，id指定为 handlebars-array-template 中配置的，之后在里边编写模板即可。
• 最后 id 为 todo-list 的 div 会用模板中的格式进行展示。

<div hx-ext="client-side-templates">
  <button
    hx-get="https://jsonplaceholder.typicode.com/todos"
    hx-target="#todo-list"
    hx-swap="innerHTML"
    handlebars-array-template="todo-list-template"
    hx-trigger="mouseenter delay:1s once"
  >
    加载 Todos <span class="htmx-indicator">...</span>
  </button>
  <div id="todo-list"></div>
  <template id="todo-list-template">
    <ul>
      {{#each this}}
      <li>{{title}}</li>
      {{/each}}
    </ul>
  </template>
</div>

演示

看一下最终演示代码，从 jsonplaceholder 获取 todos 列表后，获取 json 数据，然后通过 handlebars 渲染所有的 todo title 也就是标题属性的内容。

小结

好了，这个就是 htmx 的介绍，你学会了吗？如果有帮助请三连并关注，想学更多的开发知识，可以在评论区留言，感谢观看！