了解前端中的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 条评论
登录 后参与评论

相关文章

来自专栏PHP技术

什么是RESTful Web Service?

1. 什么是Restful 其实早在web service概念产生前就有了restful的概念,或者说restful是和Http一起诞生的。 可以参阅 Roy ...

33410
来自专栏大魏分享(微信公众号:david-share)

VMware软件定义数据中心分析工具介绍----第三终结篇

在本文连载的第一篇中,我向大家介绍了vROps的基本架构、vROps的指标含义,以及如何自定义告警。第二篇中,介绍了如何自定义仪表盘。在本篇中,我将介绍如何自定...

3358
来自专栏企鹅号快讯

理解正向代理与反向代理的区别

我们介绍了Nginx主要用来做反向代理,可能有些朋友并不很清楚什么是反向代理,本篇文章会介绍下反向代理和正向代理的不同之处: (一)正向代理 正向代理是一个位于...

1945
来自专栏小狼的世界

PHP开源Apache日志分析工具收集与比较

我们知道已经有很多像Awtstat这样的使用perl、c或者c++开发的强大的日志分析工具,但是同样也有很多使用PHP开发并且开源的日志分析软件,今天我就收集了...

722
来自专栏phodal

\b深入浅出全栈工程师: 提高效率的工具

节选自《Growth: 深入浅出全栈工程师》 在提交效率的N种方法里:有一个很重要的方法是使用快捷键。熟练掌握快捷键可以让我们随着自己的感觉编写程序——有时候如...

1666
来自专栏我是攻城师

理解正向代理与反向代理的区别

3205
来自专栏腾讯移动品质中心TMQ的专栏

专治时间长 —5分钟测试Android覆盖安装

一、痛点 ? 覆盖安装测试,作为一项基本的测试类型是不可或缺的。它存在的主要价值: 验证老版本覆盖升级到新版本,用户和系统数据能够正确迁移,以及保障用户升级后的...

24310
来自专栏存储

Storm集群搭建的错误分析

第一时间关注程序猿(媛)身边的故事 首先 storm 集群的搭建不再赘述, 网上有很多, 在此推荐一个: http://blog.csdn.net/lzm134...

1595
来自专栏向前进

【原创】最新的"答题热"中,前端的一点小工作

一、前言   据王思聪引爆全民HQ也3个星期了,总结下最新做的一个有关"答题热"的工具。并借由这个工具的开发,分析当下HybridApp中H5的一些技术。   ...

34010
来自专栏编程

Python让你自己做一个软件,自己开个聊天室,厉害吧!

内容 知识点 asyncore 、asynchat模块运用 环境 python 3.5 功能描绘 在本实验中,我们将实现一个简略的图形界面谈天系统。我们可以经...

2055

扫描关注云+社区