监测与事件

Monitor 模块 是一套高性能的事件监听与状态观测工具集。

它通过统一的封装，解决了原生 addEventListener、ResizeObserver 和 MutationObserver 在组件销毁时易遗忘清理、调试困难等痛点，并内置了强大的防抖节流与调试诊断能力。

引入方式

import { 
  tEvent, 
  tResize, 
  tMutation, 
  tTimer, 
  tInterval, 
  tMitt,
  tMonitor
} from "@techui/utils";

事件监听

tEvent 是原生 DOM 事件的增强封装，支持自动去重、调试追踪和批量清理。

基础 API

• add(el, name, handler, uid, capture): 绑定事件。
  • uid: 关键参数。用于标识该事件的唯一 ID，防止重复绑定同一逻辑，也便于后续精确删除。
• remove(el, name, uid): 移除指定 UID 的事件监听。
• removeAll(el): 移除该元素上所有通过 tEvent 绑定的事件。

const btn = document.querySelector('#btn');
const handler = () => console.log('Click');

// 绑定事件，UID 为 'btnClick_01'
tEvent.add(btn, 'click', handler, 'btnClick_01');

// 移除事件
tEvent.remove(btn, 'click', 'btnClick_01');

高级：防抖与节流

tEvent 直接挂载了两个高频使用的优化函数。

• debounce(fn, wait, immediate): 防抖。适合搜索框输入、窗口 Resize。只在停止触发 N 毫秒后执行一次。
• throttle(fn, wait, options): 节流。适合滚动事件、鼠标移动。每隔 N 毫秒执行一次。

// 防抖：用户停止输入 500ms 后才执行搜索
const onSearch = tEvent.debounce((val) => {
  api.search(val);
}, 500);

// 节流：滚动时每 100ms 触发一次计算
const onScroll = tEvent.throttle(() => {
  updateLayout();
}, 100);

尺寸与变动观测

tResize (尺寸观测)

基于 ResizeObserver 的封装。

• o(elements, callback, duration): 开始观测 (Observe)。支持传入单个元素或数组。duration 参数用于控制回调触发的节流频率（默认 100ms）。
• d(elements): 停止观测 (Disconnect) 并清理内存。

tResize.o(document.querySelector('.chart-box'), (entries) => {
  console.log('容器大小改变了，重绘图表');
});

tMutation (DOM 变动观测)

基于 MutationObserver 的封装，用于监听 DOM 树的节点增删或属性变化。

• o(elements, callback, options, duration): 开始观测。options 可配置监听子节点 (childList) 或属性 (attributes)。
• d(elements): 停止观测。

定时器管理

TechUI 提倡使用封装的定时器以避免“僵尸定时器”导致的内存泄漏。

tTimer (Timeout)

• s(id, fn, ms): 设置延时器 (Set)。id 用于覆盖旧的同名定时器。
• c(id): 清除延时器 (Clear)。
• w(ms): Wait (Promise)。一行代码实现 await sleep(1000)。

// 简单的异步等待
await tTimer.w(1000); 

// 设置具名定时器（如果上次名为 'refresh' 的还没执行，会被自动取消）
tTimer.s('refresh', () => getData(), 500);

tInterval (Interval)

用法与 tTimer 类似，用于管理循环定时器。

调试与诊断

这是 Monitor 模块最强大的特性。当您不确定页面中到底跑了多少个定时器或监听器时，可以开启全局调试模式。

开启调试

// 开启所有模块的调试日志
tMonitor.enable(); 

// 或者单独开启
tEvent.enableDebug();

查看报告

在控制台调用 tMonitor()，它会以表格形式输出当前所有活跃的监听器、定时器及其绑定的 DOM 元素类名。

tMonitor();
// Console Output:
// 🔍 All Monitor Debug Info
// ┌─────────┬──────────────┐
// │ (index) │ Values       │
// ├─────────┼──────────────┤
// │ uid_01  │ "click [btn]"│
// └─────────┴──────────────┘

事件总线

一个极简的发布订阅模式实现 (Event Bus)。

• on(type, handler): 订阅。
• emit(type, data): 发布。
• off(type, handler): 取消订阅。

const bus = tMitt();
bus.on('login', (user) => console.log(user));
bus.emit('login', { name: 'Ayin' });