黑客狂想：用 40 行代码构建一个精简版 HTMX

这篇文章来自开发者 Serge Zaitsev，通过构建一个名为“x.js”的精简克隆项目，深入剖析了当下热门的前端库 HTMX 的核心架构。作者的目标并非完全复制，而是用最少的代码揭示 HTMX “在 HTML 属性中直接定义 AJAX 请求”的本质。文章首先展示了 HTMX 的基本用法，即通过声明式属性（如 hx-post）连接事件、请求和 DOM 更新，随后作者仅用约 10 行原生 JavaScript 实现了基础原型，通过监听点击事件、发起 fetch 请求并替换元素内容。在此基础上，文章逐步迭代，引入了多种交换模式（如替换、追加）、灵活的目标选择器（如查找最近祖先）以及复杂触发器（如延迟触发、防抖），并利用 MutationObserver 优化性能，将核心代码控制在 40 行左右。此外，文章重点探讨了基于事件的插件架构，通过在请求发送、响应接收、内容交换等节点触发自定义事件，核心逻辑保持极简，而加载动画、表单增强、请求确认等扩展功能均由外部插件实现。这种“扫描-发送-交换”（SSS）模式不仅展示了构建轻量级前端框架的精妙设计哲学，也为理解现代 Web 开发提供了新视角。

事件分析

💡 核心观点：回归浏览器本质：40行代码证明，复杂前端框架的“魔法”往往掩盖了简单的声明式逻辑。