为什么用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. Java 工程师成神之路 | 2019正式版

    本文为转载,原文见以下链接:https://mp.weixin.qq.com/s/4AMzq87V6eW3YPgE0mCdSw 1 基础篇 01 面向对象 → 什么是面向对象 面向对象.面向过程 面向 ...

  2. Resharper快捷键汇总

    编辑Ctrl + Space 代码完成 Ctrl + Shift + Space代码完成Ctrl + Alt + Space代码完成Ctrl + P 显示参数信息Alt + Insert 生成构造函数 ...

  3. Pandas学习笔记（三）

    (1)系列对象( Series)基本功能 编号 属性或方法 描述 1 axes 返回行轴标签列表. 2 dtype 返回对象的数据类型(dtype). 3 empty 如果系列为空,则返回True. ...

  4. Python课程第一天作业

    一.第一题:简述编译型与解释型语言的区别,且分别列出你知道的哪些语言属于编译型,哪些属于解释型? 计算机是不能理解高级语言的,更不能直接执行高级语言,它只能直接理解机器语言,所以使用任何高级语言编写的 ...

  5. PLSQL安装教程，无需oracle客户端（解决本地需要安装oracle客户端的烦恼）

    最近用笔记本开发,项目用的是Oracle数据库,不想本地安装Oracle客户端. 就只装了一个PLSQL 连接数据库的时候各种错误,现在解决了记录一下. 详细内容见  附件

  6. jinja2 把文本变成html

    data 是传过去的值 过滤器 | {{data.name | safe}}

  7. django2.0再写一行代码

    基础 @LTS长期支持 @django-admin startproject xxx python manage.py runserver python manage.py startapp xxx ...

  8. Git上传本地代码

    Git  add  .将本地文件上传至缓冲区 git   commit  -m  'project  init'  将代码上传至本地仓库 Git   push   将本地的代码传至线上(码云) git ...

  9. linux虚拟机长时间不用时间改回来的方法

    1. 时间和时区 地理课上我们都学过格林威治时间(GMT), 它也就是0时区时间,但是我们在计算机中经常看到的是UTC,它是Coordinated Universal Time的简写, 虽然可以认为U ...

  10. xcode9.4 报错 error:The resource could not be loaded because the App Transport Security policy requires the use of a secure connection.

    原因 http | https 协议  不能正常使用 找到的解决方案 但是在字段名上有了变化,不过复制进去 还是会自动选择对应的 解决办法 1. 在Info.plist中添加 App Transpor ...