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