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

浏览器一开始会加载必需的HTML、CSS和Javascript,所有的操作都在这张页面上完成,都有javascript来控制。因此,对单页面应用来说模块化的开发和设计显得相当重要。

一、特点:

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

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

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

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

二、HTML容器管理

  1、HTML管理原理

  SPA项目的HTML结构与传统的HTML结构有非常不同的差异:

  ① 传统的HTML是将所有的HTML写在.html文件里。然后通过DOM方法在JS中进行操作。

  ② SPA项目中,为了保证每个UI模块的独立性,HTML结构被以模块的形式打碎分别放置在各个UI模块中。HTML以字符串的形式存放在子模块configMap.main_html中。当子模块接收到父模块传递过来的容器后通过$container.html(configMap.main_html);将子模块HTML结构载入到容器模块中。这样就完成了子模块HTML的加载。

参考来源:http://www.imooc.com/article/14257

http://www.searchsoa.com.cn/showcontent_81256.htm

SPA(单页面web应用程序)的更多相关文章

  1. ABP示例程序-使用AngularJs,ASP.NET MVC,Web API和EntityFramework创建N层的单页面Web应用

    本片文章翻译自ABP在CodeProject上的一个简单示例程序,网站上的程序是用ABP之前的版本创建的,模板创建界面及工程文档有所改变,本文基于最新的模板创建.通过这个简单的示例可以对ABP有个更深 ...

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

    今天我们来看看Blazor开发的一些基本知识. 一.Blazor组件结构 Blazor中组件的基本结构可以分为3个部分,如下所示: //Counter.razor //Directives secti ...

  3. Java快速开发平台强大的代码生成器,JEECG 3.7.5 VUE+ElementUI SPA单页面应用版本发布

    JEECG 3.7.5 VUE+ElementUI SPA单页面应用版本发布 此版本为Vue+ElementUI SPA单页面应用版本,提供新一代风格代码生成器模板,采用Vue技术,提供两套精美模板E ...

  4. Javascript 与 SPA单页Web富应用

    书单推荐 # <单页Web应用:JavaScript从前端到后端> http://download.csdn.net/detail/epubitbook/8720475 # <MVC ...

  5. 快速了解SPA单页面应用

    简要 SPA单页网页应用程序这个概念并不算新,早在2003年就已经有在讨论这个概念了,不过,单页应用这个词是到了2005年才有人提出使用,SPA的概念就和它的名字一样显而易懂,就是整个网站不再像传统的 ...

  6. 由单页面web应用引发的企业应用问题

    由于单页面web应用的流行,client与server端之间都对应的产生了一些微妙的变化,比方,client原来仅仅是用来展示页面和理清逻辑,而现在逐渐转变成了一个可以进入驱动状态的应用程序. 未来的 ...

  7. AngularJs(SPA)单页面SEO以及百度统计应用(上)

    只有两种人最具有吸引力,一种是无所不知的人,一种是一无所知的人 问:学生问追一个女孩总是追不上怎么办?回答:女孩不是追来的,是吸引来的,你追的过程是吸引女孩的过程,如果女孩没有看上你,再追都是没有用的 ...

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

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

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

    今天我们尝试创建一个默认的Blazor应用. 1.安装 .Net Core 3.0需要Visual Studio 2019 的支持. 安装.Net Core 3.0 预览版 SDK版本,注意预览版对应 ...

随机推荐

  1. linux多服务器之间的目录文件同步

    一.rsync是什么 在开始正式学习rsync之前,我们先来回答这个问题:rsync是什么. rsync(remote synchronize)是Liunx/Unix下的一个远程数据同步工具.它可通过 ...

  2. 基于Django的乐观锁与悲观锁解决订单并发问题的一点浅见

    订单并发这个问题我想大家都是有一定认识的,这里我说一下我的一些浅见,我会尽可能的让大家了解如何解决这类问题. 在解释如何解决订单并发问题之前,需要先了解一下什么是数据库的事务.(我用的是mysql数据 ...

  3. 001-linux scp文件拷贝

    scp是secure copy的简写,用于在Linux下进行远程拷贝文件的命令,和它类似的命令有cp,不过cp只是在本机进行拷贝不能跨服务器,而且scp传输是加密的.可能会稍微影响一下速度.当你服务器 ...

  4. Pytorch permute,contiguous

    permute(dims),常用的维度转换方法 将tensor的维度换位      参数:dim(int)---换位顺序 >>>x = torch.randn(,,) >> ...

  5. Apache Spark 2.0三种API的传说:RDD、DataFrame和Dataset

    Apache Spark吸引广大社区开发者的一个重要原因是:Apache Spark提供极其简单.易用的APIs,支持跨多种语言(比如:Scala.Java.Python和R)来操作大数据. 本文主要 ...

  6. UVA10954:Add All(优先队列)

    题目:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=68990#problem/O 题目需求:在数组中拿出两个数相加,再把结果放回数组中再 ...

  7. day5-正则表达式 re

    re模块用于对python的正则表达式的操作. 字符: . 匹配除换行符以外的任意字符 \w 匹配字母或数字或下划线或汉字 \s 匹配任意的空白符 \d 匹配数字 \b 匹配单词的开始或结束 ^ 匹配 ...

  8. 实现:左边为菜单导航,当一个菜单中包含多个Tabs,并且不同的Tab要根据权限的不同显示。

    1.前台代码 //当点击左侧菜单时,将访问Controller中的Home方法,这样就会根据用户权限的不同,通过后台的判断来决定显示的页面<li class="@(ViewBag.Se ...

  9. Linux系统——磁盘管理

    磁盘结构 (1)硬盘的物理结构 磁头:每面一个磁盘 盘片:硬盘有多个盘片,每个盘片2面 (2)硬盘的数据结构 扇区:盘片被分为多个扇形区域,每个扇形区存放512字节的数据 磁道:统一盘片不同半径的同心 ...

  10. smart基础原理

    1html模板页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...