校验必须在数据进入HTML仪表盘渲染逻辑前完成，推荐在边缘网关侧或前端JS加载后、render()调用前执行；不能在innerHTML或textContent渲染后再校验，因DOM已丢失原始上下文、单位精度及质量信息。
HTML仪表盘本身不做数据校验，所有校验必须在数据进入仪表盘渲染逻辑前完成——要么在边缘网关侧（推荐），要么在前端 JS 加载后、render() 调用前执行。
为什么不能在 innerHTML 或 textContent 渲染后再校验
一旦数据已写入 DOM，再回溯判断“这个 99999 是温度跳变还是真实高温”，就失去了上下文：没有上一采样值、没有时间戳、没有质量码。校验必须基于原始结构化数据流，而不是渲染后的字符串文本。
- DOM 中的
textContent会抹掉单位、精度、空格、换行，"25.0°C"变成"25.0°C"看似一样，但无法做数值比较 - 用户可能手动修改 DOM（开发者工具），此时你看到的“值”早已不是采集值
- 仪表盘常复用同一 DOM 节点更新多个点位，
lastElementChild拿到的可能是上一个点位的残留内容
fetch() 后立即校验原始 JSON 数据
假设你从网关 API 拉取的是形如 { "pointId": "T-101", "value": 128.5, "timestamp": "2026-10-27T18:22:04Z", "quality": "Good" } 的数组，校验应在此刻介入：
- 量程检查：
if (data.value config.max) data.status = "outOfRange" - 跳变检查：需缓存上一次有效值，
Math.abs(data.value - lastValidValue) > config.deltaThreshold - 卡值检查：记录连续相同
value的次数，超过config.stuckCycles（如 5 个周期）标记为"stuck" - 时间校验：
new Date().getTime() - new Date(data.timestamp).getTime() > 300000（偏差超 5 分钟） - 质量码兜底：
if (data.quality !== "Good") data.status = "badQuality"
校验后只把 status === "normal" 的数据传给图表库或数字显示组件；异常数据可存入 window.debugLog 或发往轻量上报端点，但不参与可视化。
立即学习“前端免费学习笔记（深入）”；
避免把校验逻辑写死在 HTML 模板里
别在 <div class="temp-value">{{ value }}</div> 这类模板中塞 v-if="value > -20 && value —— 这是语义错位：模板负责呈现，不负责可信判定。
- 配置应分离：用 JSON 文件或 API 返回每个点位的
min/max/deltaThreshold，而非硬编码在 JS 里 - 校验函数要可复用：一个
validatePoint(data, rules)函数，输入是单条原始数据 + 规则对象，输出是带status和reason的新对象 - 不要依赖
document.querySelector()做校验：它查的是当前 DOM 状态，不是数据源状态
容易被忽略的兼容性细节
工业场景下，仪表盘常运行在老旧浏览器（IE11/Edge Legacy）或定制 Chromium 内核中，这些环境对现代 JS 特性支持有限：
-
Number.isNaN()在 IE 中不可用，改用typeof x === 'number' && isNaN(x) -
Array.from()需要 polyfill，校验大批量点位时建议用for (let i = 0; i - 时间解析用
Date.parse()而非构造函数，避免 ISO 格式在低版本中返回NaN - 别用可选链
?.data，老内核直接报语法错误
真正关键的不是“能不能跑起来”，而是“异常数据有没有被静默吞掉”。只要校验规则没在数据源头生效，后面所有图表、报警、导出，都会建立在不可信基础上。
