HTMX - 脚本

HTMX 主要关注超媒体的 Web 应用方法，但也支持客户端脚本。本文将解释如何在遵循 HATEOAS（超媒体作为应用程序状态引擎）原则的同时将脚本与 HTMX 集成。

超媒体友好型脚本

在向 HTMX 应用程序添加脚本时，请遵循以下简单指南

尊重 HATEOAS：允许服务器通过其发送的 HTML 来管理应用程序状态和操作，而不是在脚本中硬编码它们。
事件驱动通信：使用 HTMX 事件在组件之间进行通信，这可以保持组件之间的松散耦合，并使代码更模块化。
通过孤岛隔离：当需要非超媒体组件时，将它们视为应用程序中的孤岛。这可以防止它们影响整体超媒体结构。
内联脚本：根据需要使用内联脚本。这可以将 HTML 和 JavaScript 保持在一起，从而更易于管理组件行为。

与 HTMX 事件集成

将脚本与 HTMX 集成的关键是使用 HTMX 发出的事件。这是一个使用原生 JavaScript 响应 HTMX 事件的示例。

<div id="content" hx-get="/api/data" hx-trigger="load">
    <!-- Content will be loaded here -->
</div>

<script>
    document.body.addEventListener('htmx:afterOnLoad', function(event) {
        if (event.detail.elt.id === 'content') {
            console.log('Content loaded successfully!');
            // Perform any additional actions here
        }
    });
</script>

此脚本等待html:afterOnLoad 事件，并在内容加载后执行操作。

推荐的脚本解决方案

HTMX 与许多脚本方法都能很好地配合使用，但以下是一些特别适合的方法。

原生 JavaScript：使用纯 JavaScript 处理事件和操作 DOM 是一种轻量级且越来越流行的选择。它非常适合简单的交互，并充分利用了现代浏览器 API。

document.querySelector('#myButton').addEventListener('click', function() {
    // Handle the click event
});

Alpine.js：这个轻量级框架提供了构建高级前端脚本的有用工具，包括对响应式编程的支持。它支持内联脚本，使其非常适合 HTMX 的方法。

<div x-data="{ open: false }">
    <button @click="open = true">Open Dialog</button>
    <div x-show="open">Dialog content here</div>
</div>

jQuery：虽然jQuery是一个较旧的库，但它与 HTMX 配合良好，尤其是在已经使用它的项目中。它简化了 DOM 操作和事件处理等任务。

$('#myButton').on('click', function() {
    // Handle the click event using jQuery
});

Hyperscript：这是 HTMX 团队开发的一种实验性脚本语言。它可以轻松嵌入 HTML，并且与 HTMX 的事件驱动方法配合良好。

<button _="on click toggle .active on me">Toggle Active</button>

HTMX 脚本中的 HATEOAS

在 HTMX 脚本中使用HATEOAS（超媒体作为应用程序状态引擎）意味着即使使用客户端脚本，也要保持应用程序状态和导航由服务器控制。这样，脚本就会添加到服务器的超媒体结构中，而不是替换它。

HTMX 脚本中 HATEOAS 的关键原则

这些原则有助于 HTMX 脚本支持服务器驱动的方法，从而更好地控制和更流畅的用户体验。

脚本应与服务器的控件一起工作。
将客户端状态管理保持在最低限度，依赖服务器作为主要来源。
脚本应改进用户交互，而不会更改超媒体结构。

实施策略

本节提供将脚本与 HTMX 集成以提高功能性的方法，同时保持服务器控制。

使用 HTMX 事件编写脚本行为：HTMX 在其生命周期中会生成不同的事件。脚本可以侦听这些事件以添加功能，而不会中断超媒体流。

document.body.addEventListener('htmx:afterSwap', function(evt) {
  if (evt.detail.target.id === 'task-list') {
    console.log('Task list updated');
    // Perform any additional actions here
  }
});

增强服务器提供的控件：脚本可以在保持其原始目的的同时，向超媒体控件添加功能。

document.body.addEventListener('htmx:confirm', function(evt) {
  if (evt.detail.target.getAttribute('hx-delete')) {
    const dialogResult = confirm("Are you sure you want to delete this item?");
    evt.detail.shouldStop = !dialogResult;
  }
});

使用脚本进行客户端验证：虽然主要的验证应在服务器端进行，但脚本可以提供快速反馈以改善用户体验。

document.querySelector('#task-form').addEventListener('htmx:validation:validate', function(evt) {
  const taskInput = evt.detail.elt.querySelector('#task-input');
  if (taskInput.value.trim() === '') {
    evt.detail.valid = false;
    evt.detail.errors = ['Task description cannot be empty'];
  }
});

根据服务器响应动态更新 UI：脚本可以响应来自服务器的数据，以更新 HTMX 不直接管理的 UI 部分。

document.body.addEventListener('htmx:afterOnLoad', function(evt) {
  if (evt.detail.xhr.status === 200) {
    const taskCount = JSON.parse(evt.detail.xhr.response).taskCount;
    document.querySelector('#task-counter').textContent = taskCount;
  }
});

HTMX 脚本通过让服务器管理应用程序流程并使客户端代码更简单，从而帮助保持HATEOAS方法的优势。这在保持超媒体结构的同时，改进了维护、可扩展性和用户体验。

Web 开发中的孤岛

孤岛是 Web 开发中的一种现代方法，它允许在服务器渲染的页面中使用小型交互式功能。此方法使这些功能与主应用程序分离，从而更易于管理和添加复杂功能，而不会影响整个页面。

通过使用事件，这些交互式元素可以与更大的超媒体驱动应用程序连接。这样，您可以在保持整体结构井然有序且简单的情况下改善用户体验。

HTMX 脚本最佳实践

通过使用 DOM 和服务器发送的 HTML 来最小化全局状态，而不是使用复杂的客户端解决方案。
使用 HTMX 的自定义事件来创建组件之间简单的对话。
确保您的应用程序无需 JavaScript 即可运行，然后添加脚本以改善用户体验。
将脚本用于其最擅长的工作，例如改进用户交互和管理 HTMX 不易处理的客户端逻辑。

打印页面