0.1.2 • Published 3 years ago
immer-ob v0.1.2
immer-ob
观察者模式做事件派发,使用 memo 配合不可变对象做事件拦截
配合 vanilla-life 可以优雅的实现状态管理
Size < 1kb
Install
$ npm install --save immer-ob
Use
import { Ob } from "immer-ob";
const ob = Ob({
name: "dog",
list: ["name-a", "name-b"],
age: 20,
});
const ele = document.createElement("div");
// 监听 name 和 list, 仅当它任何一个有改变时,才会派发任务
// 初始化时,必定会执行一次监听
// 当 ele remove 之后,会自动取消监听
const removeOb = ob.onUpdate((s)=>[s.name, s.list], [name, list]=>{
document.body.textContent = name + list.join('-');
});
// 派发一次任务
ob.update(s=>{
// 由于 ob 内部的state使用的是不可变对象,即便直接修改数组内容,也会认为对象已被修改
s.list[0] = "dog";
});
// 移除删除监听
removeOb()
Detail
拦截所有事件:
const removeOb = ob.onUpdate(
// 当返回的数组 length 为 0 时,不做事件派发
(s) => [],
([name, list]) => {}
);
不做拦截:
const removeOb = ob.onUpdate(
// 当返回的对象为 null,不做拦截
(s) => null,
([name, list]) => {}
);