单页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之间保留状态的需求。

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

  1. 说说移动前端中 viewport (视口)

    转载网络资源的文章:来源不详~~ 移动前端中常说的 viewport (视口)就是浏览器显示页面内容的屏幕区域.其中涉及几个重要概念是 dip ( device-independent pixel 设 ...

  2. 移动前端中viewport(视口) 转

    移动前端中常说的 viewport (视口)就是浏览器显示页面内容的屏幕区域.其中涉及几个重要概念是 dpi ( device-independent pixel 设备逻辑像素 )和 CSS 像素之间 ...

  3. 前端中的SEO

    前端中的SEO: mate.title META标签分两大部分:HTTP标题信息(HTTP-EQUIV)和页面描述信息(NAME). <Meta name="Keywords" ...

  4. 利用 SPICE 分析理解心电图前端中的右腿驱动

      [导读] 心电图(ECG)学是一门将心脏离子去极(ionic depolarization) 后转换为分析用可测量电信号的科学.模拟电子接口到电极/患者设计中最为常见的难题之一便是优化右腿驱动 ( ...

  5. 从前端中的IOC理念理解koa中的app.use()

    忙里偷闲,打开平时关注的前端相关的网站,浏览最近最新的前端动态.佼佼者,平凡的我做不到,但还是要争取不做落后者. 前端中的IoC理念,看到这个标题就被吸引了.IoC 理念,不认识呢,点击去一看,果然没 ...

  6. javaWeb - 2 — ajax、json — 最后附:后台获取前端中的input type = "file"中的信息 — 更新完毕

    1.ajax是什么? 面向百度百科一下就知道了,这里就简单提炼一下 Ajax即Asynchronous Javascript And XML(异步JavaScript和XML).当然其实我们学的应该叫 ...

  7. 前端中的事件循环eventloop机制

    我们知道 js 是单线程执行的,那么异步的代码 js 是怎么处理的呢?例如下面的代码是如何进行输出的: console.log(1); setTimeout(function() { console. ...

  8. c#的异步处理思路和vue前端中异步处理思路比较

    前语:目前工作在做的项目是前端基于vue的组件式开发,通过api接口调用,后端数据逻辑是一个c#实现的WCF服务 1.总结自己在c# .NET 4.5后的新异步方式  async搭配await来实现  ...

  9. 前端中的 IoC 理念

    背景 前端应用在不断壮大的过程中,内部模块间的依赖可能也会随之越来越复杂,模块间的 低复用性 导致应用 难以维护,不过我们可以借助计算机领域的一些优秀的编程理念来一定程度上解决这些问题,接下来要讲述的 ...

随机推荐

  1. lodash源码分析之Hash缓存

    在那小小的梦的暖阁,我为你收藏起整个季节的烟雨. --洛夫<灵河> 本文为读 lodash 源码的第四篇,后续文章会更新到这个仓库中,欢迎 star:pocket-lodash gitbo ...

  2. 程序员的自我救赎---1.4.1:核心框架讲解(DAL)

    <前言> (一) Winner2.0 框架基础分析 (二)PLSQL报表系统 (三)SSO单点登录 (四) 短信中心与消息中心 (五)钱包系统 (六)GPU支付中心 (七)权限系统 (八) ...

  3. python (5分钟实现一个游戏的屏蔽敏感字系统,)

    import datetime time=datetime.datetime.now() dirty= ['fuck','狗日的','犊子','麻批','仙人板板','R你妈','操你','草你',' ...

  4. 阿里云Centos7 apache配置

    其实很简单,主要是有坑. 首先填坑,在阿里云安全策略上开放要访问的端口,然后配置firewall添加对应端口开放. firewall-cmd --zone=public --add-port=8011 ...

  5. 例子:韩顺平JavaScript----JS乌龟抓小鸡游戏

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 微信小程序开发教程目录

    本系列教程是自己在工作中使用到而记录的,没有顺序之分 如有错误之处,请给与指正,也不希望误导了别人 微信小程序开发教程目录 微信小程序之注册和入门 微信小程序之HTTPS请求 微信小程序开发之选项卡 ...

  7. 浅谈JavaScript的面向对象程序设计(二)

    前面介绍通过Object构造函数或者字面量创建单个对象,但是通过这个的方法创建对象有明显的缺点:调用同一个接口创建多个实例,会产生大量的重复代码.怎么样解决? 工厂模式 工厂模式是软件工程领域经常使用 ...

  8. H2Engine游戏服务器设计之属性管理器

    游戏服务器设计之属性管理器 游戏中角色拥有的属性值很多,运营多年的游戏,往往会有很多个成长线,每个属性都有可能被N个成长线模块增减数值.举例当角色戴上武器时候hp+100点,卸下武器时HP-100点, ...

  9. Task log(未)

    Keyword: fatal, crash, dead, out of memory, oom, anr in, non-protected File: main ,sys ,crash

  10. HTML知识点总结之img、scirpt、link标签

    <img>元素 使用<img>可以在网页插入一个图片,但实际上<img>标签并不会在网页中直接插入图像,而是从网页上链接图像. <img>的主要属性 ( ...