Hacker News 中文摘要

RSS订阅

显示 HN：µJS，一个5KB的Htmx和Turbo替代品，零依赖 -- Show HN: µJS, a 5KB alternative to Htmx and Turbo with zero dependencies

原文链接 | HN讨论 | 2026-03-08 08:52:25

文章摘要

µJS是一个轻量级AJAX导航库，无需学习框架或修改服务器端代码，只需添加脚本标签即可实现页面无刷新加载。它通过拦截链接点击和表单提交，在后台获取新页面并仅更新变化内容，使导航如单页应用般快速。支持多种后端语言，功能包括预加载、多片段更新、实时事件等，文件仅5KB且无依赖。

文章总结

标题：µJS —— 轻量级AJAX导航库

传统网站在每次点击时都会重新加载整个页面。µJS改变了这一现状：它能拦截链接点击和表单提交行为，在后台获取新页面内容，仅替换发生变化的区域。浏览器无需完全刷新——导航体验如同单页应用般即时流畅。

无需学习新框架，无需构建步骤，无需修改服务器端代码。只需在现有网站中添加一个脚本标签，调用mu.init()函数，所有内部链接即刻实现AJAX导航。它兼容任何后端技术——PHP、Python、Ruby、Go等能输出HTML的服务端语言。

核心特性

极速响应

支持悬停预加载，消除整页刷新，内置进度条。导航操作瞬间完成。

轻量设计

单文件仅约5KB（gzip压缩），零依赖。无需构建流程。

即插即用

适配所有后端技术：PHP/Python/Ruby/Go/Node.js... 服务端零改造。

局部更新模式

单次请求可更新多个页面区块，特别适合控制面板和复杂布局。

灵活触发器

支持任意元素和事件类型。实时搜索、轮询、焦点动作均内置防抖功能。

全HTTP方法

在链接/按钮/表单上实现GET/POST/PUT/PATCH/DELETE请求。

服务端推送

通过Server-Sent Events实现实时更新，结合局部更新模式支持多区块流式更新。

前沿技术

集成视图过渡API、基于idiomorph的DOM智能变形，底层采用Fetch API实现。

快速入门

```html

``` 完成上述两步，所有内部链接将自动转为AJAX加载。

工作原理

  1. 引入脚本
    在页面添加单个<script>标签，无需构建工具。

  2. 智能拦截
    µJS自动监听内部链接点击和表单提交，外部链接保持原样。

  3. 精准替换
    通过AJAX获取新页面后，仅替换目标内容区域，避免整页刷新。

（注：删减了重复的技术说明，优化了功能描述的层次结构，保留所有核心特性与使用细节）

评论总结

以下是评论内容的总结：

  1. 与其他工具的比较需求

    • 多位用户希望看到与Datastar、pjax等工具的比较
      "Would love to see a comparison with Datastar too"
      "I’d like to see a comparison with pjax as well"

  2. 对HTMX生态的讨论

    • 有用户将其与htmz、Swap.js等HTMX替代方案对比
      "Reminds me a little of htmz"
      "If you want something even more minimalistic, I did Swap.js"

  3. 功能需求与改进建议

    • 需要JSON自动解析功能
      "Does it automatically parse JSON responses from servers into objects?"
    • 建议简化属性设计，采用标准HTML语义
      "I would love something even smaller. No mu- attributes"
    • 请求在playground展示完整源码
      "Could you please add all sources as tabs?"

  4. 技术架构讨论

    • 关于SSE连接共享的实践疑问
      "What's the best way to handle having multiple frontend components respond to events from a single SSE connection?"
    • 对DOM整体替换策略的认可
      "swapping the entire body by default is also really interesting"

  5. 命名冲突提示

    • 提醒与其他同名项目区分
      "Not to be confused with https://mujs.com/"
      "There’s several other (well) known examples of the use of mujs"

  6. 基础概念疑问

    • 新手对HTMX范式的困惑
      "why would you build your website this way vs. say jQuery?"
    • 基础功能问题
      "How to avoid the page jumping back to the top in the Playground examples?"

  7. 行业趋势期待

    • 希望浏览器原生支持类似功能
      "It's about time browsers start supporting something like this natively"
    • 对抗前端框架复杂化的认可
      "Anything that combats the normal framework insanity is a good thing"