单页面应用程序(SPA)
一、概念
①在一个页面上实现网站的大部分功能,就是单页面应用程序,是一种常见的网页开发模式。
②整个网站就只有一个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>
单页面应用程序(SPA)的更多相关文章
- 通过Blazor使用C#开发SPA单页面应用程序(1)
2019年9月23——25日 .NET Core 3.0即将在.NET Conf上发布! .NET Core的发布及成熟重燃了.net程序员的热情和希望,一些.net大咖也在积极的为推动.NET Co ...
- 通过Blazor使用C#开发SPA单页面应用程序(3)
今天我们来看看Blazor开发的一些基本知识. 一.Blazor组件结构 Blazor中组件的基本结构可以分为3个部分,如下所示: //Counter.razor //Directives secti ...
- 单页面应用程序(SPA)的优缺点
我们通常所说的单页面应用程序通常通过前端框架(angular.react.vue)进行开发,单页面应用程序将所有的活动局限于一个Web页面中,仅在该Web页面初始化时加载相应的HTML.JavaScr ...
- SPA 单页面应用程序。
看到这个问题,先说下自己的理解到的程度,再去参考做修正,争取这一次弄懂搞清楚 自己的理解: 单页面应用程序,解决浏览器获取数据刷新页面的尴尬,通过ajax请求获取数据达到异步更新视图的按钮,原理的实现 ...
- Ember.js实现单页面应用程序
1.1.1 摘要 单页应用程序 (SPA) 是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序. SPA使用AJAX和HTML5创建流畅且响应迅速的Web应用程序,不会经常 ...
- Vue系列(1):单页面应用程序
前言:关于页面上的知识点,如有侵权,请看 这里 . 关键词:SPA.单个 HTML 文件.全靠 JS 操作.Virtual DOM.hash/history api 路由跳转.ajax 响应.按需加载 ...
- Vue(6)- Vue-router进阶、单页面应用(SPA)带来的问题
一.Vue-router进阶 回顾学过的vue-router,并参考官方文档学习嵌套路由等路由相关知识. 二.单页面应用(SPA)带来的问题 1.虽然单页面应用有优点,但是,如果后端不做服务器渲染(h ...
- Vue --6 router进阶、单页面应用(SPA)带来的问题
一.Vue-router进阶 回顾学过的vue-router,并参考官方文档学习嵌套路由等路由相关知识. 二.单页面应用(SPA)带来的问题 1.虽然单页面应用有优点,但是,如果后端不做服务器渲染(h ...
- Oracle JET 单页面应用程序Router 使用(上)
单页面应用程序:使用一个进加载一次的网页,如果页面由于用户的交互而改变,则仅绘制更改的页面部分. 要创建单页面应用程序需要使用 oj.Router 的虚拟导航来支持,ojModule 用来响应页面的重 ...
随机推荐
- -透明度中百分比与十六进制的对应关系 MD
目录 目录 透明度中百分比与十六进制的对应关系 计算代码 对应关系表 Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao ...
- 关于java中是引用传递还是值传递的问题
关于JAVA中参数传递问题有两种,一种是按值传递(如果是基本类型),另一种是按引用传递(如果是對象).首先以两个例子开始:1)public class Test2 { public static vo ...
- Calico网络模型
由于两台物理机的容器网段不同,我们完全可以将两台物理机配置成为路由器,并按照容器的网段配置路由表. 在物理机A中,我们可以这样配置:要想访问网段172.17.9.0/24,下一跳是192.168.10 ...
- .net Dapper 实践系列(2) ---事务添加(Layui+Ajax+Dapper+MySQL)
目录 写在前面 问题描述 解决方法 具体实现 写在前面 前面我们已经搭建好了项目,这一小节我们使用Dapper 中的事务实现一对多的添加操作. 问题描述 在做添加的时候很头疼需要从页面传递一组数据到后 ...
- 使用NPOI进行Excel操作
一.NPOI组件导入 右键项目菜单,“管理NuGet程序包” 直接搜索“NPOI”即会出现列表,下载第一个进行安装即可 安装完成后项目引用会出现以下几项 二.基础使用 添加引用 using NPOI. ...
- Java自学-操作符 三元操作符
Java的三元操作符 三元操作符 ?: 示例 1 : 三元操作符 语法:表达式?值1:值2 如果表达式为真 返回值1 如果表达式为假 返回值2 public class HelloWorld { pu ...
- 如何解决NoSuchMethodError
背景 工作中写单测,本来用的Mockito,但是为了mock方法里调用的其他静态方法,所以需要使用powermock,于是开始报错. 我把包引入了,然后照着网上的写单测代码,写完了之后运行.噩梦开始. ...
- vue-cli3使用svg
(根据网上教程实操,仅作个记录) 执行命令安装插件 npm install svg-sprite-loader --save-dev 在vue.config.js中,添加配置 module.expor ...
- 有价证券secuerity英语
证券业 证券业是为证券投资活动服务的专门行业.各国定义的证券业范围略有不同.按照美国的 “产业分类标准”,证券业由证券经纪公司.证券交易所和有关的商品经纪集团组成.证券业在世界各国都是一个小的产业部门 ...
- Github强制找回管理员账号密码
步骤: 1. 登录Github所在的服务器,切换用户为git:su git 2. 进入Github的Rails控制台:gitlab-rails console production 3. 查看超级管理 ...