Mador: 让任意DOM实现响应式更新
Show HN: Mador – Make any DOM reactive with a tiny 80-line Proxy state tuple
Mador是一个极简的响应式DOM运行时，专为不需要完整框架的开发者打造。它仅用80行代码实现状态绑定，无需虚拟DOM或组件系统，直接操作现有HTML。通过简单的Proxy机制，Mador能自动追踪状态依赖，仅在数据变化时更新对应元素。无论是为静态页面添加交互，还是轻量级应用开发，Mador都能以极小的体积（约855字节）提供流畅的响应式体验。
Mador只为那些不需要或不想使用框架的人而生，它让你轻松将响应式状态绑定到现有DOM，无需组件、模板或虚拟DOM。
HN 评论区
33- moostee
为提升人类可读性而提出的变体方案...
```js
import mador from "mador";
const [read, write] = mador({ count: 1 });
read(".counter", ctx => ctx.el.textContent = ctx.count);
write(".increment", "click", ctx => ctx.count++);
write(ctx => ctx.count = 0);
```
## 读取（Read）
依赖项会在初始化阶段运行读取函数时自动检测。
```js
read(".counter", ctx => ctx.el.textContent = `Count: ${ctx.count}`);
```
## 写入（Write）
立即执行：
```js
write(ctx => ctx.count++);
```
事件触发：
```js
write(".increment", "click", ctx => ctx.count++);
```
事件写入会暴露 `ctx.el` 和 `ctx.event`。
- codedokode
这个语法对我来说有点太冗长了。而且像 "read" 和 "write" 这样的函数名也很让人困惑，因为 "read" 函数并不是用来读取值的。我们能不能用一个统一的函数来做绑定（比如叫 "bind"）？
let counter = proxy({ count: 0 });
bind('.counter', (el) => el.textContent = counter.count);
counter.count++; // 队列化 DOM 更新
另外，
> Mador 作为 ES 模块分发。
这意味着它无法在直接从磁盘打开的页面中使用，用户需要搭建一个 HTTP 服务器，这既耗时又让人分心。而且你也不能把应用打包成一个 HTML 文件分发。
- bedroom_jabroni
JS 里有很多开箱即用的信号（signal）原语独立实现。举几个例子：preact/signals、vue reactivity 等等，甚至 TC39 还有一个关于语言特性的提案。这个项目是想通过不同的做法来脱颖而出，还是想重新发明轮子？
- afavour
我很好奇性能表现如何。我记忆深处有个印象，认为 Proxy 对性能不太友好，但我不确定这是否有据可依（或者可能以前是这样，现在不是了）。
不过这是个非常聪明的想法，我喜欢。
- abosalehworld
我喜欢这里极简的 approach。使用 Proxies 进行状态管理，而没有大型框架带来的沉重开销，真的很优雅。控制在 80 行以内令人印象深刻。干得漂亮！