什么是 SPA
SPA 是 Single Page App 的缩写。意思是“单页面应用”。指的不是本地应用，而是网站。传统的网站都是多页面的，每次点击一个链接就会打开一个新的页面。但是 SPA 是“单页面”的，意思是一旦我打开这个网站，这个“页面”就会一次性的下载到本地。SPA 页面给用户最直观的一个感受是，每次点击一个链接，页面是不会刷新的。所以用户体验更接近于本地应用，舒适感提高很多。需要注意的是，这里所谓的“单页面”指的是技术底层网站只有一个页面，但是从显示内容角度而言，一个 SPA 仍然可以展示多页内容的。
单页面应用：
单页Web应用（single page web application，SPA），就是只有一张Web页面的应用，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序，是指在浏览器中运行的应用，它们在使用期间不会重新加载页面。
为啥要写 SPA ？
简单来说，为了追求更高一层的用户体验。SPA 应用的特点是一次性的把页面显示逻辑都加载到了本地浏览器中，以后每次请求，服务器那边都是提供新的数据，而不再向以往一样传送 HTML 。所以，每次点一个链接，页面上能看到的是显示加载数据的转来转去小圈圈，而不是页面整个刷新。
实现SPA的全部技术：
一是处理#后面的字符，
二是局部刷新。
一：
从上图我们可以得知，#后面的字符，其实是location对象的hash属性的值，即是说，我们可以轻松拿到这个#后面字符的变化值，
var hash = location.hash;
二：
通过hashchange事件，我们可以监视#后面字符，一旦发生改变，就会触发此事件，也是大家常说的URL 的锚部分。
1.json:
{
"name":"zhangsan"
}
2.json:
{
"name":"lisi"
}
3.json:
{
"name":"wanguw"
}
代码如下：
<style>
a{
text-decoration: none;
color: #000;
border: 1px solid maroon;
}
div{
width: 300px;
height: 300px;
background-color: gray;
margin-top: 10px;
font-size: 50px;
color:red;
}
</style>
</head>
<body>
<!--实现SPA的全部技术：
一是处理#后面的字符，
二是局部刷新。
总共就两个技术-->
<a href="#zhangsan">张三</a>
<a href="#lisi">李四</a>
<a href="#wangwu">王五</a>
<div id="conment"></div>
<script src='../js/jquery-1.10.1.min.js'></script>
<script>
//通过hashchange事件来监听hash值的变化，直接使用onhashchange也是一样
window.addEventListener('hashchange',function(){
//拿到#后面的字符，即是URL的锚部分
var hash = document.location.hash;
//通过判断不同的hash值，从而请求不同的数据来渲染页面
// 对switch不熟悉，使用if elseif else 也是一样
switch (hash){
case '#zhangsan':
//这里是我封装的AJAX
$.ajax({
url:'json/1.json',
success:function(result){
var str = document.getElementById('conment');
str.innerText = result.name;
console.log(str.innerText);
}
});
break;
case '#lisi':
$.ajax({
url:'json/2.json',
success:function(result){
var str = document.getElementById('conment');
str.innerText = result.name;
console.log(str.innerText);
}
});
break;
case '#wangwu':
$.ajax({
url:'json/3.json',
success:function(result){
var str = document.getElementById('conment');
str.innerText = result.name;
console.log(str.innerText);
}
});
break;
default :
$.ajax({
url:'json/1.json',
success:function(result){
var str = document.getElementById('conment');
str.innerText = result.name;
console.log(str.innerText);
}
});
}
});
</script>
</body>
优点：
1、分离前后端关注点，前端负责界面显示，后端负责数据存储和计算，各司其职，不会把前后端的逻辑混杂在一起；
2、减轻服务器压力，服务器只用出数据就可以，不用管展示逻辑和页面合成，吞吐能力会提高几倍；
3、同一套后端程序代码，不用修改就可以用于Web界面、手机、平板等多种客户端；
缺点：
1、SEO问题，现在可以通过Prerender等技术解决一部分；
2、前进、后退、地址栏等，需要程序进行管理；
3、书签，需要程序来提供支持；
有兴趣的同学可以看看这篇文章：前端路由的实现方式
（前端小白，如有错误，欢迎指正~~）
2703
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
