HTMX - 简介

HTMX 是一个现代库,可让您直接从 HTML 使用所有浏览器功能,而无需使用任何 JavaScript。通过 HTMX,您可以直接从 HTML 使用 AJAX、CSS Transitions、WebSockets 和服务器发送事件。HTMX​​ 属性可让您使用 JavaScript 的简单性和强大功能构建现代网站。

什么是 HTMX?

它是一个压缩的开源前端 JavaScript 库,可以轻松创建尖端 UI。它允许您直接使用属性使用 AJAX、CSS Transitions、WebSockets 和服务器发送事件。这为非 React 开发人员带来了轻松,因为它实现了只有 JavaScript 才能提供的交互性。 HTMX 库由 Carson Gross 创建,是 intercooler.js 的新版本。

为什么要学习 HTMX?

它是 Web 开发过程中的强大工具,因为它允许您使用 Ajax 和 Websockets 来处理 HTML,而无需编写任何一行 JavaScript。这对于想要轻松完成前端的后端开发人员非常有帮助。因为它类似于 HTML,语法和属性集合易于理解。

HTMX 示例

在此示例中,我们将看到按钮单击如何触发对给定 URL 的 POST 请求。

<button hx-post="/api/v1/products/buy">购买</button>

HTMX 支持的语言

有很多语言、框架或库支持 HTMX,您可以将这个多功能库与最苛刻和最有用的语言、框架或库一起使用。下面列出了一些流行的语言、框架或库,您可以使用 HTMX。

  • Rust:Rust 是由 Mozilla 公司开发的一种现代系统编程语言。它旨在成为一种用于高度并发和高度安全的系统的语言。
  • Django:Django 是一个 Web 开发框架,可帮助构建和维护高质量的 Web 应用程序。
  • Tailwind:Tailwind CSS 是一个用于设计网页的实用优先 CSS 框架。"实用优先"意味着该框架专注于提供实用类。
  • Flask:Flask 是一个用 Python 编写的 Web 应用程序框架。它由 Armin Ronacher 开发,他领导着一个名为 Pocco 的国际 Python 爱好者团体。
  • Python:Python 是最流行的编程语言之一。尽管它是一种通用语言,但它被用于各种应用领域,例如机器学习、人工智能、Web 开发、物联网等。
  • Go:Go 语言是一种编程语言,最初由 Robert Griesemer、Rob Pike 和 Ken Thompson 于 2007 年在 Google 开发。

HTMX 的优势

  • HTMX 可以与 Django、GO、Rust、Tailwind、Python、Astro 等一起使用,它可以与当今使用的任何流行技术融合在一起。
  • 不需要单独的脚本,通过在常规 HTML 标签中使用 HTMX 属性,您可以触发需要使用 JavaScript 的请求。
  • 当要求较低时可以使用,例如它可以轻松击败 ReactJS 来创建简单的网站。
  • 有还有很多其他功能,如动态内容、自动更新、管理 UI 元素和与服务器逻辑同步,这使得它与其他库相比独一无二。

HTMX 的缺点

  • 它不具备拖放或协作编辑等广泛功能。
  • 它仍然依赖 JavaScript 来实现复杂的单页应用程序的动态行为。
  • HTMX 没有其他 JavaScript 库(如 React 和 Vue)所具有的一系列功能。