为什么用SPA

1. 减少服务器压力  如果不用spa  那么每次切换页面的时候，就会向服务器发送一个请求

服务器返回一个html文件   如果使用了SPA  在切换时，不需要请求服务器，只要通过本地的js来切换即可 并且服务器端不需要配置路由 完全做到前后端分离

2. 增强用户体验  增加app流畅性

SPA路由的实现方式有哪些？

1. hash方式  使用location.hash和hashchange事件实现路由

2. history api  使用html5的history api实现  主要就是popState事件等

SPA实现hash

1. Router构造函数  当前路由 和 路由对象

2. 初始化init监听页面加载完成与   hash变化事件

3. 页面更新方法

4.  路由注册方法

SPA   history API实现方法

两个方法： history.pushState()  history.replaceState()

一个事件： history.onpopstate

方法的参数：

参数1： obj 这个对象可以被popstate事件读取到  也可以在history对象中获取

参数2： title标题， 但是浏览器目前还没能实现 由于本身是个字符串 所以我们用“” 来代替

参数3：URL路径，一般设定为相对的url 绝对路径需要保证同源

       pushState 向浏览器的历史记录栈中压入一个历史记录 

事件的触发： 

在浏览器前进、后退时触发，一般是历史记录栈中的指针改变的时候就会触发这个事件了

history.state: 存储以上方法的data，不同浏览器的读写权限不一样

兼容： >IE10, >firefox4 ,>chrome8, safari5,opera11以上

为什么要使用History API

ajax的不足：

　　无法使用浏览器的前进、后退来切换前后

数据

　　单纯的使用ajax不利于搜索引擎优化

SPA的更多相关文章

  1. BI分析受阻？FineBI推出SPA螺旋式分析新功能！

    过去,企业级的数据分析通常会有这么几种场景,业务部门托信息部门分析数据,结果报表一出,唇枪舌剑争论你我高低,数据不准,指标不对.信息部门欠缺业务概念,业务部门不懂技术逻辑,数据分析之路,暂时搁浅. 后 ...

  2. 【腾讯Bugly干货分享】基于 Webpack & Vue & Vue-Router 的 SPA 初体验

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57d13a57132ff21c38110186 导语 最近这几年的前端圈子,由于 ...

  3. 如何快速开发SPA应用

    前言 web早已经进入了2.0时代了,如今的网页大有往系统应用级别的方向发展的趋势,再也不是以前的简单展示信息的界面了.如今很多webapp已经做到了原生应用的功能,并且运用自身的优势逐步取代之.HT ...

  4. 使用backbone的history管理SPA应用的url

    本文介绍如何使用backbone的history模块实现SPA应用里面的URL管理.SPA应用的核心在于使用无刷新的方式更改url,从而引发页面内容的改变.从实现上来看,url的管理和页面内容的管理是 ...

  5. AngularJS SPA Template For Visual Studio

    单页面应用程序(SPA)[使用JavaScript.CSS和HTML强大的功能,可以构建一个单页面应用程序(SPAs)],它提供了丰富的用户体验页面.导航技术和AJAX提供必要的功能,而不用重新加载页 ...

  6. 移动前端开发-单页应用(spa)模型

    一门新的技术诞生总会引来一番争议,单页Web应用程序也不例外,其最大的优势在于用户体验,对于内容的改动不需要加载整个页面:对服务器压力很小,消耗更少的带宽,与面向服务的架构更好地结合.使用HTML+C ...

  7. Single-page app(SPA)

    有哪些值得推荐的一页式网站(Single-page app)? http://pro.weltrade.com/en/ 最近开到一下国外网站,一页到底,感觉很高大上,到底是怎么做出来的呢?技术要点是什 ...

  8. [译]ABP框架使用AngularJs,ASP.NET MVC,Web API和EntityFramework构建N层架构的SPA应用程序

    本文转自:http://www.skcode.cn/archives/281 本文演示ABP框架如何使用AngularJs,ASP.NET MVC,Web API 和EntityFramework构建 ...

  9. 【读书笔记】WebApi 和 SPA(单页应用)--knockout的使用

    Web API从MVC4开始出现,可以服务于Asp.Net下的任何web应用,本文将介绍Web api在单页应用中的使用.什么是单页应用?Single-Page Application最常用的定义:一 ...

  10. 使用node+vue.js实现SPA应用，nodevue.jsspa应用

    使用node+vue.js实现SPA应用,nodevue.jsspa应用 http://www.bkjia.com/Javascript/1097617.html https://github.com ...

随机推荐

  1. ubuntu16.04下latex环境搭建

    背景: 最近需要使用latex做一下简历~~~ 工具: sublime text3 (plugin: latextools) + texlive-full 配置: Preferences -> ...

  2. CSS ——padding

    css样式中使用padding(内边距)会将盒子撑开? 解决办法:在样式中添加box-sizing:border-box;

  3. LinkedHashMap和TreeMap的有序性

    做一个数组的多属性动态排序的功能,使用map时发现有序性问题. LinkedHashMap会存储数据的插入顺序,是进入时有序:TreeMap则是默认key升序,是进入后有序(hashMap .hash ...

  4. 线上CPU100%排查

    生产服务器上部署了几个java程序,突然出现了CPU100%的异常告警,你如何定位出问题? 这个问题分为两版回答!高调版对不起,我是做研发的,这个问题在生产上是不可能遇见的!因为研发是不可能直接操作生 ...

  5. IDEA 倒入maven项目下载很慢

    1.找到安装maven的路径 2.直接搜索settings.xml文件 <mirror> <!--This sends everything else to /public --&g ...

  6. sublimit 编辑器 设置默认的编码

    1.首选项>>设置 - 用户 2.加上:"default_encoding": "UTF-8"

  7. this 指向详细解析（箭头函数）

    前言 this 指向问题是入坑前端必须了解知识点,现在迎来了ES6时代,因为箭头函数的出现,所以感觉有必要对 this 问题梳理一下,遂有此文 在非箭头函数下, this 指向调用其所在函数的对象,而 ...

  8. BZOJ 3687: 简单题 bitset

    3687: 简单题 Time Limit: 10 Sec  Memory Limit: 512 MB[Submit][Status][Discuss] Description 小呆开始研究集合论了,他 ...

  9. update_db_inputs.conf

    #!/bin/bash#-------------------------------------------------------------------------------# Name: u ...

  10. API手册（2017）

    本页存放内容: API手册. 少量教程 [旧的工具页面] (是一些旧的页面.不放在外面了,这里做个索引) http://www.cnblogs.com/qq21270/p/3538677.html 常 ...