SPA是什么？

最新推荐文章于 2025-06-30 14:02:34 发布

转载最新推荐文章于 2025-06-30 14:02:34 发布 · 1k 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/amcy/p/9795722.html

文章标签：

最早单页面的应用无从知晓，在2004年，google的Gmail就使用了单页面。到了2010年，随着Backbone的问世之后，此概念才慢慢热了起来。

随着后来React、Angular、Vue的兴起，单页面应用才成了前端圈里人人皆知的架构模式。

接下来将通过对比传统页面应用和单页面应用来说明SPA具体是什么。

早期web应用的前后端交互模式是这样的，每个html作为一个功能元件，通过刷新、超链接、表单提交等方式，将页面组织起来后给用户提供交互。

后期很多流行的框架都是基于此模式进行设计的，比如 Ruby on Rails，Spring MVC，Express 等等

传统的web应用中，浏览器只是作为展示层，路由、服务调用、页面跳转都是服务端来处理的。也就是MVC的架构都是放在后端的，只有V这一层，将页面通过网络发送到浏览器端，渲染给用户。

传统的模式具有以下特点：

和传统应用相比较，单页面应用就是将MVC个架构搬到了前端来实现

控制器：将处理路由的功能放在前端，当浏览器的路由发生变化时，由控制器来响应其变化，指向其对应的处理逻辑（组件），最终将页面展现给用户。
视图：这一层就是功能元件，也就是单个的组件，当路由发生变化的时候由组件来处理，只处理变化的那部分，最后组织成页面。
数据层：单页面应用有自己的数据层定义，简化了后端服务的复杂度，后端只要提供公共的数据接口即可，而数据层会对数据服务API进行进一步的封装，然后提供数据给视图层。

如此看来单页面应用很像移动客户端，后端的精力就是提供高质量的、可复用的Rest API服务。

单页面应用的出现依然存在着争议性，我们该如何看待他的两面性呢？

单页面应用的优势：

无刷新体验：没有了令人诟病的页面频繁刷新，同时节约浏览器资源，路由响应比较及时，提升了用户的体验。
共享组件：前端组件化是将独立完整的功能模块封装到一个组件中，代码结构更加规范，便于代码维护，同时模块化后的组件可以在不同的场景中进行复用，极大地加快了迭代开发的速度。这也是为什么主流的前端框架都提倡组件化编程的原因。
共享API：给后端减负，前端加码的好处就是，前端能有一点口粮吃了（开玩笑，前端那么牛怎么能没饭吃呢？），前端担起家务的事，后端就可以安心地处理业务逻辑了，于是才能写出高质量并可共享的API，供自己或者其他的合作伙伴使用。一个优秀的产品背后，一定有一群出色的前端（小生脸皮太厚）。

单页面应用的劣势：

抬高了前端门槛：SPA模式的流行，引领了前端技术的飞速发展，与此同时对前端人员在学习和使用上的能力就有了更高的要求，同时工作量也增加了，前端想活的更好就要付出的更多，所以不要再以为前端就是切切图，画画页面这么简单。too young, too naive。
首次加载大量资源：既然只有一个页面显示，那许多功能元件（组件）所依赖的静态资源就需要在初次时进行加载，加载时间相对比较长。
不利于SEO：单页面应用，数据都是在前端进行渲染的，所以就影响了SEO。

原文：https://segmentfault.com/a/1190000011325283

转载于:https://www.cnblogs.com/amcy/p/9795722.html