大家好，我是Kason。近年来前端领域涌现出很多新兴的前端框架，比如Qwik、Svelte、Astro等，这些框架大多面向前端工程师。那么，对于后端工程师作为受众的前端框架到底是什么，它和前者有什么区别呢？欢迎加入人类优质前端框架群。道飞介绍htmxhtmx是最近Django技术栈中比较流行的前端框架。他的想法是——让网页回归HTML的本质，不再受JS的束缚。是不是很web1.0风格？他是怎么做到的呢？答案是：通过大量预制的自定义HTML属性。将htmx.org.js导入页面后，您可以在HTML中编写以hx-开头的自定义属性。例如下面的代码：点我请求数据点击按钮（hx-trigger指定的点击事件）后，数据接口（hx-post规范）发起post请求。如何显示请求返回的数据？让我们再添加2个自定义属性：Clickmetorequestdatahx-target指的是返回的HTML结构将被注入的位置。这将被注入到具有idparent-div的DOM中。hx-swap指的是返回的HTML结构将被注入的形式。这将直接替换id为parent-div的DOM。如果hx-swap="innerHTML"，delegate将以id为parent-div的DOM的innerHTML形式注入。如果要表达复杂的逻辑，需要组合很多自定义属性和属性值，比如下面的代码：当输入触发keyup事件，值发生变化时，延时500ms向trigger_delay接口发起请求，返回HTML结构被注入到id为search-resultsmiddle的DOM中。与其说htmx是一个前端框架，不如说它应该是一个HTML自定义属性工具库更合适。他将很多常见的JS交互逻辑汇聚到自定义的HTML属性中，从而减少JS代码量。现代前端框架通常是状态驱动的UI，而htmx的概念是进程驱动的UI（类似于jQuery时代的页面编写方式）。如果要引入state，需要以插件的形式引入alpine-morph。对比：React：基于JSXVue：基于模板语法alpine是一个基于HTML的前端框架。这意味着使用alpine需要直接在HTML中编写状态作为自定义属性（类似于Vuev1）。因此，他可以很好的融入到htmx系统中。比如下面这段代码就是一段html结合了htmx和alpine。htmx属性以hx-开头，alphine属性以x-开头：
