原生JavaScript实现的SPA单页应用（hash路由）

news2024/9/30 3:33:59

什么叫做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);

代码说明

  1. 本次示例也是采用了目前的Web构建工具打包出来的目录模式（即Webpack、Vite等打包工具）

在这里插入图片描述

  1. index.js里面的数据写在了一个对象当中，实际应用需要使用AJAX/Fetch等方式获取数据返回JSON对象进行显示。

动图演示

在这个动图示例中，可以看到，切换tab的时候，下面的列表发生了变化，URL也发生了变化，但是并没有刷新页面。

在这里插入图片描述

DEMO

http://demo.likeyunba.com/ys-js-spa/#/

作者

TANKING

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1140091.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

超写实数字人小灿加入，助力火山语音全类型虚拟数字人应用创新

超写实数字人小灿加入，助力火山语音全类型虚拟数字人应用创新

当发现更多AI科技作用于日常生活时&#xff0c;你是否想过竟然有一天会与AI数字人做同事&#xff1f;日前&#xff0c;火山语音团队重磅推出了一位神秘新成员——首个超写实数字员工小灿&#xff01;这位新同事不仅形象清新美丽&#xff0c;还有着很强的亲和力&#xff0c;大幅…
阅读更多...
ardupilot开发 --- CAN BUS、DroneCAN 、UAVCAN 篇

ardupilot开发 --- CAN BUS、DroneCAN 、UAVCAN 篇

1. CAN BUS、DroneCAN 、UAVCAN 区别 UAVCAN是一种轻量级协议&#xff0c;旨在通过CAN BUS 在航空航天和机器人应用中实现可靠通信。 UAVCAN网络是分散的对等网络&#xff0c;其中每个对等体&#xff08;节点&#xff09;具有唯一的数字标识符 - 节点ID&#xff0c;并且仅需要…
阅读更多...
minio + linux + docker + spring boot实现文件上传与下载

minio + linux + docker + spring boot实现文件上传与下载

minio docker spring boot实现文件上传与下载 1.在linux上安装并启动docker2.在docker中拉取minio并启动3.Spring Boot 整合 minio4.测试 minio 文件上传、下载及图片预览等功能 1.在linux上安装并启动docker 检查linux内核&#xff0c;必须是3.10以上 uname ‐r安装docker…
阅读更多...
没有电脑也不用担心，在Android设备上也可以轻松使用ppt

没有电脑也不用担心，在Android设备上也可以轻松使用ppt

PowerPoint是制作幻灯片的好工具&#xff0c;无论是工作、学校还是个人使用。但有时你无法使用电脑或笔记本电脑&#xff0c;你必须在旅途中做演示。 这就是PowerPoint for Android派上用场的地方。它允许你在移动设备上创建、编辑和呈现幻灯片。以下是要遵循的步骤&#xff1…
阅读更多...
[每周一更]-(第69期)：特殊及面试的GIT问题解析

[每周一更]-(第69期)：特殊及面试的GIT问题解析

整合代码使用过程的问题&#xff0c;以及面试遇到的细节&#xff0c;汇总一些常用命令的对比解释和对比&#xff1b; 1、fetch和pull区别 git fetch是将远程主机的最新内容拉到本地&#xff0c;用户在检查了以后决定是否合并到工作本机分支中。 git pull则是将远程主机的最新内…
阅读更多...
unity button移动位置some values driven by canvas

unity button移动位置some values driven by canvas

1 可以在button父节点把限制取消勾选 2 在不动整个布局的情况下&#xff0c;只修改局部变量&#xff1a;忽略布局即可
阅读更多...
Instagram引流技巧：如何充分利用社交媒体来增加独立站流量

Instagram引流技巧：如何充分利用社交媒体来增加独立站流量

在数字时代&#xff0c;社交媒体已成为推广产品、服务和内容的重要工具之一。Instagram&#xff0c;作为其中之一&#xff0c;以其视觉化特点和庞大的用户基础&#xff0c;为独立站和个人品牌提供了难得的机会。本文Nox聚星将和大家探讨如何充分利用Instagram&#xff0c;将其作…
阅读更多...
【从瀑布模式到水母模式】ChatGPT如何赋能软件研发全流程

【从瀑布模式到水母模式】ChatGPT如何赋能软件研发全流程

文章目录 &#x1f384;前言&#x1f354;本书概要&#x1f33a;内容简介&#x1f33a;作者简介&#x1f33a;专家推荐&#x1f6f8;读者对象&#x1f354;彩蛋 &#x1f384;前言 计算机技术的发展和互联网的普及&#xff0c;使信息处理和传输变得更加高效&#xff0c;极大地…
阅读更多...
2核4G服务器 如何设计编码一款扛得住高并发高吞吐量的商品秒杀系统

2核4G服务器 如何设计编码一款扛得住高并发高吞吐量的商品秒杀系统

题目 最近要参加一个秒杀商品系统比赛 【题目】设计并演示一款商品秒杀系统 【要求】设计并实现程序&#xff0c;模拟该商品秒杀系统的基本功能包括但不限于&#xff1a; 1.商品管理&#xff1a;每个商品都有唯一的ID、名称、库存数量和秒杀价格。 2.用户管理&#xff1a;每个…
阅读更多...
MyBatis 基础用法详解

MyBatis 基础用法详解

