red-manager
基于树结构的红点通知管理模块。
特性
- 根据路径自动构建红点树,形成红点间的的依赖关系
- 响应式更新,无需计算每个结点,只需针对叶结点统计即可
- 监听红点变化,自定义红点表现方式,兼容所有框架
- 动态增加/删除结点,应对数量不可预计的情况
安装
npm install red-manager
用法
导入
import red from "red-manager"
初始化 (假设你的app有两个tab页,其中首页index里又有两个tab)
red.init([
'index',
'index/tab1',
'index/tab2',
'my'
])
设置红点
const data = await /* 从服务器接收的数据 */
const num: number = /* 根据数据获取判断红点是否存在的数据 */
red.set('index/tab1', num)
// or
const haveRedDot: boolean = /* 用于判断红点存在的布尔类型数据 */
red.set('index/tab1', haveRedDot) // haveRedDot 会自动转换成 0 / 1
红点管理器的哲学是 只设置叶子结点的数据,中间结点全部由结点树的自动更新机制处理
如果手动设置非叶子结点,会造成父结点与子结点数据不统一的现象。
而再次更新叶子结点时,会覆盖该结点的值。
监听红点数据变化
let key: string
key = red.on('index', (num: number) => {
console.log('index - ' + num)
})
// 取消监听
red.off('index', key)
调试
设置调试等级
import { setDebugLevel } from "red-manager"
setDebugLevel(3);
四个调试等级
- 0:无任何打印
- 1:只打印error
- 2:只打印error、warn
- 3:打印error、warn、log
查看红点状态
red.dump();
二次封装
- 在项目中使用可以在应用初始化的时候注册所有已知的结点,既
red.init
。 - 对于依赖后端返回的数据显示红点的,可以在网络请求统一的回调处理中封装一层数据监听,设置监听字段,根据业务逻辑调用
red.set
设置红点。 - 封装一个组件,组件根据红点数据可以自定义自己的显示方式。
测试
本模块测试覆盖率超过96%,正常使用没有任何问题。
测试代码写的很全了,可以当demo来看。
总结
更多的待补充,日后继续更新......
在真实项目中也有在用,请放心使用!