第一章：HTMX 简介与核心理念

1.1 HTMX 的诞生背景

在 2020 年，一位名叫 Carson Gross 的开发者发布了 HTMX。它的前身是 intercooler.js（2013 年发布），两者有着相同的核心理念：让 HTML 拥有超能力。

前端开发的演进

Web 1.0 (1990s-2000s)     Web 2.0 (2005-2015)       Modern SPA (2015-至今)
┌──────────────┐          ┌──────────────┐          ┌──────────────┐
│  纯 HTML     │   →      │  jQuery +    │   →      │  React/Vue/  │
│  表单提交    │          │  AJAX        │          │  Angular     │
│  整页刷新    │          │  局部更新    │          │  虚拟 DOM    │
└──────────────┘          └──────────────┘          └──────────────┘
     简单                    中等复杂度                高度复杂
     ↓                          ↓                        ↓
   开发慢                    开发中等                  开发快但
   体验差                    维护成本上升               维护困难

HTMX 的定位：在简单和现代化之间找到平衡点。

1.2 核心理念：HTML-First

HTMX 的哲学可以用一句话概括：

"将 HTML 扩展为超文本" —— HTML 本身就应该具备处理现代交互的能力。

四个核心原则

1.3 HTMX vs 传统方案

代码对比：计数器

React 版本（需要 3 个文件）：

// Counter.jsx
import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
}

HTMX 版本（纯 HTML）：

<!-- 后端返回完整 HTML -->
<div id="counter">
  <p>Count: {{ count }}</p>
  <button hx-post="/increment" hx-target="#counter">+</button>
</div>

后端（Python Flask 示例）：

@app.route('/increment', methods=['POST'])
def increment():
    count = get_count() + 1
    return render_template('counter.html', count=count)

1.4 HTMX 的架构优势

┌─────────────────────────────────────────────────────────────┐
│                      传统 SPA 架构                           │
├─────────────────────────────────────────────────────────────┤
│  浏览器        →    API 层      →    数据库                  │
│    ↓                 ↓                                      │
│  React/Vue     REST/GraphQL                                 │
│  (复杂状态管理)   (序列化/反序列化)                           │
└─────────────────────────────────────────────────────────────┘
                           vs
┌─────────────────────────────────────────────────────────────┐
│                      HTMX 架构                               │
├─────────────────────────────────────────────────────────────┤
│  浏览器        →    后端模板    →    数据库                  │
│    ↓                 ↓                                      │
│  HTMX库        直接渲染 HTML                                │
│  (仅交换 DOM)   (无需 API 层)                                │
└─────────────────────────────────────────────────────────────┘

1.5 谁在使用 HTMX？

1.6 小结

HTMX 不是来取代 React/Vue 的，而是提供另一种选择：

• ✅ 适合：内容型网站、管理后台、CRUD 应用
• ❌ 不适合：高度交互的 SPA、游戏、复杂可视化

第一章完
返回主话题查看完整目录