data-* 属性应存储预计算的纯数值或iso时间戳（如data-price="299"、data-date="2024-03-15t08:30:00"），避免带单位字符串；javascript通过dataset读取时需转驼峰命名并手动类型转换，排序后须重新插入dom以更新视图，复杂逻辑应改用内存对象建模而非硬编码data值。
data-* 属性怎么存排序用的数据
直接在列表项里用 data- 开头的属性存数值或时间戳，比解析文本内容稳定得多。比如按价格排序，就加 data-price="299"；按日期排序，就用 ISO 格式存 data-date="2024-03-15T08:30:00"。别存带单位的字符串（如 "299元"），也别依赖 textContent 里的人类可读文本——用户改个格式，排序就崩。
JavaScript 里怎么读取并比较 data 属性
dataset 是最常用的方式，但要注意命名转换规则：HTML 里写 data-sort-weight，JS 里得用 el.dataset.sortWeight（连字符变驼峰）。类型全是字符串，所以数值比较前必须转类型：
const items = Array.from(document.querySelectorAll('.item'));
items.sort((a, b) => {
const aVal = parseFloat(a.dataset.price) || 0;
const bVal = parseFloat(b.dataset.price) || 0;
return aVal - bVal; // 升序
});
常见错误是忘了 || 0 或 NaN 处理，导致 sort() 把含空 data-price 的项全堆到开头或结尾，顺序错乱。
点击表头触发排序时要注意 DOM 重排
排序后不能只调用 sort()，还得把节点按新顺序重新插入父容器，否则 DOM 结构没变，视觉上还是老顺序。正确做法是先清空父元素，再用 appendChild() 按序追加：
- 用
parent.innerHTML = ''简单粗暴，但会丢掉绑定的事件监听器 - 更稳妥的是用
parent.append(...sortedItems)，保留事件和状态 - 如果列表很长（>500 项），考虑用
DocumentFragment批量操作，避免频繁重排
data 属性不适合做复杂排序逻辑
data- 只适合存简单、预计算好的排序依据。比如多字段组合排序（先按状态、再按时间）、模糊匹配权重、或需要实时计算的优先级，硬塞进 data-score 里维护成本高、易出错。这时候该用 JS 对象建模，把原始数据存在 data-item-id 里作索引，排序逻辑走内存计算，再映射回 DOM。
真正容易被忽略的是：data- 值一旦写死，就和业务逻辑脱钩了。下次价格变了、状态流转了，你得同步更新所有 data-price 和 data-status，而不是靠一次初始化自动响应。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