目录 什么是MyBatis 前置工作 创建MyBatis项目 MyBatis的使用 1.查询 1.1全查询 1.2传参查询 2.删除 3.修改 4.添加 什么是MyBatis MyBatis 是一款优秀的持久层框架&#xff0c;它支持定制化 SQL、存储过程以及高级映射。MyBatis 避免了几乎所有的 JDBC 代码和手动设…
阅读更多...
使用Python实现一个简单的斗地主发牌

使用Python实现一个简单的斗地主发牌

使用Python实现一个简单的斗地主发牌 1.源代码实现2.实现效果 1.源代码实现 import random# 定义扑克牌的花色和大小 suits [♠, ♥, ♣, ♦] ranks [2, 3, 4, 5, 6, 7, 8, 9, 10, J, Q, K, A]# 初始化一副扑克牌 deck [suit rank for suit in suits for rank in ranks]# …
阅读更多...
怎么用Python写一个浏览器集群框架

怎么用Python写一个浏览器集群框架

这是做什么用的 框架用途 在采集大量新闻网站时&#xff0c;不可避免的遇到动态加载的网站&#xff0c;这给配模版的人增加了很大难度。本来配静态网站只需要两个技能点&#xff1a;xpath和正则&#xff0c;如果是动态网站的还得抓包&#xff0c;遇到加密的还得js逆向。 所以…
阅读更多...
ChatGPT如何赋能探究深度学习、神经网络与卷积神经网络

ChatGPT如何赋能探究深度学习、神经网络与卷积神经网络

计算机技术的发展和互联网的普及&#xff0c;使信息处理和传输变得更加高效&#xff0c;极大地改变了金融、商业、教育、娱乐等领域的运作方式。数据分析、人工智能和云计算等新兴技术&#xff0c;也在不断地影响和改变着各个行业。 如今&#xff0c;我们正在见证人工智能技术…
阅读更多...
【Overload游戏引擎细节分析】PBR材质Shader

【Overload游戏引擎细节分析】PBR材质Shader

PBR基于物理的渲染可以实现更加真实的效果&#xff0c;其Shader值得分析一下。但PBR需要较多的基础知识&#xff0c;不适合不会OpenGL的朋友。 一、PBR理论 PBR指基于物理的渲染&#xff0c;其理论较多&#xff0c;需要的基础知识也较多&#xff0c;我在这就不再写一遍了&#…
阅读更多...
如何构造强一致性系统？理解数据一致性里的2PC和TCC模式原理，以及如何做（有图）

如何构造强一致性系统？理解数据一致性里的2PC和TCC模式原理，以及如何做（有图）

背景 首先&#xff0c;读这篇文章的时候你应该先了解什么是事务、什么是分布式事务。 我这里举2个例子&#xff0c;典型场景有两个&#xff1a; 1、一个应用有两个数据库&#xff0c;一个数据库是订单&#xff0c;另一个数据库是积分&#xff0c;要求下订单的时候同时给用户积…
阅读更多...
el-table添加固定高度height后高度自适应

el-table添加固定高度height后高度自适应

0 效果 1 添加自定义指令 新建目录src/directive/el-table 在el-table目录下新建文件adaptive.js import { addResizeListener, removeResizeListener } from element-ui/src/utils/resize-event// 设置表格高度const doResize async(el, binding, vnode) > {// 获取表格…
阅读更多...
Vben admin - 表格组件合并单元格

Vben admin - 表格组件合并单元格

需求 最近在项目中有需求需要表格合并单元格&#xff0c;不但内容有合并的&#xff0c;操作列也需要合并&#xff0c;找遍vben官方例子&#xff0c;没有实现操作列合并的&#xff0c;只能硬着头皮实现&#xff0c;还好实现了&#xff0c;下面具体就是实现思路&#xff1b; 原…
阅读更多...
再获Gartner认可！持安科技获评ZTNA领域代表供应商

再获Gartner认可！持安科技获评ZTNA领域代表供应商

近日&#xff0c;全球权威市场研究与咨询机构Gartner发布了《Hype Cycle for Security in China, 2023&#xff08;2023中国安全技术成熟度曲线&#xff09;》报告&#xff0c;对2023年的20个中国安全技术领域的现状与发展趋势进行了详细的分析与解读。 其中&#xff0c;持安科…
阅读更多...
mac电脑视频处理推荐：达芬奇DaVinci Resolve Studio 18 中文最新

mac电脑视频处理推荐：达芬奇DaVinci Resolve Studio 18 中文最新

DaVinci Resolve Studio 18是一款专业的视频编辑、调色和后期制作软件&#xff0c;由Blackmagic Design开发。它被广泛应用于电影、电视和广告等行业&#xff0c;提供了全面的工具和功能&#xff0c;使用户能够进行高质量的影片制作和后期处理。 以下是DaVinci Resolve Studio…
阅读更多...
JAVA-GC日志打印配置详解

JAVA-GC日志打印配置详解

一、为什么要打印GC日志&#xff1f; 当服务出现内存飙高、卡顿宕机等等情况&#xff0c;有可能因为GC问题&#xff0c;所以要有日志进行排查。 二、命令详解 #打印GC详情信息 -XX:PrintGCDetails #打印GC时间戳 -XX:PrintGCDateStamps #打印触发GC原因信息 -XX:PrintGCCause …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023