import mador from “https://cdn.jsdelivr.net/npm/@marsbos/mador@latest/dist/mador.js";
const [r, w] = mador({ count: 1, });
r(
“.counter”,
(el, count) => {
el.textContent = Count: ${count};
},
(state) => state.count,
);
r( “.another-counter”, (el, count) => { el.textContent = count * 3; }, (state) => state.count, );
w((state) => { state.count++; });
这就是全部内容了。
没有组件、模板或虚拟 DOM。 Mador 直接作用于你已有的 DOM。
r(selector, update, read);
selector 用于选择需要更新的元素。
update 接收每个元素以及 read 返回的值。
read 用于选择该绑定所依赖的状态。
r( “.counter”, (el, count) => { el.textContent = count * 2; }, (state) => state.count, );
Mador 会追踪绑定中读取的属性，只有当这些依赖发生变化时才会重新运行该绑定。
w((state) => { state.count++; });
写入操作是批处理的，同一次写入中做出的多个更改会被一起处理。
“绑定”会与其所更新的 DOM 相关联。
当匹配的元素被移除后，Mador 可以清除对应的响应式运行器。
无需管理任何组件生命周期。