sort() 未改变 DOM 是因只重排 JS 数组，需手动 appendChild 排序后的 tr；文本列用 localeCompare()，数字列转 Number 后相减；通过 data-sort-direction 记录方向并翻转；移动端用 pointerdown 防抖，兼容 Safari。
点击表头触发排序时，sort() 为什么没改变 DOM 顺序？
直接对 Array.from(table.querySelectorAll('tbody tr')) 调用 sort() 只是重排数组，不会自动移动 DOM 元素。浏览器里数组和 DOM 是两套东西，得手动把排序后的 tr 按新顺序重新 appendChild() 到 tbody 里。
常见错误是只改了 JS 数组，却忘了把 tr 节点一个个 append 回去——结果界面毫无变化。
- 必须用
tbody.appendChild(tr)（不是insertBefore或replaceChild），因为appendChild会自动从原位置移除再插入，天然适合重排 - 避免用
innerHTML重建整张表，会丢失事件监听、输入框焦点、已选中状态等 - 如果表格有
thead和tfoot，只操作tbody内的tr，别误动表头或页脚
localeCompare() 和 Number() 怎么选？文本 vs 数字列排序逻辑差异
字符串列（如姓名、城市）用 localeCompare() 更稳妥，它能正确处理中文、带空格、大小写混合等情况；数字列（如价格、ID）必须转成数字再比，否则 '10' 会返回 <code>true。
别硬写 a > b ? 1 : -1，容易漏掉相等情形，且不兼容 localeCompare() 的多语言排序规则。
立即学习“前端免费学习笔记（深入）”；
- 文本排序：
cells[1].textContent.trim().localeCompare(cells[2].textContent.trim()) - 数字排序：
Number(cells[2].textContent) - Number(cells[1].textContent)（注意容错：非数字时 fallback 为 0） - 日期列建议先解析成
Date对象再比较，别直接比字符串格式的 “2023-05-01”
如何记住上一次点击的列和排序方向（升序/降序）？
不能每次点击都默认升序，用户需要切换方向。最轻量做法是给当前排序的 th 加一个 data-sort-direction="asc" 属性，下次点击时读取并翻转。
同时要把之前标记的 th 清掉，否则多个表头显示箭头，视觉混乱。
- 点击前先遍历所有
th，清除data-sort-direction和 class（比如sorted-asc/sorted-desc） - 当前
th设置data-sort-direction，值为asc或desc，再根据该值决定是否在比较函数里翻转返回值 - 翻转逻辑简单写：若方向是
desc，则把sort()的返回值乘以-1
移动端点击区域小、频繁触发，怎么防抖 + 兼容 Safari？
Safari 对 click 事件响应慢半拍，尤其在 iOS 上，用户连点两次可能只触发一次；而快速连点又容易误触发多次排序。直接加 setTimeout 防抖不保险，推荐用 touchstart + click 双事件监听，或统一用 pointerdown（更现代，但需确认兼容性）。
另外，Safari 不支持 Array.from() 对 NodeList 的某些旧版本，要加 polyfill 或改用扩展运算符：[...tbody.children]。
- 绑定事件时优先用
table.addEventListener('click', e => { if (e.target.matches('th')) { ... } })，别给每个th单独绑 - 防抖用
setTimeout+clearTimeout就够，延迟设 200ms，既防误点又不卡手 - 排序前加个
if (tbody.children.length ，空表或单行表跳过，省计算
实际排序逻辑本身不复杂，难的是 DOM 同步、类型判断、状态维护这三块。尤其是 appendChild() 的副作用和 localeCompare() 的隐式行为，稍不注意就出现中文乱序或数字错排。
