用JS构建单页应用实战教程

本文深入剖析了不依赖框架、纯用JavaScript构建单页应用（SPA）的核心原理与实战细节，聚焦于history.pushState实现无刷新URL变更、popstate事件精准捕获导航行为、以及安全高效的动态DOM更新三大关键动作；同时厘清了history模式相较hash路由在SEO、URL语义和服务端部署上的优势与配套要求，并直击SPA落地中的真实痛点——如滚动恢复、表单状态保持、异步错误处理及第三方库集成等易被忽略却影响用户体验的深层挑战。

JavaScript 构建单页面应用（SPA）不是靠某个“框架开关”一键开启，而是由路由控制、视图更新、状态管理三者协同实现；没用框架也能做，但绕不开 history.pushState、window.addEventListener('popstate') 和动态 DOM 替换这三个核心动作。

用 history.pushState 替换 URL 而不刷新页面

这是 SPA 的起点。直接修改 location.href 或 location.assign() 会触发完整重载，必须用 History API。

• history.pushState(state, title, url) 第三个参数是相对路径（如 '/user/123'），浏览器地址栏会变，但不会发请求
• state 对象会被存入历史记录栈，后续通过 event.state 取出，建议放轻量数据（如 {page: 'user', id: 123}）
• 不要传绝对 URL（如 'https://site.com/user/123'），会报 SecurityError
• 调用后需手动更新页面内容，API 本身不渲染任何东西

监听浏览器前进/后退并响应视图变化

用户点返回按钮或调用 history.back() 时，页面不会自动重绘——你得自己接住这个事件。

• 必须监听 popstate 事件：window.addEventListener('popstate', e => { render(e.state) })
• e.state 是之前 pushState 传入的 state 对象，但首次加载页面时为 null，需单独处理
• 不要在 popstate 里再调用 pushState，否则可能陷入循环（例如渲染失败又推一次错误状态）
• 移动端某些 WebView 对 popstate 触发不一致，可加一层 setTimeout 防抖（仅调试时必要）

用 innerHTML 或 replaceChildren() 动态更新视图

没有框架时，DOM 更新靠手动操作。别用 document.write()（已过时且清空整个文档），也别对整个 body 做 innerHTML = ...（会丢失绑定事件、焦点、音频播放等状态）。

• 推荐定位到一个容器节点（如 document.getElementById('app')），然后用 el.replaceChildren(...)（现代写法）或 el.innerHTML = htmlString
• 如果 HTML 字符串含用户输入内容，务必先用 textContent 或转义函数处理，否则有 XSS 风险
• 事件监听要重新绑定（除非用事件委托），或者把逻辑封装成可重入的 initPage() 函数
• 避免高频触发（如滚动中频繁 pushState + render），加节流或只在 URL 变化后才更新

为什么不用 hash 路由而选 history 模式？

hash 路由（#user/123）兼容老浏览器，但缺点明显：SEO 不友好、URL 不美观、服务端无法区分不同 hash（导致部署到子路径时 404）。

• 用 history 模式必须配服务端支持：所有前端路由路径都返回同一份 index.html（否则刷新页面 404）
• Nginx 示例配置：location / { try_files $uri $uri/ /index.html; }
• Vercel/Netlify 等平台默认支持，但 GitHub Pages 需额外配置 404.html 回退
• 开发时用 live-server 或 vite 自带的 SPA fallback，无需手动配

真正难的不是写出能切换页面的代码，而是让每个路由入口都正确恢复滚动位置、保持表单草稿、处理异步加载失败、与第三方库（如地图、富文本）共存——这些细节不在 API 文档里，而在每次用户点击后的真实反馈中。

到这里，我们也就讲完了《用JS构建单页应用实战教程》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！