欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

spa单页应用解析

程序员文章站 2022-05-28 21:21:57
什么是单页应用 单页web应用,顾名思义,就是只有一张web页面的应用。一开始会加载必需的html、css和javascript,之后所有的操作都在这张页面上完成,这一切都由ja...

什么是单页应用

单页web应用,顾名思义,就是只有一张web页面的应用。一开始会加载必需的html、cssjavascript,之后所有的操作都在这张页面上完成,这一切都由javascript来控制。因此,单页web应用会包含大量的javascript代码,复杂度可想而知,模块化开发和设计的重要性不言而喻。这个时候框架的重要性就体现了。

单页应用的优缺点
优点:
1、具有桌面应用的即时性、网站的可移植性和可访问性。
2、用户体验好、快,内容的改变不需要重新加载整个页面,只需要加载部分内容。
3、基于上面一点,spa相对对服务器压力小。
4、良好的前后端分离。spa和restful架构一起使用,后端不再负责模板渲染、输出页面工作。
5、对前端人员javascript技能要求更高,促使团队技能提升。
6、同一套后端程序代码,不用修改就可以用于web界面、手机、平板等多种客户端;
缺点:
1、分功能模块的鉴权不好实现。
2、不利于seo。
3、初次加载耗时相对增多。
4、导航不可用,如果一定要导航需要自行实现前进、后退。
5、对开发人员技能水平、开发成本高

单页应用的实现方式
这里就不得不提到路由,路由有两种方式
1、history方式,h5提供的新特性。具体自己百度,这里不做介绍了
2、hash方式:我们经常在 url 中看到 #,这个 # 有两种情况,一个是我们所谓的锚点,比如典型的回到顶部按钮原理、github 上各个标题之间的跳转等,路由里的 # 不叫锚点,我们称之为 hash,大型框架的路由大多都是哈希实现的。具体的实现可以看vue的路由实现,写的非常好

单页应用的项目实例
开源项目ant design pro是一个学习单页应用非常好的例子,可以下载源码具体查看