HTML CSS JAVASCRIPT PYTHON PYTHON2 JAVA C C++ C# SQL Excel Linux AI BOOTSTRAP PHP 教程库 参考手册 技术文章 测验 练习 HOWTO FAQ
❮ 上一节 下一节 ❯

HTMX - 脚本

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

超媒体友好型脚本

向 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!');
            // 在此处执行任何其他操作
        }
    });
</script>

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

推荐的脚本解决方案

HTMX 可与许多脚本方法配合使用，但以下几种方法特别适合。

  • Vanilla JavaScript:使用纯 JavaScript 来处理事件和操作 DOM 是一种轻量级且越来越受欢迎的选择。它非常适合简单的交互，并充分利用了现代浏览器 API。
    • document.querySelector('#myButton').addEventListener('click', function() {
// 处理点击事件
});
  • 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() {
// 使用 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');
    // 在此处执行任何其他操作
  }
});
  • 增强服务器提供的控件:脚本可以为超媒体控件添加功能，同时保持其原有用途。
    • 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 无法轻松处理的客户端逻辑。
❮ 上一节 下一节 ❯