闭包实现的日志聚合器通过iife封装logqueue、timerid及配置项，提供track()收集日志并自动注入上下文，达maxbatchsize或flushinterval时批量上报；支持flush()手动发送、destroy()清理资源，用sendbeacon或image兜底，失败重试不丢数据。
用闭包实现前端日志聚合器，核心是把缓冲队列、上报逻辑和定时控制封装在私有作用域里，避免全局污染，同时保证状态隔离与可复用性。它不依赖外部存储（如 localStorage），专注内存级暂存 + 节奏可控的批量上报，适合轻量行为日志或性能指标聚合场景。
闭包结构设计：封装队列与计时器
利用立即执行函数（IIFE）创建独立作用域，内部维护：
- 一个数组队列 logQueue，存放待上报的日志对象
- 一个定时器引用 timerId，用于控制上报节奏
- 配置项如 maxBatchSize（单次最多发几条）、flushInterval（多久强制发一次）
日志收集：提供统一入口方法
对外暴露 track() 方法，接收任意结构的日志数据（如事件名、参数、时间戳等），自动注入基础上下文（URL、UA、时间）并推入队列：
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 每次调用
track(event, payload)都会向logQueue添加一条带时间戳和环境信息的对象 - 若队列长度达到
maxBatchSize，立即触发上报并清空 - 避免重复创建定时器：仅当队列为空且无活跃定时器时才启动新定时器
定时上报：自动批处理与错误兜底
使用 setInterval 触发批量发送，但关键细节在于：
- 上报前先拷贝当前队列（
const batch = [...logQueue]），再清空原队列，防止上报中新增日志被漏掉 - 上报失败时不丢弃数据：将失败批次重新 unshift 回队列头部，下次定时再试
- 上报方式推荐
navigator.sendBeacon（关页不丢）、fallback 到new Image().src（兼容老浏览器、无跨域问题） - 上报成功后重置定时器，避免累积延迟
手动触发与销毁：支持灵活控制
额外提供两个辅助方法增强可控性：
-
flush()：立即发送当前所有缓存日志，常用于页面卸载前（beforeunload）做最后兜底 -
destroy()：清除定时器、清空队列、释放引用，方便测试或动态停用
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
