辅助工具 / 05
无限滚动 · 本地存储
长列表不必一次渲染完:滚动到底部自动追加下一批数据,同时把浏览位置、筛选条件这类轻量状态写进浏览器本地存储,刷新后原样恢复。另附图片下发前的尺寸压缩与按角色渲染的权限控制。
无限滚动
[data-infinite]向下滚动本页,列表在接近屏幕底部时会自动追加下一批内容,并弹出「加载更多」提示。本演示用首屏的 10 条数据作为模板循环追加,真实项目请把这一段换成请求下一页接口。
团队动态
已加载 10 条 · 滚动继续加载
实时
陈
待评审
陈思远 提交了「秋季新品主视觉」第 3 版设计稿
涉及 12 个页面,等待设计评审 · 3 分钟前
周
已合并
周航 合并了分支 feature/order-export 到 main
提交 8 个文件,新增 642 行,删除 118 行 · 26 分钟前
赵
目标变更
赵敏 更新了 Q4 目标:新增客户 3,000 家
关联项目:增长实验二期 · 1 小时前
李
附件
李彦 上传了 9 月对账明细 8,642 条
文件 EXP-1003-013.xlsx · 2 小时前
系
告警
系统检测到西南仓库存健康度低于 50%
已通知仓储负责人并生成补货建议 · 3 小时前
吴
已修复
吴桐 关闭了缺陷「导出 CSV 时中文乱码」
修复版本 v2.4.1 · 5 小时前
郑
内容
郑楠 发表了文章《组件库如何做多端一致性》
阅读 1,842 · 收藏 216 · 昨天 18:20
孙
待审批
孙悦 发起了采购申请:48 台 27 寸显示器
金额 ¥ 86,400 · 等待财务复核 · 昨天 15:04
林
已完成
林然 完成了新员工入职培训并提交考核
成绩 92 分 · 昨天 11:32
客
客服
客服组收到 36 条关于物流时效的咨询
平均首次响应 42 秒 · 前天 20:15
正在加载更多动态…
没有更多了 · 已展示全部 10 条种子数据(演示模式下会循环追加)
触发与节流
触发距离距底 300 px
加载延迟800 ms
并发保护加载中忽略新的触发
监听方式passive scroll
每批条数10
加载状态
加载中(首屏 / 追加)
没有更多数据
加载失败,展示重试按钮
骨架屏占位
不要无限追加到底
列表长度超过数百条后,请改为虚拟滚动或分页,否则内存与滚动性能会明显下降。
本地存储
localStorage · sessionStorage草稿自动保存
| 键 | 值 | 大小 |
|---|---|---|
| nexus:draft:order | 客户信息 + 3 个商品行 | 1.8 KB |
| nexus:filters:order | 状态=待发货,区域=华东 | 146 B |
| nexus:theme | dark | 12 B |
| nexus:table:cols | ["orderId","amount","status"] | 64 B |
合计占用 2.1 KB / 5 MB 配额,写入失败(隐私模式或配额耗尽)时静默降级,不打断表单提交。
读写封装
const store = {
get(k, def = null) {
try {
const v = localStorage.getItem(k);
return v === null ? def : JSON.parse(v);
} catch (e) { return def; }
},
set(k, v) {
try { localStorage.setItem(k, JSON.stringify(v)); }
catch (e) { /* 配额或隐私模式 */ }
}
};
// 用法
store.set('nexus:theme', 'dark');
const theme = store.get('nexus:theme', 'light');
JSON.parse 必须包在 try 里:历史版本写入过的裸字符串会让解析抛错。
容量与生命周期
localStorage2.1 KB / 5 MB
sessionStorage0.3 KB / 5 MB
Cookie(会话)42 B / 4 KB
持久性localStorage 长期保留
作用域同源共享,不含 httpOnly
清理时机用户清缓存或浏览器回收
禁止存放敏感信息
令牌、身份证号、支付信息不能写入本地存储:同源脚本均可读取,且明文落盘。
图片尺寸压缩
降采样 · 质量 0.82压缩前后对比
DSC_4218.JPG
4032 × 3024 · 4.8 MB · JPEG q100
DSC_4218.min.JPG
1280 × 960 · 218 KB · JPEG q82
体积对比
先降采样再压缩,收益远大于只调质量系数;对列表缩略图,长边压到 1280px 已足够清晰。
压缩参数
1280
82
批量结果
处理张数12 / 12
原始总体积42.6 MB
压缩后3.4 MB
节省92.0%
平均耗时186 ms / 张
按角色渲染权限
role based rendering当前角色权限矩阵
切换角色查看各模块的可见性与可操作性
| 功能模块 | 查看 | 新增 | 编辑 | 删除 | 导出 | 前端表现 |
|---|---|---|---|---|---|---|
| 订单列表 | 允许 | 允许 | 允许 | 允许 | 允许 | 全部按钮可见 |
| 财务对账 | 允许 | 禁止 | 允许 | 禁止 | 允许 | 新增/删除按钮置灰 |
| 系统设置 | 允许 | 禁止 | 允许 | 禁止 | 禁止 | 导出菜单整项隐藏 |
| 成员管理 | 允许 | 允许 | 允许 | 审批后 | 允许 | 删除需二次确认 |
| 内部成本 | 禁止 | 禁止 | 禁止 | 禁止 | 禁止 | 整列不渲染 |
| 操作日志 | 允许 | 禁止 | 禁止 | 禁止 | 允许 | 只读表格 |
无权限时的三种表现
1. 按钮置灰并给出原因提示
2. 整块区域直接不渲染
3. 可见但只读,容器加只读标识
校验位置
路由级:无权限直接跳转 403
组件级:按权限数组过滤按钮
接口级:服务端二次校验(必须)
缓存策略
权限变更后清空本地缓存
权限快照有效期 10 分钟
401 时重新拉取权限并回放
前端隐藏不等于安全
按角色渲染只解决「不误操作」,不构成访问控制。所有写操作必须在服务端再次校验角色与数据归属,否则用户可直接构造请求绕过。