Show HN：Mador – 使用微小的 80 行代理状态元组使任何 DOM 具有反应性

使 DOM 响应式。而已。 Mador：是一个非常小的反应式 DOM 运行时。适合那些不需要或不想要框架的人。它为您提供响应式状态以及将该状态绑定到现有 DOM 的方法。 Mador 是原生 ES 模块，可以通过 npm 或直接从 CDN 使用。从“https://cdn.jsdelivr.net/npm/@marsbos/mador@latest/dist/mador.js”导入马多尔； const [ 读 , 写 ] = mador ( { 计数 : 1 , } ) ; read ( ".counter" , ( el , count ) => { el .textContent = `Count: ${ count } ` ; } , ( state ) => state . count , ) ; read ( ".another-counter" , ( el , count ) => { el .textContent = count * 3 ; } , ( state ) => state . count , ) ; write((state)=>{state.count++;});这基本上就是全部了。没有组件、模板或虚拟 DOM。 Mador 使用您已有的 DOM。绑定由三部分组成： read ( 选择器 , update , read ) ;选择器选择要更新的元素。 update 接收每个元素和 read 返回的值。 read 选择绑定所依赖的状态。 read ( ".counter" , ( el , count ) => { el .textContent = count * 2 ; } , ( state ) => state . count , ) ; Mador 跟踪绑定读取的属性，并且仅在这些依赖项发生更改时才重新运行它。状态通过 w : write ( ( state ) => { state . count ++ ; } ) ; 改变。写入是批处理的，因此同一写入中所做的多个更改会一起处理。 “绑定”与它们更新的 DOM 相关联。当匹配的元素消失时，Mador 可以移除相应的反应性流道。没有需要管理的组件生命周期。有时页面不需要框架。它已经有 HTML 和 Javascript，但只需要一点反应性。马多尔就是为了这么做而生的。马多尔故意变小。目前，运行时压缩后约为 855 字节。 Mador 作为 ES 模块分发。从“mador”导入mador；不需要全局运行时，也不需要构建步骤。麻省理工学院