关于spa:原生JavaScript实现的SPA单页应用hash路由

什么叫做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="./static/css/index.css"></head><body>        <div id="app"></div></body></html>

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="#/">百度热搜</a>    <a href="#/weibo">微博热搜</a>    <a href="#/douyin">抖音热搜</a>    `;    document.querySelector('#app .topBar').innerHTML = $topBarItem_HTML;}// 首页function home() {        // 热搜列表    var hotlist = [        {            'title':'中俄联合声明:用和谈解决乌克兰危机',            'url':'https://baijiahao.baidu.com/s?id=1760993625204951286'        },        {            'title':'网友晒壮观的俄罗斯护送队',            'url':'https://quanmin.baidu.com/v/4235918912360611140'        },        {            'title':'秋季游览生产强势复苏',            'url':'https://quanmin.baidu.com/v/4235918912360611140'        },        {            'title':'你的城市在下雨，他的城市在下泥',            'url':'https://haokan.baidu.com/v?pd=wisenatural&vid=3490913664840969394'        },        {            'title':'英国发表向乌提供贫铀弹',            'url':'https://news.ycwb.com/2023-03/22/content_51834441.htm'        }    ];    $home_HTML = `    <div class="topBar"></div>    <div class="contentView"></div>    `;        document.querySelector('#app').innerHTML = $home_HTML;    addTopBarItem();        for (var i = 0; i < hotlist.length; i++) {                var node_li = document.createElement("a");        node_li.setAttribute('href',hotlist[i].url);        var hotlist_node = document.createTextNode(hotlist[i].title);        node_li.appendChild(hotlist_node);        document.querySelector('#app .contentView').appendChild(node_li);    }}// 微博热搜function weibo() {        // 热搜列表    var hotlist = [        {            'title':'中俄元首签订联合声明',            'url':'https://s.weibo.com/weibo?q=%23%E4%B8%AD%E4%BF%84%E5%85%83%E9%A6%96%E7%AD%BE%E7%BD%B2%E8%81%94%E5%90%88%E5%A3%B0%E6%98%8E%23&t=31&band_rank=1&Refer=top'        },        {            'title':'迪丽热巴微博之夜正式官宣',            'url':'https://s.weibo.com/weibo?q=%23%E8%BF%AA%E4%B8%BD%E7%83%AD%E5%B7%B4%E5%BE%AE%E5%8D%9A%E4%B9%8B%E5%A4%9C%E6%AD%A3%E5%BC%8F%E5%AE%98%E5%AE%A3%23&t=31&band_rank=2&Refer=top'        },        {            'title':'中俄关系对世界格局人类前途命运至关重要',            'url':'https://s.weibo.com/weibo?q=%23%E4%B8%AD%E4%BF%84%E5%85%B3%E7%B3%BB%E5%AF%B9%E4%B8%96%E7%95%8C%E6%A0%BC%E5%B1%80%E4%BA%BA%E7%B1%BB%E5%89%8D%E9%80%94%E5%91%BD%E8%BF%90%E8%87%B3%E5%85%B3%E9%87%8D%E8%A6%81%23&t=31&band_rank=3&Refer=top'        },        {            'title':'朴妍珍和宋承宪演过世间中毒',            'url':'https://s.weibo.com/weibo?q=%23%E6%9C%B4%E5%A6%8D%E7%8F%8D%E5%92%8C%E5%AE%8B%E6%89%BF%E5%AE%AA%E6%BC%94%E8%BF%87%E4%BA%BA%E9%97%B4%E4%B8%AD%E6%AF%92%23&t=31&band_rank=4&Refer=top'        },        {            'title':'云之羽官宣演员阵容',            'url':'https://s.weibo.com/weibo?q=%23%E4%BA%91%E4%B9%8B%E7%BE%BD%E5%AE%98%E5%AE%A3%E6%BC%94%E5%91%98%E9%98%B5%E5%AE%B9%23&t=31&band_rank=5&Refer=top'        }    ];    $weibo_HTML = `    <div class="topBar"></div>    <div class="contentView"></div>    `;        document.querySelector('#app').innerHTML = $weibo_HTML;    addTopBarItem();        for (var i = 0; i < hotlist.length; i++) {                var node_li = document.createElement("a");        node_li.setAttribute('href',hotlist[i].url);        var hotlist_node = document.createTextNode(hotlist[i].title);        node_li.appendChild(hotlist_node);        document.querySelector('#app .contentView').appendChild(node_li);    }}// 抖音热搜function douyin() {        // 热搜列表    var hotlist = [        {            'title':'中俄元首签订联合声明',            'url':'https://www.douyin.com/hot/1104982'        },        {            'title':'高双星偷走的是高加林的人生',            'url':'https://www.douyin.com/hot/1104967'        },        {            'title':'中国空间站的窗外有多美',            'url':'https://www.douyin.com/hot/1104853'        },        {            'title':'人民娱乐评光明光荣毒虫仿妆',            'url':'https://www.douyin.com/hot/1103955'        },        {            'title':'朝鲜超140万青年报名从军',            'url':'https://www.douyin.com/hot/1103928'        }    ];    $douyin_HTML = `    <div class="topBar"></div>    <div class="contentView"></div>    `;        document.querySelector('#app').innerHTML = $douyin_HTML;    addTopBarItem();        for (var i = 0; i < hotlist.length; i++) {                var node_li = document.createElement("a");        node_li.setAttribute('href',hotlist[i].url);        var hotlist_node = document.createTextNode(hotlist[i].title);        node_li.appendChild(hotlist_node);        document.querySelector('#app .contentView').appendChild(node_li);    }}// 404 页面处理函数function notFound() {    const main = document.querySelector('#app');    main.innerHTML = '<h1>404 页面不存在</h1>';}// 监听 URL 变动事件window.addEventListener('hashchange', router);// 页面加载实现后初始化路由window.addEventListener('load', router);

代码阐明

本次示例也是采纳了目前的Web构建工具打包进去的目录模式（即Webpack、Vite等打包工具）

index.js外面的数据写在了一个对象当中，理论利用须要应用AJAX/Fetch等形式获取数据返回JSON对象进行显示。

关于spa:原生JavaScript实现的SPA单页应用hash路由

什么叫做SPA单页利用

单页利用的长处

单页利用的实现原理

上代码

代码阐明

界面

DEMO

作者