了解前端中的SPA

单页Web应用(single page web application,SPA),就是只有一张Web页面的应用,是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。

单页Web应用

单页Web应用(single page web application,SPA),就是只有一张Web页面的应用。单页应用程序 (SPA) 是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。[1]  浏览器一开始会加载必需的HTML、CSS和JavaScript,所有的操作都在这张页面上完成,都由JavaScript来控制。因此,对单页应用来说模块化的开发和设计显得相当重要。

特点

速度:更好的用户体验,让用户在web app感受native app的速度和流畅,

·MVC:经典MVC开发模式,前后端各负其责。

·ajax:重前端,业务逻辑全部在本地操作,数据都需要通过AJAX同步、提交。

·路由:在URL中采用#号来作为当前视图的地址,改变#号后的参数,页面并不会重载。

单页Web应用(single page web application,SPA)是当今网站开发技术的弄潮儿,很多传统网站都在或者已经转型为单页Web应用,新的单页Web应用网站(包括移动平台上的)也如雨后春笋般涌现在人们的面前,如Gmail、Evernote、Trello等。如果你是一名Web开发人员,却还没开发过或者甚至是没有听说过单页应用,那你已经Out很久了。

单页Web应用和前端工程师们息息相关,因为主要的变革发生在浏览器端,用到的技术其实还是HTML+CSS+JavaScript,所有的浏览器都原生支持,当然有的浏览器因为具备一些高级特性,从而使得单页Web应用的用户体验更上一层楼。关于单页应用的优点和缺点,网上讲解的文章有很多,这里就不展开论述了。 单页Web应用,顾名思义,就是只有一张Web页面的应用。浏览器一开始会加载必需的HTML、CSS和JavaScript,之后所有的操作都在这张页面上完成,这一切都由JavaScript来控制。因此,单页Web应用会包含大量的JavaScript代码,复杂度可想而知,模块化开发和设计的重要性不言而喻。

单页web应用开发流程

  • 用循环的视角审视Web应用开发
  • 框定一个一致的SPA图形用户界面(GUI)和模型
  • 将SPA的原则带回服务器端
  • 聚集于对合适的应用进行早期SPA开发

SPA协调的起点是认识到SPA与脚本和网页编程有关,而不是与后端应用有关。SPA的主要目标是围绕着Web 2.0页面时间交互原则重构Web应用,以便体验可容易地转化到多个设备中,并对用户有效。这意味着首先要抱着支持这样一个逻辑活动为目标来设计用户交互,该活动应该涉及单页面与一套脚本,实现一次加载并执行直到活动完成。

一旦用户交互设计完成,下一步就是框定一个本地状态或事件模型,该模型应能描述页面处理与用户的交互及与任何后端应用交互。尽管这并非不可能,但是开发与服务器端功能多组件交互的SPA会更加困难。

这会产生一种要对应用服务器进行重构的诱因,其目的是为了以1:1的比例来支持SPA。就最大程度上而言,该模型应该让自己的变量及命名空间本地化,并通过应用的服务器端与其他SPA交互。这是为了减少对于用本地SPA控制器或模型来在多个SPA之间保留状态的需求。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue中的$set的使用

    在我们使用vue进行开发的过程中,可能会遇到一种情况:当生成vue实例后,当再次给数据赋值时,有时候并不会自动更新到视图上去; 当我们去看vue文档的时候,会发...

    李文杨
  • 小程序没有返回按钮怎么办?

    如果你发现自己的小程序页面没有返回按钮,请检查是不是用的wx.redirectTo(OBJECT)进行的跳转,如果是那就把它改成wx.navigateTo(OB...

    李文杨
  • 使用vue-axios请求geoJson数据报错的问题

    最近的项目用到了echarts一个带有散点地图的图表,按照正常jquery写法应该使用ajax请求geojson的数据动态去切换地图,就像下面这样 $.get...

    李文杨
  • Spring-AOP实践 - 统计访问时间

    公司的项目有的页面超级慢,20s以上,不知道用户会不会疯掉,于是老大说这个页面要性能优化。于是,首先就要搞清楚究竟是哪一步耗时太多。 我采用spring aop...

    Ryan-Miao
  • 京东商品和评论的分布式爬虫

    众所周知,爬虫比较难爬取的就是动态生成的网页,因为需要解析 JS, 其中比较典型的 例子就是淘宝,天猫,京东,QQ 空间等。所以在我爬取京东网站的时候,首先需要...

    机器学习AI算法工程
  • 在Windows Server 2016 中启用 Flash

    最近在部署测试VMware Horizon,其控制台默认需要Flash,但是Windows Server 2016默认没有启用Flash,在原来Windows ...

    SuperDream
  • 数据地图系列3|散点图模拟数据地图

    今天是数据地图的第三篇——使用散点图模拟地图轮廓制作数据地图! 这一篇的地图制作思路,相对比较曲折,使用的是散点图的做法。 先用一组数据模拟地图经纬度,制作出...

    数据小磨坊
  • Python编写的开源Struts2全版本漏洞检测工具

    0x01 说明: 由于struts2框架频繁爆出漏洞,为方便安全从业人员检测并及时修复,遂将struts历史版本payload整合在一起(ST2-005至ST2...

    FB客服
  • iPhone X 适配手Q H5 页面通用解决方案

    对于手Q 中的各业务来说,受 Phone X 影响的 H5 页面挺多,应该采取什么快速有效的办法来应对呢?

    林焕彬
  • angular2路由预加载

    用户1437675

扫码关注云+社区

领取腾讯云代金券