了解前端中的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之间保留状态的需求。

时间: 2024-08-10 19:17:35

了解前端中的SPA的相关文章

移动前端中viewport(视口)

移动前端中常说的 viewport (视口)就是浏览器显示页面内容的屏幕区域.其中涉及几个重要概念是 dpi ( device-independent pixel 设备逻辑像素 )和 CSS 像素之间的关系. (1) layout viewport(布局视口) 一般移动设备的浏览器都默认设置了一个viewport 元标签,定义一个虚拟的layout viewport(布局视口),用于解决早期的页面在手机上显示的问题.iOS, Android基本都将这个视口分辨率设置为 980px,所以pc上的网

Lync Server 2013 部署 _ 前端中添加第二台Server&DNS轮询实现高可用

这一章介绍如何向Lync Server前端池中添加Lync服务器 Lync Server前端高可用实现方法三种,其实微软官网的方法只列出了两种,并且网络上的文章很多都强调了无法使用Windows自带的网络负载平衡进行高可用配置 DNS轮询,可分摊Lync Server的网络访问流量,这章节会介绍DNS轮询实现前端高可用 硬件负载平衡 Windows组件网络负载平衡,这个功能官网没有指出可以使用,并且网络上很多文章都说网络负载平衡这个组件不支持Lync Server前端高可用,我们将会通过Wind

前端中常见数据结构小结

常见数据结构的 JavaScript 实现系列 栈 队列 链表 集合 字典 哈希表 二叉树 图 前端与数据结构 数据结构在开发中是一种编程思想的提炼,无关于用何种语言开发或者是哪种端开发.下列将笔者涉猎到的与前端相关的数据结构案例作如下总结: 数据结构 案例 栈 FILO: 其它数据结构的基础,redux/koa2 中间件机制 队列 FIFO:其它数据结构的基础 链表 React 16 中的 Fiber 的优化 集合 对应 JavaScript 中的 Set 字典 对应 JavaScript 中

[转] 前端中的MVC

MVC是一种设计模式,它将应用划分为3个部分:数据(模型).展现层(视图)和用户交互(控制器).其中: M - MODEL(模型) V - VIEW(视图) C - CONTROLLER(控制器) 一个事件的发生是这样的过程: 1. 用户和应用产生交互. 2. 控制器的事件处理器被触发. 3. 控制器从模型中请求数据,并将其交给视图. 4. 视图将数据呈现给用户.不用类库或框架就可以实现这种MVC架构模式.关键是要将MVC的每部分按照职责进行划分,将代码清晰地分割为若干部分,并保持良好的解耦.这

web前端中实现多标签页切换的效果

在这里,实现多标签页效果的方法有两个,一个是基于DOM的,另一个是基于jquery的,此次我写的是一个对于一个电话套餐的不同,显示不同的标签页 方法一: 首先,我们要把页面的大体框架和样式写出来,html和css代码如下: <ul id="tab">    <li id="tab1" onclick="show(1)">10元套餐</li>    <li id="tab2" oncli

web前端中的Touch事件实例

例1.单个手指touch <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport"> &

前端中的MVC

MVC是一种设计模式,它将应用划分为3个部分:数据(模型).展现层(视图)和用户交互(控制器).其中: M - MODEL(模型) V - VIEW(视图) C - CONTROLLER(控制器) 一个事件的发生是这样的过程: 1. 用户和应用产生交互. 2. 控制器的事件处理器被触发. 3. 控制器从模型中请求数据,并将其交给视图. 4. 视图将数据呈现给用户.不用类库或框架就可以实现这种MVC架构模式.关键是要将MVC的每部分按照职责进行划分,将代码清晰地分割为若干部分,并保持良好的解耦.这

web前端中SQL介绍:

这是SOL中基础的认识和学习! 一.为什么要使用数据库. 1.降低数据的余度. 2.更高的数据一致性. 3.储存的数据可以共享. 4.可以建立数据库所遵循的标准. 5.便于维护数据的完整性. 6.能够实现数据的安全性.二.数据在数据库中的储存形式. 1.层次模型. 2.网状模型. 3.关系模型:以表的形式表现. 4.对象模型.三.表之间的关联关系存在三种基本的类型: 1:一对一关系. 2:一对多关系. 3:多对多关系.四.SOL语句: 1:数据定义语言(DDL) 2:数据查询语言(DQL) 3:

前端中事件的运用

在原生中事件调用就需要加上on,例如:onmouseenter,onclick, 但是由于jquery自己封装了,不属于原生,所以我们在调用事件的时候不会用到on $(document).ready(function(){ $(".parent").mouseenter(function(){ $(".child").animate({"width":"100%","height":"100%&q