一、概念
①在一个页面上实现网站的大部分功能，就是单页面应用程序，是一种常见的网页开发模式。
②整个网站就只有一个Html文件，每次在切换页面时，不需要请求服务器，只要通过本地的js来切换即可。
这样可以减小服务器压力、增强用户体验，增加app的使用流畅性。
二、特点
①优点：
- 具有桌面应用的即时性、网站的可移植性和可访问性。
- 用户体验好、快，内容的改变不需要重新加载整个页面，web应用更具响应性和更令人着迷。
- 基于上面一点，SPA相对对服务器压力小。
- 良好的前后端分离。
SPA和RESTful架构一起使用，后端不再负责模板渲染、输出页面工作，web前端和各种移动终端地位对等，后端API通用化。
- 对前端人员javascript技能要求更高，促使团队技能提升。
②缺点：
- 分功能模块的鉴权不好实现。
- 不利于SEO搜索引擎优化
- 初次加载耗时相对增多
- 导航不可用，如果一定要导航需要自行实现前进、后退。
- 对开发人员技能水平、开发成本高。
三、具体应用
①单页应用肯定是要使用一些框架的，比如Vue、Angular、React等，但是使用 Vue、Angular、React 也不一定是做单页，做单页一定是前后端分离的方式，如果有 SEO 需求，则不要做成单页
②具体使用的网站：网易云音乐、coding、Gmail等
四、模拟单页应用
①historyAPI方案，参考之前的章：历史相关API
②哈希（路由）方案：使用location.hash和hashchange事件实现路由
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>模拟单页面应用</title>
<style>
*{
padding: 0;
margin: 0;
}
body{
background-color: #f7f7f7;
font-family: Arial, Helvetica, sans-serif;
}
header{
background: #242424;
border-bottom: #000;
}
.wrapper{
width: 1100px;
height: 70px;
margin: 0 auto;
}
.wrapper h1{
float: left;
width: 176px;
height: 69px;
background: url("topbar.png") no-repeat 0 0;
font-size: 0;
}
.wrapper ul{
list-style: none;
}
.wrapper ul li{
float: left;
height: 70px;
}
.wrapper ul li.now,
.wrapper ul li:hover{
background: red;
}
.wrapper ul li a{
padding: 0 20px;
display: block;
color: #fff;
line-height: 70px;
text-decoration: none;
}
.content{
width: 1100px;
margin: 0 auto;
font-size: 100px;
text-align: center;
}
</style>
</head>
<body>
<header>
<div class="wrapper">
<h1>网易云音乐</h1>
<ul>
<!-- 为了和普通的锚点作区分，所以这里的路径加了一个前缀# -->
<li><a href="#/">发现音乐</a></li>
<li><a href="#/my">我的音乐</a></li>
<li><a href="#/friend">朋友</a></li>
</ul>
</div>
</header>
<!-- 其它页面都需要显示在这个容器中 -->
<div class="container" id="container"></div>
<script src="jquery.js"></script>
<script>
// 通过注册 window.onhashchange 事件来监听 hahs（锚点）的改变
// url 地址发生改变之后,就解析 hash 中的路径标识
// 然后根据不同的路径标识渲染不同的页面到单页面中的容器中
window.onhashchange=function(){
var hash=window.location.hash.substr(1);//去除#
if(hash==='/'){
$.get('./find.html',function(data){
$('#container').html(data);
console.log(data)
});
}else if(hash==='/my'){
$.get('./my.html',function(data){
$('#container').html(data);
});
}else if(hash==='/friend'){
$.get('./friend.html',function(data){
$('#container').html(data);
});
}
}
</script>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）