SPA是什么?
认识SPA
最早单页面的应用无从知晓,在2004年,google的Gmail就使用了单页面。到了2010年,随着Backbone的问世之后,此概念才慢慢热了起来。
随着后来React、Angular、Vue的兴起,单页面应用才成了前端圈里人人皆知的架构模式。
接下来将通过对比传统页面应用和单页面应用来说明SPA具体是什么。
传统的页面应用
早期web应用的前后端交互模式是这样的,每个html作为一个功能元件,通过刷新、超链接、表单提交等方式,将页面组织起来后给用户提供交互。
后期很多流行的框架都是基于此模式进行设计的,比如 Ruby on Rails,Spring MVC,Express 等等
传统的web应用中,浏览器只是作为展示层,路由、服务调用、页面跳转都是服务端来处理的。也就是MVC的架构都是放在后端的,只有V这一层,将页面通过网络发送到浏览器端,渲染给用户。
传统的模式具有以下特点:
- 重服务端:浏览器只作为展示层,将MVC全置于后端,加重了服务端的体量,开发中主要以后端为主。
- 频繁刷新:页面展示依赖于不同的功能元件,所以必须依靠刷新页面,或者跳转路由来实现功能块的切换,这种方式严重耗费资源,同时用户体验很差。
单页面应用
和传统应用相比较,单页面应用就是将MVC个架构搬到了前端来实现
- 控制器:将处理路由的功能放在前端,当浏览器的路由发生变化时,由控制器来响应其变化,指向其对应的处理逻辑(组件),最终将页面展现给用户。
- 视图:这一层就是功能元件,也就是单个的组件,当路由发生变化的时候由组件来处理,只处理变化的那部分,最后组织成页面。
- 数据层:单页面应用有自己的数据层定义,简化了后端服务的复杂度,后端只要提供公共的数据接口即可,而数据层会对数据服务API进行进一步的封装,然后提供数据给视图层。
如此看来单页面应用很像移动客户端,后端的精力就是提供高质量的、可复用的Rest API服务。
单页面应用的出现依然存在着争议性,我们该如何看待他的两面性呢?
单页面应用的优势:
- 无刷新体验:没有了令人诟病的页面频繁刷新,同时节约浏览器资源,路由响应比较及时,提升了用户的体验。
- 共享组件:前端组件化是将独立完整的功能模块封装到一个组件中,代码结构更加规范,便于代码维护,同时模块化后的组件可以在不同的场景中进行复用,极大地加快了迭代开发的速度。这也是为什么主流的前端框架都提倡组件化编程的原因。
- 共享API:给后端减负,前端加码的好处就是,前端能有一点口粮吃了(开玩笑,前端那么牛怎么能没饭吃呢?),前端担起家务的事,后端就可以安心地处理业务逻辑了,于是才能写出高质量并可共享的API,供自己或者其他的合作伙伴使用。一个优秀的产品背后,一定有一群出色的前端(小生脸皮太厚)。
单页面应用的劣势:
- 抬高了前端门槛:SPA模式的流行,引领了前端技术的飞速发展,与此同时对前端人员在学习和使用上的能力就有了更高的要求,同时工作量也增加了,前端想活的更好就要付出的更多,所以不要再以为前端就是切切图,画画页面这么简单。too young, too naive。
- 首次加载大量资源:既然只有一个页面显示,那许多功能元件(组件)所依赖的静态资源就需要在初次时进行加载,加载时间相对比较长。
- 不利于SEO:单页面应用,数据都是在前端进行渲染的,所以就影响了SEO。
原文:https://segmentfault.com/a/1190000011325283
SPA是什么?的更多相关文章
- BI分析受阻?FineBI推出SPA螺旋式分析新功能!
过去,企业级的数据分析通常会有这么几种场景,业务部门托信息部门分析数据,结果报表一出,唇枪舌剑争论你我高低,数据不准,指标不对.信息部门欠缺业务概念,业务部门不懂技术逻辑,数据分析之路,暂时搁浅. 后 ...
- 【腾讯Bugly干货分享】基于 Webpack & Vue & Vue-Router 的 SPA 初体验
本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57d13a57132ff21c38110186 导语 最近这几年的前端圈子,由于 ...
- 如何快速开发SPA应用
前言 web早已经进入了2.0时代了,如今的网页大有往系统应用级别的方向发展的趋势,再也不是以前的简单展示信息的界面了.如今很多webapp已经做到了原生应用的功能,并且运用自身的优势逐步取代之.HT ...
- 使用backbone的history管理SPA应用的url
本文介绍如何使用backbone的history模块实现SPA应用里面的URL管理.SPA应用的核心在于使用无刷新的方式更改url,从而引发页面内容的改变.从实现上来看,url的管理和页面内容的管理是 ...
- AngularJS SPA Template For Visual Studio
单页面应用程序(SPA)[使用JavaScript.CSS和HTML强大的功能,可以构建一个单页面应用程序(SPAs)],它提供了丰富的用户体验页面.导航技术和AJAX提供必要的功能,而不用重新加载页 ...
- 移动前端开发-单页应用(spa)模型
一门新的技术诞生总会引来一番争议,单页Web应用程序也不例外,其最大的优势在于用户体验,对于内容的改动不需要加载整个页面:对服务器压力很小,消耗更少的带宽,与面向服务的架构更好地结合.使用HTML+C ...
- Single-page app(SPA)
有哪些值得推荐的一页式网站(Single-page app)? http://pro.weltrade.com/en/ 最近开到一下国外网站,一页到底,感觉很高大上,到底是怎么做出来的呢?技术要点是什 ...
- [译]ABP框架使用AngularJs,ASP.NET MVC,Web API和EntityFramework构建N层架构的SPA应用程序
本文转自:http://www.skcode.cn/archives/281 本文演示ABP框架如何使用AngularJs,ASP.NET MVC,Web API 和EntityFramework构建 ...
- 【读书笔记】WebApi 和 SPA(单页应用)--knockout的使用
Web API从MVC4开始出现,可以服务于Asp.Net下的任何web应用,本文将介绍Web api在单页应用中的使用.什么是单页应用?Single-Page Application最常用的定义:一 ...
- 使用node+vue.js实现SPA应用,nodevue.jsspa应用
使用node+vue.js实现SPA应用,nodevue.jsspa应用 http://www.bkjia.com/Javascript/1097617.html https://github.com ...
随机推荐
- Spring Cloud Consul综合整理
该项目通过自动配置和Spring环境以及其他Spring编程模型习惯用法提供了Spring Boot应用程序的Consul集成. 通过一些简单的注释,您可以快速启用和配置应用程序内的通用模式,并使用基 ...
- 11.5 临近csp·道别
差不多到写这个东西的时候了? 嗯,按今天的日期来算的话,还有不到十天就是csp.感觉对我这种家伙来说应该算是终结了? 放在之前的话肯定会写很多东西的,不过现在大约有点不知道写什么比较合适. 所以只是祝 ...
- javascript基础:dom
Dom: * 概念:Document Object Model 文档对象模型 * 将标记语言文档的各个组成部分,封装成对象,可以使用这些对象,对标记语言文档进行CRUD的动态操作 * D ...
- Blow up the city
Blow up the city 时间限制: 1 Sec 内存限制: 128 MB 题目描述 Country A and B are at war. Country A needs to organ ...
- 理解 Python 语言中的 defaultdict
众所周知,在Python中如果访问字典中不存在的键,会引发KeyError异常(JavaScript中如果对象中不存在某个属性,则返回undefined).但是有时候,字典中的每个键都存在默认值是非常 ...
- 15分钟构建超低成本数据大屏:DataV + DLA
第一步:准备低成本存储的业务数据和DLA表 OSS(https://www.aliyun.com/product/oss)是云上低成本数据存储的优选方案 DLA(https://www.aliyun. ...
- JQuery或JS判断浏览器内核版本号以及是否支持W3C盒子模型
jQuery 从 1.9 版开始,移除了 $.browser 和 $.browser.version , 取而代之的是 $.support .在更新的 2.0 版本中,将不再支持 IE 6/7/8. ...
- Java 基本数据类型 相互转换
int -> String String s=String.valueOf(12345); String -> int int i=Integer.parseInt("123&q ...
- java-异常处理1
概要图 异常讲解流程图 一 java 异常和错误层次图 1.1 图1 1.2 图2 二 异常生的过程 1 异常可以结束函数. 同时也让程序结束了. 三 异常和错误的发生和区别 Java运行时期发生的问 ...
- c++控制内存分配
为了满足应用程序对内存分配的特殊需求,C++允许重载new运算符和delete运算符控制内存分配,通过定位new表达式初始化对象(好处是可以在某些场景下避免重新内存分配的消耗) 1.operate n ...