单页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代码,复杂度可想而知,模块化开发和设计的重要性不言而喻。[2]

单页web应用开发流程

  • 用循环的视角审视Web应用开发

  • 框定一个一致的SPA图形用户界面(GUI)和模型

  • 将SPA的原则带回服务器端

  • 聚集于对合适的应用进行早期SPA开发[3]

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

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

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

SPA解释:单页应用程序的更多相关文章

  1. SPA (单页应用程序)

    单页Web应用 编辑 单页Web应用(single page web application,SPA),就是只有一张Web页面的应用.单页应用程序 (SPA) 是加载单个HTML 页面并在用户与应用程 ...

  2. Web API 2 入门——使用ASP.NET Web API和Angular.js构建单页应用程序(SPA)(谷歌翻译)

    在这篇文章中 概观 演习 概要 由网络营 下载网络营训练包 在传统的Web应用程序中,客户机(浏览器)通过请求页面启动与服务器的通信.然后,服务器处理请求,并将页面的HTML发送给客户端.在与页面的后 ...

  3. require实现单页应用程序(SPA)

    写了一个测试代码,用require.js配合它的一个插件text.js实现了最简单的单页应用程序,简单的记录一下,方便以后复习, git地址:https://github.com/lily1010/r ...

  4. 【ASP.NET MVC 5】第27章 Web API与单页应用程序

    注:<精通ASP.NET MVC 3框架>受到了出版社和广大读者的充分肯定,这让本人深感欣慰.目前该书的第4版不日即将出版,现在又已开始第5版的翻译,这里先贴出该书的最后一章译稿,仅供大家 ...

  5. Senna.js – 速度极快的单页应用程序引擎

    Senna.js 是一个速度超快的单页应用程序引擎,提供了几个低级别的 API,可以帮助你打造现代化的基于 Web 的应用程序.更重要的是,搜索引擎蜘蛛应该能够索引相同的内容. 通过使用 HTML5 ...

  6. 从头开始学eShopOnContainers——设置WebSPA单页应用程序

    一.简介 Web SPA单页应用程序需要一些额外的步骤才能使其工作,因为它需要在生成Docker镜像之前构建JavaScript框架依赖项和JS代码. 二.安装基础环境 1.安装NPM 为了能够使用n ...

  7. spa(单页应用)中,使用history模式时,微信长按识别二维码在ios下失效的问题

    spa(单页应用,vue)中,使用history模式时,微信长按识别二维码在ios下失效的问题. 触发条件: spa单页应用: 路由模式 history 从其他页面跳转到带有微信二维码识别的页面(不是 ...

  8. 最简单的SPA(单页应用)实现

    $(function(){ var replacePage = function(href, onFinish){ $.get(href,{},function(raw){ var data = ra ...

  9. 通过Blazor使用C#开发SPA单页面应用程序(1)

    2019年9月23——25日 .NET Core 3.0即将在.NET Conf上发布! .NET Core的发布及成熟重燃了.net程序员的热情和希望,一些.net大咖也在积极的为推动.NET Co ...

随机推荐

  1. 清除DataTable中的空行记录

    第一种方法: string filter = ""; ; i < dt.Columns.Count; i++) { ) filter += dt.Columns[i].Col ...

  2. 第1章 游戏之乐——让CPU占用率曲线听你指挥

    让CPU占用率曲线听你指挥 写一个程序,让用于来决定Windows任务管理器(Task Manager)的CPU占用率.程序越精简越好,计算机语言不限.例如,可以实现下面三种情况: CPU的占用率固定 ...

  3. Use Spring Insight Developer to Analyze Code, Install it with Tomcat, and Extend it with Plugins--转载

    原文地址:http://www.tomcatexpert.com/blog/2012/12/05/use-spring-insight-developer-analyze-code-install-i ...

  4. socketpair理解

    转载:http://liulixiaoyao.blog.51cto.com/1361095/533469/ 今天跟人谈到socketpair的问题,晚上回来写了个程序验证下自己的猜测! 先说说我的理解 ...

  5. 类型推导:函数模板与auto

    1.从函数模板谈起 函数模板的类型推导机制是在c++98时代就有的,auto的类型推导机制与其基本一致,所以先理解函数模板类型推导. 函数模板可以用如下代码框架表示: #template<typ ...

  6. 顺丰快递单号查询api对接(全代码)

    接口支持的消息接收方式:HTTP POST 请求方法的编码格式(utf-8):"application/x-www-form-urlencoded;charset=utf-8" 请 ...

  7. Handle类的用法

    android中Handle类的用法 当我们在处理下载或是其他需要长时间执行的任务时,如果直接把处理函数放Activity的OnCreate或是OnStart中,会导致执行过程中整个Activity无 ...

  8. D3D11 Query查询耗时

        确实的来说,这是个Debug/Profile的需求,在运行期这个时间毫无意义,有意义的是两帧之间走过了多少时间,而这个,可以用来查询某一个效果所用耗时,废话不多少,进入正题.     首先要创 ...

  9. json数据处理技巧(字段带空格、增加字段)

    1.json数据的正常取值:json[i].fieldName 2.json数据的字段带空格:eval('json[' + i + ']["' + field + '"]') 3. ...

  10. Linux常用命令之seq

    标题:seq命令的使用 作用:seq命令用于以指定增量从首数开始打印数字到尾数,即产生从某个数到另外一个数之间的所有整数,并且可以对整数的格式.宽度.分割符号进行控制 语法: [1] seq [选项] ...