如何用javascript构建单页面应用【教程】_技术教程

SPA需路由控制、视图更新、状态管理协同实现，核心是history.pushState改URL不刷新、popstate监听前进后退、动态DOM替换更新内容。

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 变化后才更新