优缺陷
SPA被人追捧是有道理的，但是它也有不敷之处。当然任何东西都有两面性，以下是卤煮总结的一些目前SPA的优缺陷：
优点：
1.无刷新界面，给用户体验原生的运用觉得
2.节省原生（android和ios）app开拓本钱
3.提高发布效率，无需每次安装更新包。这个对付ios开拓职员来说印象尤其深吧。
4.随意马虎借助其他有名平台更有利于营销和推广
5.符合web2.0的趋势
缺陷：
1.效果和性能确实和原生的有较大差距
2.各个浏览器的版本兼容性不一样
3.业务随着代码量增加而增加，不利于首屏优化
4.某些平台对hash有偏见，有些乃至不支持pushstate。（你懂的）
5.不利于搜索引擎抓取
框架一种开拓模式火起来之后，对应的框架会随之而起。像近几年比较火的angularJS,是目前中最盛行的mvvm框架，非常适宜做SPA；与之类似的还有vueJS，卤煮在项目中也用过，相对付前者比较轻量。还有早一些的backbone，供应最基本的mvc模式，其他的模块大小和细节得自己决定。最早打仗的该当是extjs吧，这头超级巨无霸在很早的时候被用来创建企业后台运用，如今也随着时期的变革做出了很多的改进。等等这些框架也好，库也好，都旨在为了更好的构建SPA运用而生的，它们优缺陷卤煮就不在此逐一提了。
hash值在此处提到一个比较主要的观点：URL中的井号。实在它只是浏览地址中的一个分外符号。在以前，我们常常用它来定位文档位置。例如以下代码：
<a href="target">go target</a>......<div id="target">i am target place</div>
点击a链接，文档会滚动到id为target的div的可视区域上面去。hash除了这个功能还有另逐一种含义：辅导浏览器的行为但不上传到做事器。大家都知道，改变url中的任何一个字符都会导致浏览看重新要求做事器，除了#号后面那段字符之外。以是，简而言之我们可以这样理解：改变#后面的值不触发网页重载，但会记录到浏览器history中去。
实现事理实现SPA的方法有很多，终归一种遵照一种原则，界面无刷新。如果要实现原生运用中类似许多不同页面切换的效果，我们采取的是div切换显示和隐蔽。而驱动div显示隐蔽的办法有很多种
1.监听地址栏中hash变革驱动界面变革
2.用pushsate记录浏览器的历史，驱动界面发送变革
3.直接在界面用普通事宜驱动界面变革
前两种办法较为普遍，由于它们的变革记录浏览器会保存在history中，可以通过回退/提高按钮找回，或者history工具中的方法掌握。末了一种方法是用普通事宜驱动的，没有改变浏览器的history工具，以是一旦用户按了返回按钮将会退到浏览器的主界面。以是，一样平常采取前两种办法。值得一提的是，在不支持hash监听和pushsate变革的浏览器中可以考虑用延时函数，一直得去监听浏览器地址栏中url发生的变革，从而驱动界面变革。
从零开始卤煮在良久之前的一篇博文用pushstate的变革做了一个小小的示例，大家可以在之前的博文中找到它。在这里，我们用监听hash变革的办法展示SPA是怎么样运行事情的，同时从零开始，搭建一个根本的SPA。帮助大家理解大略的单界面运用的事理。
首先，我们画出三个div，它们实际上是作为三个界面存在界面上的，body作为界面外框容器，限定着它们的大小。为了给每个界面配对一个hash地址，我们给每个div配一个id，讲hash地址与对应的选择器（id、class）建立链接关系，从而可以从hash变革值中操作界面。
<body><div id="A" class="a J-A">A</div><div id="B" class="b J-B">B</div><div id="C" class="c J-C">C</div></body>
接下来，为它们添加样式，每个div都是全屏的，一开始只有A界面显示，其他的都隐蔽之：
body { height: 500px; width: 100%; margin: 0; padding: 0;}div { width: 100%; height: 100%; position: absolute; font-size: 500px; text-align: center; display: none;}.a { background-color: pink; display: block;}.b { background-color: red;}.c {background-color: gray;}
现在我们给网页添加上行为，首先须要知道的一点是，hash指即地址栏中#号后面的字符串，它的改变不会引起界面的刷新，但是会出发onhashchange事宜，我们要做的便是监听这个事宜：
function hashChanged(hashObj) { //变革之后的url var newhash = hashObj.newURL.split('#')[1]; //变革之前的url var oldhash = hashObj.oldURL.split('#')[1]; //将对应的hash下界面显示和隐蔽 document.getElementById(oldhash).style.display = 'none'; document.getElementById(newhash).style.display = 'block';}//监听路由变革window.onhashchange = hashChanged;
目前，只须要以上的代码，我们便可以完成一个最大略的SPA，通过地址栏的变革，界面会相应地变革。当然，除了手动在地址栏里面改变hash的变革，我们也可以用代码改变它的变革,从而推动界面变革，下面是两种办法的效果图：
可以看到，左边是在浏览器中直接修正hash引起了界面的变革，而右边则是通过代码掌握界面变革。这两种办法都可以在history中留下痕迹，从而当我们店家回退/提高按钮的时候追溯到之前的界面去。有些平台不许可我们去手动修正地址栏，（比如微信），那么我们一样平常采取第二种办法即可。况且，比较少的用户会去修正地址栏。
下面贴出所有的代码：
<!DOCTYPE html><html><head> <title></title> <style type="text/css"> body { height: 500px; width: 100%; margin: 0; padding: 0; } div { width: 100%; height: 100%; position: absolute; font-size: 500px; text-align: center; display: none; } .a { display: block; } .b { } .c { } </style></head><body> <div id="A" class="a J-A">A</div> <div id="B" class="b J-B">B</div> <div id="C" class="c J-C">C</div></body><script type="text/javascript">function hashChanged(hashObj) { //变革之后的url var newhash = hashObj.newURL.split('#')[1]; //变革之前的url var oldhash = hashObj.oldURL.split('#')[1]; //将对应的hash下界面显示和隐蔽 document.getElementById(oldhash).style.display = 'none'; document.getElementById(newhash).style.display = 'block';}//监听路由变革window.onhashchange = hashChanged;</script></html> SEO优化
由于我们在处理单页运用的时候页面是不刷新的，以是会导致我们的网页记录和内容很难被搜索引擎抓取到。搜索引擎抓取页面首先要遵照http协议，可是#不是协议内的内容。而实际上也是这样，我们没有见过搜索引擎的搜索结果中，哪一条记录可以快速定位到网页内的某个位置的。办理的方法是用 #!号代替#号，由于谷歌会抓取带有#!的URL。（Google规定，如果你希望Ajax天生的内容被浏览引擎读取，那么URL中可以利用"#!"(这种URL在一样平常页面一样平常不会产生定位效果)），这样我们可以办理ajax的不被搜索引擎抓取的问题。在vueJs里面，我们可以看到作者便是这样做的。
结束以上便是利用hash事理实现的一个很大略的SPA。当然，要实现项目中的单页运用，还有很多事情要做。比如传参，动画，异步资源加载的问题都是须要办理的。卤煮此处只是示范了一个很大略的例子，希望在做不繁芜又不想引入其他框架的同学供应一点思路。其余单页虽好，但不要乱用哦，根据项目的详细需求制订对应的办理方案而不是一味的追潮逐流。
