跳到主要内容位置

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 的介绍,你学会了吗?如果有帮助请三连并关注,想学更多的开发知识,可以在评论区留言,感谢观看!

提示

一系列的课程让你成为高级前端工程师。课程覆盖工作中所有常用的知识点和背后的使用逻辑,示例全部都为工作项目简化而来,学完即可直接上手开发!

即使你已经是高级前端工程师,在课程里也可能会发现新的知识点和技巧,让你的工作更加轻松!

《React 完全指南》课程,包含 React、React Router 和 Redux 详细介绍,所有示例改编自真实工作代码。点击查看详情。

《Vue 3.x 全家桶完全指南与实战》课程,包括 Vue 3.x、TypeScript、Vue Router 4.x、Vuex 4.x 所有初级到高级的语法特性详解,让你完全胜任 Vue 前端开发的工作。点击查看详情。

《React即时通信UI实战》课程,利用 Storybook、Styled-components、React-Spring 打造属于自己的组件库。

《JavaScript 基础语法详解》本人所著图书,包含 JavaScript 全面的语法知识和新特性, 可在京东、当当、淘宝等各大电商购买