data-page必须用dataset.page赋值为字符串，读取时用Number()转换并校验范围，配合URL更新、aria-current同步和focus聚焦，且后端必须独立校验page参数。
data-page属性怎么绑定到页码按钮上
必须用dataset.page赋值，不能写setAttribute('data-page', n)或直接拼HTML字符串。前者是标准DOM API，后者容易被XSS过滤或破坏结构；拼HTML还会丢失已绑定事件。
正确做法是创建按钮后立刻设值：
const btn = document.createElement('button');
btn.textContent = String(pageNum);
btn.dataset.page = String(pageNum); // 注意：必须是字符串
btn.type = 'button'; // 防止表单提交
常见错误：
- 写成
btn.dataset.page = pageNum（数字类型），某些浏览器会转成undefined或触发异常 - 在
innerHTML里硬写data-page="3"，后续无法用dataset安全读取（IE旧版尤其不稳定） - 没加
type="button"，点击时意外触发表单提交，导致页面刷新
点击时怎么安全读取data-page值
读取必须用event.target.dataset.page，且立即做类型转换和边界校验。不能直接当数字用，因为它是字符串，可能为空、为"1.5"或"abc"。
立即学习“前端免费学习笔记（深入）”；
推荐写法：
btn.addEventListener('click', (e) => {
const targetPage = Number(e.target.dataset.page);
if (isNaN(targetPage)) return;
const page = Math.max(1, Math.min(targetPage, totalPages));
goToPage(page);
});
关键点：
- 用
Number()而非parseInt()，避免"12px"被截成12这种隐式转换陷阱 - 越界检查必须在更新UI前完成，否则
goToPage(0)或goToPage(999)会导致空白页 - 不要依赖
e.target.innerText反推页码——用户可能复制粘贴、屏幕阅读器读出格式化文本，不可靠
为什么不能只靠data-page做状态同步
dataset.page只是传递意图的“信封”，它不维护当前页状态，也不保证URL、DOM高亮、焦点位置三者一致。单独靠它，会出现点完按钮但URL没变、上一页按钮仍可点、键盘Tab到的不是当前页等割裂体验。
必须配合以下动作：
- 调用
history.pushState()或更新URL search参数，确保前进/后退可用 - 手动移除所有按钮的
aria-current="page"，再给目标按钮加上 - 用
btn.focus()确保键盘用户知道操作已生效（尤其配合tabindex="0"） - 如果按钮被复用（比如只创建5个按钮循环显示不同页码），
dataset.page必须每次重设，不能假设上次值还有效
data-page在服务端分页里要不要传
要，但仅作前端跳转提示，**不能替代后端校验**。后端必须重新解析请求中的page参数并做范围检查，因为dataset.page完全由前端控制，可被任意修改。
典型风险场景：
- 用户F12改
data-page="999999"，前端点了就发GET /api/data?page=999999，后端若没校验，可能查库超时或返回空数据 - 总页数已变成10，但缓存按钮还带着
data-page="15"，点下去报错 - 移动端双击快速连点，两个
data-page请求并发发出，后端需幂等处理
真正可靠的页码来源永远是后端响应里的pagination.total和当前URL参数，dataset.page只是UI层一次性的快捷入口。
