这篇文章主要介绍“基于原生JavaScript怎么实现SPA单页应用”，在日常操作中，相信很多人在基于原生JavaScript怎么实现SPA单页应用问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”基于原生JavaScript怎么实现SPA单页应用”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
什么叫做SPA单页应用
单页Web应用
（single page web application，SPA），就是只有一张Web页面的应用，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。
单页应用的说法是在JavaScript和AJAX技术比较成熟以后才出现的，指的是通过浏览器访问一个网站时，只需要加载一个入口页面，此后显示的内容和数据都不会再刷新浏览器页面。有了单页应用之后，传统的网站就被称为多页应用了。
单页应用的优点
1. 前端负责界面显示，后端负责数据存储和计算，各司其职。
2. 用户体验好、快，内容的改变不需要重新加载，提升了用户体验；而且同一套后端程序代码，不用修改就可以用于Web界面、手机、平板等多种客户端；
3. 减轻服务器压力，服务器只用出数据就可以，不用管展示逻辑和页面合成，吞吐能力会提高几倍。
单页应用的实现原理
其实很容易理解，就是在一个HTML页面当中只有一个div节点，通过后端获取到数据，然后js操作DOM来创建、删除、更新节点以达到修改页面内容，所以页面是没有被刷新的，只是DOM节点发生了改变，所以HTML发生了改变。
目前有非常多开发单页应用的优秀框架，常见的有Vue、React、Svelte、Angular，但是这些框架都需要依赖非常笨重的Node模块、打包工具、开发环境、以及各种组件。
上代码
index.html
<html> <head> <title>原生JS实现的单页应用</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover"> <script src="./static/js/index.js"></script> <link rel="stylesheet" href="https://www.maopiaopiao.com">
static/css/index.css
*{
padding: 0;
margin: 0;
}
body{
background: #eee;
}
#app .topBar{
width: 100%;
height: 50px;
background: #fff;
margin-bottom: 20px;
line-height: 50px;
}
#app .topBar a{
display: block;
float: left;
padding:0 10px;
text-decoration: none;
color: #333;
}
#app .contentView a{
display: block;
text-decoration: none;
line-height: 40px;
background: #fff;
width: 90%;
margin: 0 auto 10px;
padding: 5px 10px;
color: #333;
font-size: 15px;
border-radius: 10px;
}static/js/index.js
// 路由配置
const routes = {
'/': home,
'/weibo': weibo,
'/douyin': douyin
};
// 路由函数
function router() {
// 获取当前 URL 中的路径部分
const path = window.location.hash.slice(1);
// 根据路径找到对应的处理函数
const handler = routes[path] || notFound;
// 渲染页面
handler();
}
// 注入topBar选项
function addTopBarItem(){
$topBarItem_HTML = `
<a href="https://www.maopiaopiao.com">代码说明
1.本次示例也是采用了目前的Web构建工具打包出来的目录模式（即Webpack、Vite等打包工具）
2.index.js里面的数据写在了一个对象当中，实际应用需要使用AJAX/Fetch等方式获取数据返回JSON对象进行显示。
动图演示
在这个动图示例中，可以看到，切换tab的时候，下面的列表发生了变化，URL也发生了变化，但是并没有刷新页面。