HTML分页组件实现与页码计算方法

<nav aria-label="页码导航">
  <ol>
    <li><a href="?page=1" rel="first">1</a></li>
    <li><a href="?page=2">2</a></li>
    <li aria-current="page"><span>3</span></li>
    <li><a href="?page=4">4</a></li>
  </ol>
</nav>

关键点：

用 innerHTML = htmlString 拼接页码，看似快，但有三个硬伤：

• 含用户输入内容时（比如搜索结果带 `
• 每次重绘都销毁全部子节点，已绑定的事件监听、焦点状态、自定义属性全丢
• 浏览器需重新解析 HTML 字符串，比原生 DOM 操作慢 2–3 倍（尤其页码多时）

推荐做法是：用 document.createElement + appendChild 动态构建，或用 DocumentFragment 批量插入。例如生成页码项：

function createPageItem(pageNum, isActive) {
  const li = document.createElement('li');
  if (isActive) {
    li.setAttribute('aria-current', 'page');
    li.innerHTML = `<span>${pageNum}</span>`;
  } else {
    const a = document.createElement('a');
    a.href = `?page=${pageNum}`;
    a.textContent = pageNum;
    li.appendChild(a);
  }
  return li;
}

URL 参数同步不是可选项，而是必做项

用户点第 5 页后地址栏还是 ?page=1，刷新就回到首页——这不是体验差，是功能缺陷。

必须同步 URL 的两种典型方式：

const params = new URLSearchParams(location.search);
params.set('page', '5');
window.history.pushState({}, '', `?${params}`);

真正麻烦的从来不是生成那几个数字按钮，而是让页码状态在 URL、内存变量、DOM 属性、无障碍属性之间始终保持一致——少同步一处，就有一个用户翻页后莫名其妙回到第一页。

到这里，我们也就讲完了《HTML分页组件实现与页码计算方法》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！