单页Web应用:
概念:
Web应用程序:
WEB应用程序一般是B(浏览器)/S(服务器)模式。Web应用程序首先是“应用程序”,和用标准的程序语言,如C、C++等编写出来的程序没有什么本质上的不同。然而Web应用程序又有自己独特的地方,就是它是基于Web的,而不是采用传统方法运行的。换句话说,它是典型的浏览器/服务器架构的产物。
理解了什么是浏览器/服务器架构,就了解了什么是Web应用程序。常见的计数器、留言版、聊天室和论坛BBS等,都是Web应用程序,不过这些应用相对比较简单,而Web应用程序的真正核心主要是对数据库进行处理,管理信息系统(Management Information System,简称MIS)就是这种架构最典型的应用。MIS可以应用于局域网,也可以应用于广域网。基于Internet的MIS系统以其成本低廉、维护简便、覆盖范围广、功能易实现等诸多特性,得到越来越多的应用。
Web app:
WebApp是指基于Web的系统和应用,其作用是向广大的最终用户发布一组复杂的内容和功能。
其实这些服务大多都是Web App。我常常这样问自己“这个程序是否完成了某个任务?”。即便它只完成了某个非常小的任务,那么它也是一个Web App。Google的搜索引擎就是一个Web App,它本质上和电话查询服务没有什么区别。
这样说来,也并非所有的网站都是Web App。如果这个网站并没有执行任何任务,那么它就并不是Web App。
单页Web应用:
SPA 是适合放在单个可滚动网页上的 Web 应用程序或网站,它们会动态地加载合适的内容来响应用户操作。它们支持在单个页面上与多个组件进行丰富的交互。
单页Web应用,顾名思义,就是只有一张Web页面的应用。浏览器一开始会加载必需的HTML、CSS和JavaScript,之后所有的操作都在这张页面上完成,这一切都由JavaScript来控制。因此,单页Web应用会包含大量的JavaScript代码,复杂度可想而知,模块化开发和设计的重要性不言而喻。
多页 Web 应用程序对比 SPA:
传统 Web 应用程序通常由静态内容组成,用户在页面之间导航时需要加载完整的页面并在客户端与服务器之间传输数据。
由于以一个页面的形式传送到浏览器,所以 SPA 不需要重新加载页面,甚至在客户从应用程序的一部分转移到另一部分时也不需要。
因为 SPA 将数据与数据的表示分开,所以它们可重绘UI 的任何部分,而不需要服务器往返传输来检索 HTML。因此,SPA 提供了更加流畅的用户体验,更快的导航,以及更高效的网络传输。
SPA的优势:
1、它提供了更加吸引人的用户体验。单页应用可以做到一举两得:桌面应用的即时性和网站的可移植性和可访问性。
2、单页应用可以和桌面应用一样渲染—单页应用只需要重绘界面上需要变化的部分。相比之下的传统网站,许多用户操作都会重绘整张页面,结果是当浏览器从服务器获取数据时,页面会假死并有“闪烁”现象,然后再重绘页面上的所有东西。如果页面很大,服务器又繁忙,或者网络连接很慢,这种“闪烁”现象会持续好几秒钟甚至是更长时间,用户只得猜测页面什么时候才可以再次使用。与单页应用的快速渲染和即时反馈相比,这是一种很恐怖的体验。
3、单页应用可以拥有和桌面应用一样的响应速度—尽可能地把(临时的)工作数据和处理过程从服务端转移到浏览器端,单页应用由此把响应时间减至最小。单页应用在本地拥有大多数需要决策判断的数据和业务逻辑,因此是很快的。只有数据验证、授权和持久存储必须要放在服务端,原因我们会在第6章到第8章中进行讨论。传统网站的大多数应用逻辑在服务端,对大部分的用户输入的响应,他们必须等待一个“请求/响应/重绘”的循环周期。与接近即时响应的单页应用相比,这需要花费几秒钟的时间。
4、单页应用和网站一样,也是跨平台的。
SPA的缺点:
1、SPA还有一些历史遗留问题(大部分是针对HTML5的改进)以及SEO。目前该技术还存在一些争议,但这并不是重点,因为这种类型的体系架构为SAAS Web Apps提供了一个极大的可用性。
2、对搜索引擎不友好,单页应用实际是把视图(View)渲染从Server交给浏览器,Server只提供JSON格式数据,视图和内容都是通过本地JavaScript来组织和渲染。而搜索搜索引擎抓取的内容,需要有完整的HTML和内容,单页应用架构的站点,并不能很好的支持搜索。
一个单页面Web应用程序就是一个Web应用程序,但结构不同。其中最重要的是:在第一次请求的时候,所有的标记语言(HTML)就已经传输到客户端,其余的请求都通过REST API获取JSON数据,数据的传输通过Web Socket API或远程过程调用。单页面应用程序可以说是分拆Web技术的最后一步——通过分离(css)内容,改进架构(XML和 XSLT)上的灵活性,调用服务器(AJAX)再到解压应用程序的导航页面结构。因此,这在Web发展中是个历史性的转折点。
单页Web应用程序的结构很简单:首先传递HTML文档框架;然后使用JavaScript修改页面;紧接着再从服务器传递更多数据然后再修改页面,如此循环。从性能的角度看,在现代浏览器中单页面Web App已经能够和普通应用程序相媲美,而且几乎所有的操作系统都支持现代的浏览器。使用HTML+CSS+Javascript编写应用程序,能使更多的人们都加入到程序开发的行列。
这足以说明,在Web设计过程中标志着Web将呈现一种新的趋势,它将一个分离的功能层作为API并将表示层用APP的形式体现出来 (HTML5或Native):
SPA中URL中的#号
单页应用只有一个页面,视图的变化通常是通过路由(route)来驱动,首先,我们先来谈一谈单页应用的URL中的#号,很多采用单元结构网站的URL都出现了这个符号。
#号在浏览器的URL中是一个锚点,在当前页改变#号的参数,页面会跳转到锚点所在的位置,通过JavaScript我们可以获取到#号后的参数:
改变#号后的参数,页面并不会重载,于是大多数的单页架构网站,都在URL中采用#号来作为当前视图的URL地址,例如:
符号#!,Twitter曾在URL使用这个标识。这个标识是Google提出(AJAX 抓取:网站站长和开发人员指南1):
因为复杂的单页架构页面,对Google来说抓取比较困难,于是给开发者制定一个规范:
1、网站提交sitemap给Google;
2、Google发现URL里有#!符号,例如example.com/#!/detail/1,于是Google开始抓取example.com/?_escaped_fragment_=/detail/1;
_escaped_fragment_这个参数是Google指定的命名,如果开发者希望把网站内容提交给Google,就必须通过这个参数生成静态页面。
如此以来,就需要Server通过生成静态的内容以便Google抓取。
以下将简单介绍,单页架构,爬虫访问根目录时如果配置Server端的路由。
判断爬虫
当Google访问119.28.4.22/#!/detail/1 时,会自动转化成http://119.28.4.22/?_escaped_fragment_=/detail/1,,以Nginx为例:
/api为后台服务的接口,已nodejs为例,代理设置如下:
如此,我们便将Google的访问重写到/api这个接口,然后在Server的/api处理请求把静态内容输出即可。
Sitemap
Google的这个规范,必须有sitemap支持,因为有可能单页架构的站点,索引页面也是JavaScript渲染的。提交sitemap时,不用关注_escaped_fragment_这个参数名,只提交带哈希符号的URL即可,例如:
技术潮流的步伐很快,单页应用,URL哈希处理也没渲染的方式实际上已经流行了很久,在国外很多用户数据较好的情况下,开发者会选择HTML5 History API的pushstate特性开发,在URL中抛弃#!。但是IE6、7等低端浏览器用户情况较多的网站,#能够很好的兼容。关于采用HTML5 History API来架构单页应用的方案,也欢迎讨论。
单页Web应用:的更多相关文章
- 单页web应用是什么?它又会给传统网站带来哪些好处?
文章来源:<单页Web应用:JavaScript从前端到后端> 什么是单页应用? 单页应用是指在浏览器中运行的应用,它们在使用期间不会重新加载页面.像所有的应用一样,它旨在帮助用户完成任务 ...
- 单页Web应用优缺点
一.定义单页 Web 应用 (single-page application 简称为 SPA) 是一种特殊的 Web 应用.它将所有的活动局限于一个Web页面中,仅在该Web页面初始化时加载相应的HT ...
- 构建单页Web应用
摘自前端农民工的博客 让我们先来看几个网站: coding teambition cloud9 注意这几个网站的相同点,那就是在浏览器中,做了原先“应当”在客户端做的事情.它们的界面切换非常流畅,响应 ...
- 单页web应用(SPA)的简单介绍
单页 Web 应用 (single-page application 简称为 SPA) 是一种特殊的 Web 应用.它将所有的活动局限于一个Web页面中,仅在该Web页面初始化时加载相应的HTML.J ...
- 论单页Web应用和RESTful架构
单页Web应用 概述 单页Web应用并不是突然诞生的一门新技术,而是web展示的一种新的尝试.它将所有的动作局限于一个Web页面,在加载站点首页的时候就加载站点需要的JavaScript和CSS.单页 ...
- 简陋的 ASP.NET CORE 单页Web应用程序“框架”
我对ASP.NET CORE了解不多,不知道是不是重复造轮子,也或者什么也不是,这个Demo是这样的: 1.非常简单或者说原始:2.将单页Web应用增加了一个页(Page)概念(相当于MVC的 Vie ...
- Javascript 与 SPA单页Web富应用
书单推荐 # <单页Web应用:JavaScript从前端到后端> http://download.csdn.net/detail/epubitbook/8720475 # <MVC ...
- 构建单页Web应用——简单概述
一.开发框架 ExtJS可以称为第一代单页应用框架的典型,它封装了各种UI组件,用户主要使用JavaScript来完成整个前端部分,甚至包括布局.随着功能逐渐增加,ExtJS的体积也逐渐增大,即使用于 ...
- 《单页Web应用--温故JavaScrpt》学习笔记整理
变量作用域,函数提升和执行环境对象 1. 变量作用域 在 JavaScript 中,变量 的 作用域 由 函数 限定,即:唯一能定义变量作用域的语块就是 函数. 变量 要么是全局的,要么是局部的. ...
随机推荐
- NSDate用法整理总结
int main(int argc, const char * argv[]) { @autoreleasepool { NSDate *date=[NSDate date]; NSLog(@&quo ...
- oracle本机登录不上dba的权限不足错误
说明:因遇到“sqlplus / as sysdba”登录oracle时遇到权限不足(ora-01031)错误:百度到以下资料,原文链接: http://www.xifenfei.com/2011/1 ...
- Java学习随笔1:Java是值传递还是引用传递?
Java always passes arguments by value NOT by reference. Let me explain this through an example: publ ...
- Linux学习笔记(21) Linux日志管理
1. 简介 (1) 日志服务 在CentOS 6.x中日志服务已经由rsyslogd取代了原先的syslogd服务.rsyslogd日志服务更加先进,功能更多.但是不论该服务的使用,还是日志文件的格式 ...
- Popupwindow 的简单实用,(显示在控件下方)
第一步: private PopupWindow mPopupWindow; 第二步:写一个popupwindow的布局文件XML <?xml version="1.0" e ...
- Eclipse如何替换android应用图标
打开你的项目 我们看到项目里有 res这个文件夹里有以下文件夹. drawable-hdpi -------高分辨率 drawable-ldpi -------中分辨率 drawab ...
- css整理-03 文本
缩进和水平对齐 缩进文本:text-indent 可以设置为负值 可以为所有块级元素应用,但无法应用到行内元素,图像之类的替换元素: 水平对齐: text-align left,center,righ ...
- this对象
this对象 1.纯粹的函数调用 function test(){ this.x = 1; alert(this.x); } test();//1 2.函数作为某个对象的方法进行调用,这是this ...
- 服装PDA软件|服装销售开单PDA管理软件|服装PDA管理系统|服装PDA点货系统|服装移动POS系统
浩瀚软件为了更好服务于广大批发客户群体进行销售.盘点.调拨配送等.深圳浩瀚软件推出基于无线网络版移动PDA销售开单系统.该系统支持无线3G.WIFI.GPRS系统,用户可以手持PDA在无线网络连接状态 ...
- delphi中VirtualStringTree树使用方法之终结篇!
VirtualStringTree 的用法详解:作者:张志宝go淘宝 例子:创建了一个树名为VirtualStringTree1,第一列显示数据库字段ID的值,标题为编号:第二列显示字段Name的值, ...