htmx

HTML的高性能工具

介绍

htmx允许你直接在HTML中通过属性访问AJAX、CSS过渡、WebSocket和服务器发送事件，因此你可以利用超文本的简洁性和强大功能构建现代用户界面。

htmx体积小（压缩后约14KB），无依赖且可扩展。

动机

• 为什么只有<a>和<form>能发送HTTP请求？
• 为什么只有click和submit事件能触发它们？
• 为什么只能使用GET和POST方法？
• 为什么只能替换整个屏幕？

通过消除这些任意限制，htmx使HTML成为一种完整的超文本。

快速开始

  <script src="https://unpkg.com/htmx.org@2.0.2"></script>
  <!-- 让按钮通过AJAX发送POST请求 -->
  <button hx-post="/clicked" hx-swap="outerHTML">
    点击我
  </button>

hx-post和hx-swap属性告诉htmx：

"当用户点击这个按钮时，向/clicked发送AJAX请求，并用响应替换整个按钮"

htmx是intercooler.js的继任者。

作为node包安装

使用npm安装：

npm install htmx.org --save

注意有一个旧的损坏包叫htmx。这个是htmx.org。

网站和文档

• https://htmx.org
• https://htmx.org/docs

贡献

想要贡献？查看我们的贡献指南

没时间？那就成为赞助商

开发指南

要在本地开发htmx，你需要安装开发依赖。

运行：

npm install

然后在根目录运行Web服务器。

最简单的方法是：

npx serve

之后你可以通过访问以下地址运行测试套件：

http://0.0.0.0:3000/test/

此时你可以修改/src/htmx.js来添加功能，然后在/test下的适当区域添加测试。

• /test/index.html - 包含所有其他测试的根测试页面
• /test/attributes - 属性特定测试
• /test/core - 核心功能测试
• /test/core/regressions.js - 回归测试
• /test/ext - 扩展测试
• /test/manual - 无法自动化的手动测试

htmx使用mocha测试框架、chai断言框架和sinon来模拟AJAX请求。它们都很不错。

你还可以通过运行npm run ws-tests来执行WebSocket和服务器端事件扩展的实时测试和演示。

俳句

JavaScript疲劳：<br/> 渴望一种超文本<br/> 其实手中已有