首页 > 程序开发 > web前端 > HTML/CSS >

spa单页应用解析

2018-08-02

spa单页应用解析。什么是单页应用 单页Web应用,顾名思义,就是只有一张Web页面的应用。浏览器一开始会加载必需的HTML、CSS和JavaScript,之后所有的操作都在这张页

什么是单页应用

单页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是一个学习单页应用非常好的例子,可以下载源码具体查看

相关文章
最新文章
热点推荐