Single Page Application
-
single page web application,SPA,就是只有一张Web页面的应用,是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。
特点
单页web应用开发流程
- 用循环的视角审视Web应用开发
- 框定一个一致的SPA图形用户界面(GUI)和模型
- 将SPA的原则带回服务器端
- 聚集于对合适的应用进行早期SPA开发[3]
注意几个网站的相同点,那就是在浏览器中,做了原先“应当”在客户端做的事情。它们的界面切换非常流畅,响应很迅速,跟传统的网页明显不一样,它们是什么呢?这就是单页Web应用。
所谓单页应用,指的是在一个页面上集成多种功能,甚至整个系统就只有一个页面,所有的业务功能都是它的子模块,通过特定的方式挂接到主界面上。它是AJAX技术的进一步升华,把AJAX的无刷新机制发挥到极致,因此能造就与桌面程序媲美的流畅用户体验。
并不是所有的项目都适合spa
1. 你的应用需要被搜索引擎索引吗? 据我所知,目前所有的搜索引擎还是比较讨厌JavaScript的,也就是说你页面里面用ajax更新的动态内容搜索引擎是不能访问到的。所以如果你的网站需要依靠搜索引擎进行推广,还是传统一点比较好。
2. 你的应用需要浏览器的后退按钮吗?几乎所有的浏览器用户每天都在频繁的使用浏览器的后退按钮来查看自己刚刚浏览过的内容,但是如果你使用了AJAX进行局部刷新,浏览过的内容就不能用后退按钮重现了。目前我所知道的只有GWT使用了iframe的方法实现了后退按钮的功能:
<iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' ></iframe>,不过没有研究它的具体解决方法。
众所周知,Ajax可以实现页面的无刷新操作——优点;但是,也会造成另外的问题,无法前进与后退!曾几何时,Gmail似乎借助iframe搞定,如今,HTML5让事情变得如同过家家般简单。
当执行Ajax操作的时候,往浏览器history
中塞入一个地址(使用pushState
)(这是无刷新的);于是,返回的时候,通过URL或其他传参,我们就可以还原到Ajax之前的模样。
本demo所展示的就是ajax的内容载入与地址栏的前进与后退,典型应用,对于熟悉相关知识点很有帮助。
http://www.zhangxinxu.com/wordpress/2013/06/html5-history-api-pushstate-replacestate-ajax/
3. 你的应用想要用户收藏某个页面吗?AJAX单页应用的特点就是地址栏的url跟浏览器显示内容不是一一对应的关系,所以用户收藏的页面重新打开的时候显示的内容跟收藏时的内容可能是不一样的。
4. 你的应用页面很复杂吗?需要用ajax进行复杂页面的更新吗? ajax是使用xml, text等文本与服务端进行交互的,大量的传输不但影响系统的性能,对系统安全是也很大的威胁。
http://www.cnblogs.com/ppforever/p/5126640.html
http://www.cnblogs.com/ppforever/p/5126640.html
http://blog.csdn.net/jinhuiyu/article/details/4738719
Single Page Application的更多相关文章
- SPA(single page application)
一.SPA的概述 SPA(single page application)单页面应用程序,在一个完成的应用或者站点中,只有一个完整的html页面,这个页面有一个容器,可以把需要加载的代码片段插入到该容 ...
- Vue 单页面应用 SEO SPA single page application advantages and disadvantages
处理 Vue 单页面应用 SEO 的另一种思路 - muwoo - 博客园 https://www.cnblogs.com/tiedaweishao/p/7493971.html SPA网站SEO完美 ...
- 实现前后端分离,最好的方案就是SPA(Single Page Application)
从通常意义来讲,说到必须,就是指最佳实践上,实现前后端分离,最好的方案就是SPA.所以才会有 前后端分离=SPA 的近似,忽视了其中的差别.但是,既然有疑问了,我们就来看一下,为什么SPA是实现前后端 ...
- Xcode7 通过 Single View Application 得到一个 Empty Application 工程
方法: 创建一个 Empty Application 工程 下面还是详细的说一下通过一个 Single View Application 工程得到一个 Empty Application 工程的方法: ...
- single page
http://msdn.microsoft.com/zh-cn/magazine/cc507641.aspx#S7 http://blog.nodejitsu.com/scaling-isomorph ...
- How to Build a Search Page with Elasticsearch and .NET
Although SQL Server's Full-Text search is good for searching text that is within a database, there a ...
- 快速构建H5单页面切换骨架
在Web App和Hybrid App横行的时代,为了拥有更好的用户体验,单页面应用顺势而生,单页面应用简称`SPA`,即Single Page Application,就是只有一个HTML页面的应用 ...
- bootstrap + requireJS+ director+ knockout + web API = 一个时髦的单页程序
也许单页程序(Single Page Application)并不是什么时髦的玩意,像Gmail在很早之前就已经在使用这种模式.通常的说法是它通过避免页面刷新大大提高了网站的响应性,像操作桌面应用程序 ...
- Angular企业级开发(3)-Angular MVC实现
1.MVC介绍 Model-View-Controller 在20世纪80年代为程序语言Smalltalk发明的一种软件架构.MVC模式的目的是实现一种动态的程序设计,使后续对程序的修改和扩展简化,并 ...
随机推荐
- 从0开始的InfiniBand硬件踩坑过程
由于科学计算实验的需求,需要使用InfiniBand做一个持久性内存全互联的分布式存储系统.其中从网卡到交换机使用Mellanox全家桶,而在Mellanox网卡与交换机的使用过程中还是遇到了不少的问 ...
- 关于linux的一些常用的指令
top:命令经常用来监控linux的系统状况,比如cpu.内存的使用. free:观察内存使用. Find:查找指定的文件. Whereis:查找指定的文件源和二进制文件和手册等 Which:用于查询 ...
- 隐藏父类方法的new和重写父类虚方法virtual的区别
一.代码 public class Parent { public void Method_A() { Console.WriteLine("Parent Method_A"); ...
- GMTC全球大前端技术大会-未来已来
GMTC-2019北京 GMTC这次的大会的热词肯定是监控.性能,当然跨平台依然是热点,write once,run anywhere!,以下是自己参加的总结心得. 6.20上午 前端的演化 核心理念 ...
- python基础--冒泡排序
1.冒泡排序 1.首先用一张图来形象描述一下冒泡排序: 2.废话不多说,直接上代码 # 1.导入随机模块 import random # 2.定义一个列表,列表内的元素为20个100以内的随机整数 l ...
- js 页面跳转 新窗口打开
页面跳转:Window.showModalDialog(url,width,height); 弹出一个html文档的模式对话框Parent.window.document.location.href ...
- thinkphp5 自动注册Hook机制钩子扩展
Hook.php 文件已更新1.修复在linux环境下类的 \ 在basename 下无法获取到类名的问题2.修复linux 环境下无法使用hook::call 调用失败问题 请先安装thinkphp ...
- while/until/for 循环举例2
- lsyncd+rsync文件实时同步
1.rsync两端都需要安装 yum -y install rsync 2.提供lsyncd的安装源 rpm -ivh http://dl.fedoraproject.org/pub/epel/6/x ...
- js使用childnodes获取子节点时多了text节点
当我们获取标签的节点时如果使用childnodes发现它会把空格和回车都算着节点,明明里面才有3个节点,结果显示5个,而且childnodes[0]="text" 在IE浏览器中没 ...