- SPA单页面项目 概念：SPA（ single-page application ）仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS实现页面的渲染加载。一旦页面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转；取而代之的是利用路由机制实现 HTML 内容的变换，UI 与用户的交互、避免页面的重新加载。
优点：
用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染； 基于上面一点，SPA 相对服务器压力小； 前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据处理； 缺点：
初次加载耗时多：为实现单页 Web 应用功能及显示效果，需要在加载页面的时候将 JavaScript、CSS 统一加载，部分页面按需加载 前进后退路由管理：由于单页应用在一个页面中显示所有的内容，所以不能使用浏览器的前进后退功能，所有的页面切换需要自己建立堆栈管理； SEO 难度较大：由于所有的内容都在一个页面中动态替换显示，所以在 SEO 上其有着天然的弱势。 劣势解决：
SPA单页面应用实现前进与后退功能 前言：SPA单页面应用：在使用ajax与服务器数据交互过程中，实现局部数据的更新时，浏览器地址栏的url链接并没有发生改变，浏览器因为不会保存更新记录（浏览器会记录地址栏的url资源链接，如果url链接发生变化，浏览器会把该url链接保存到一个特殊的数据结构中，这样当用户点击返回与前进按钮时，会快速访问已经被记录的url链接资源。）。这时候再去返回就会出现非期待性的结果
- 解决方案：设置window.location.hash（location.hash）+ 监听window.onhashchange 1 //在ajax与服务器进行交互时，设置window.location.hash的值： function updateView (attr){ .ajax({ type:..., url:..., data:{attr : attr}, success:function(datas){ //设置hash值 window.location.hash = "#"+attr; //do somthing }, error:function(status){ //do somthing } }); } //attr 这个值最好是该次请求所需的参数 设置onhashchange事件监听 window.onhashchange=function(){ var attr=window.location.hash.replace("#",""); updateView (attr); } //但是上述这样单纯的只要用户点击第一页的视图，ajax请求成功后，会主动改变hash值，这时候又触发onhashchange，又一次更新视图，两次访问服务器。 //解决办法 //设置一个全局变量，记录hash值的改变是怎样引起的： var innerDocClick; ('body').on('mouseleave',function(){ innerDocClick=false;//鼠标在页面外（点击了返回按钮） }); $('body').on('mouseover',function(){ innerDocClick=true;//鼠标在页面内（没有点击返回按钮） });
window.onhashchange=function(){ if(!innerDocClick)//若点击了返回按钮 加条件判断去更改hash值 { var attr=window.location.hash.replace("#",""); updateView (attr); } }
