为什么用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. 高性能网络通信框架 HP-Socket v5.2.1

    项目主页 : http://www.oschina.net/p/hp-socket 开发文档 : http://www.docin.com/p-2079016612.html 下载地址 : https ...

  2. vue $refs 无法动态拼接，获取不到对象（转）

    原文地址: http://www.php.cn/js-tutorial-410304.html 本篇文章给大家带来的内容是关于vue $refs中不使用拼接的原因以及解决方法,有一定的参考价值,有需要 ...

  3. QT中QMainWindow、QWidget、QDialog

    QT中QMainWindow.QWidget.QDialog 简述 在分享所有基础知识之前,很有必要在这里介绍下常用的窗口-QWidget.QDialog.QMainWindow. 熟悉Qt的同学都应 ...

  4. 转载：Java Lock机制解读

    Java Lock机制解读 欢迎转载: https://blog.csdn.net/chengyuqiang/article/details/79181229 1.synchronized synch ...

  5. 简单封装Redis做缓存

    基于Redis封装一个简单的Python缓存模块 0. Docker Redis安装 参考: Get Docker CE for CentOS Docker 安装 Redis 安装Docker时错误s ...

  6. pycharm同步代码到coding

    代码同步coding三步曲: 1.pycharm的tips---vcs---checkout from version control---git 选择git后会弹出clone repository弹 ...

  7. 深入理解Java虚拟机读书笔记6----早期（编译期）优化

    六 早期(编译期)优化   1 “编译期”的含义     · 可能是指一个前端编译器把*.java文件转变成*.class文件的过程,前端编译器如:Sun的Javac.Eclipse JDT中的增量式 ...

  8. vue.js响应式原理解析与实现

    vue.js响应式原理解析与实现 从很久之前就已经接触过了angularjs了,当时就已经了解到,angularjs是通过脏检查来实现数据监测以及页面更新渲染.之后,再接触了vue.js,当时也一度很 ...

  9. part1

    一.hello world 明确的指出 hello.py 脚本由 python 解释器来执行.coding:utf-8处理脚本中的中文 #!/usr/bin/env python # _*_ codi ...

  10. 阿里云短信验证使用（PHP）

    1.登陆阿里云后台,事先添加签名和模板 2.使用composer下载阿里云SDK composer require alibabacloud/sdk 在PHP7.0下安装需要提前安装curl扩展 -c ...