HTMX简介：无需借助JavaScript的动态HTML

2023-10-07 html

译者 | 布加迪
审校 | 重楼
html让您可以使用扩展的HTML语法而不是JAVAScript来实现交互性。HTMX直接在标记中为您提供了HTTP交互，它支持其他许多交互要求，无需借助JavaScript 。这个有意思的想法最终可能会影响Web前端的工作方式。不妨看看如何使用HTMX以及什么让它如此引人注目。

文章插图
HTMX简介HTMX已经存在了一段时间，但它一直是比较低调的项目。它最近被Github Accelerator接受可能会改变这一切。其基本想法是拿来需要模板JavaScript和HTML交互的常见用例，径直使用HTML语法，无需借助JavaScript 。许多交互使用HTMX变成了声明式交互。
这听起来大有希望，是不是?每个Web开发人员都知道有许多常见的样板案例。HTMX的开发者Carson Gross表示，他希望“完成HTML作为一种超文本，增强它的表现力，使它成为更高级的现代Web应用程序之外的一种颇有竞争力的选择。”
要快速体验一下，请看这个HTMX演示。大致来说，我们点击一个按钮来编辑用户对象上的字段。数据实际上被PUT(放入)到后端端点。您可以在图1中看到演示，请注意点击Show后底部框中的网络交互。

文章插图
图1. 表单演示：HTMX
通常，这一切都需要某种JavaScript ，无论您使用什么框架。HTMX将交互转变为两个标记块：一个用于显示UI，另一个用于编辑UI，如代码片段1所示。
代码片段1：HTMX中的用户更新

<div hx-target="this" hx-swap="outerHTML"><div><label>First Name</label>: Joe</div><div><label>Last Name</label>: Blow</div><div><label>EmAIl</label>: joe@blow.com</div><button hx-get="/contact/1/edit" class="btn btn-primary">Click To Edit</button></div><!-- The edit: --><form hx-put="/contact/1" hx-target="this" hx-swap="outerHTML"><div><label>First Name</label><input type="text" name="firstName" value=https://www.isolves.com/it/cxkf/yy/html5/2023-10-07/"Joe">

Last Name

Email Address

如果您查看代码片段1中的标记，就很容易看出具体发生了什么：hx-swap属性在编辑之前为div提供了HTML ，而outerHTML告诉框架它如何与其中的动态内容相关联。可编辑版本作为含有x-put属性的表单元素出现，该属性标识PUT HTML方法以及要使用的端点。
问题变成了如何在不借助任何JavaScript的情况下实现这种“交换”和随后的PUT?答案很简单：它为编辑标记使用HTML的服务器端呈现，并将表单编组抽象到框架中。JavaScript仍然在幕后工作。实际上，我们得到了一种粒度更细的HTML语法，它可以只加载页面部分而不是整个页面，并可以提交Ajax请求。
这是实际DRY原理的一个有趣的例子。即使是像React这样的技术，也有一定数量的样板代码将信息从一种形式转换为另一种形式。当然，HTMX没有完全消除这种情况，但它已经将工作转移到服务器上。
服务器端HTMX现在不妨考虑服务器端。许多服务器端技术都使用了HTMX ，因为正如Gross所说，HTMX“与后端无关” 。它不在乎您使用什么后端，只要它生成HTML就行。”为了大致了解它是如何工作的，不妨看一个使用Express的TODO示例以及Pug HTML模板引擎。这个示例是经典TODO应用程序的实现。
首先，使用以下命令从Express输出现有的待办事项：
res.render('index', { todos: filteredTodos, filter, itemsLeft: getItemsLeft() });该命令使用内存中的待办事项集合，并使用典型格式的Pug模板来呈现它们，只不过它含有驱动HTMX交互的特殊hx-属性。比如说，代码片段2显示了POST新待办事项的表单。
代码片段2. 拥有HTMX属性的表单POST

form(hx-post="/todos", hx-target="#todo-list", hx-swap="afterbegin", _="on htmx:afterOnLoad set #txtTodo.value to ''")input#txtTodo.new-todo(name="todo",placeholder='What needs to be done?', autofocus='')

您可以在这里(https://htmx.org/docs/#swApping)看到afterbegin属性如何将新内容放在列表中它所属的位置的。on htmx脚本是Hyperscript的一个例子， Hyperscript是一种简化的脚本语言。它经常与HTMX结合使用，但严格来说并不是HTMX的一部分，也不是需要它才能使用HTMX 。实际上，这里使用on htmx来处理在创建新待办事项之后设置输入表单的值。