SPA(单页面web应用程序)
单页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应用程序)的更多相关文章
- ABP示例程序-使用AngularJs,ASP.NET MVC,Web API和EntityFramework创建N层的单页面Web应用
		
本片文章翻译自ABP在CodeProject上的一个简单示例程序,网站上的程序是用ABP之前的版本创建的,模板创建界面及工程文档有所改变,本文基于最新的模板创建.通过这个简单的示例可以对ABP有个更深 ...
 - 通过Blazor使用C#开发SPA单页面应用程序(3)
		
今天我们来看看Blazor开发的一些基本知识. 一.Blazor组件结构 Blazor中组件的基本结构可以分为3个部分,如下所示: //Counter.razor //Directives secti ...
 - Java快速开发平台强大的代码生成器,JEECG 3.7.5 VUE+ElementUI SPA单页面应用版本发布
		
JEECG 3.7.5 VUE+ElementUI SPA单页面应用版本发布 此版本为Vue+ElementUI SPA单页面应用版本,提供新一代风格代码生成器模板,采用Vue技术,提供两套精美模板E ...
 - Javascript 与 SPA单页Web富应用
		
书单推荐 # <单页Web应用:JavaScript从前端到后端> http://download.csdn.net/detail/epubitbook/8720475 # <MVC ...
 - 快速了解SPA单页面应用
		
简要 SPA单页网页应用程序这个概念并不算新,早在2003年就已经有在讨论这个概念了,不过,单页应用这个词是到了2005年才有人提出使用,SPA的概念就和它的名字一样显而易懂,就是整个网站不再像传统的 ...
 - 由单页面web应用引发的企业应用问题
		
由于单页面web应用的流行,client与server端之间都对应的产生了一些微妙的变化,比方,client原来仅仅是用来展示页面和理清逻辑,而现在逐渐转变成了一个可以进入驱动状态的应用程序. 未来的 ...
 - AngularJs(SPA)单页面SEO以及百度统计应用(上)
		
只有两种人最具有吸引力,一种是无所不知的人,一种是一无所知的人 问:学生问追一个女孩总是追不上怎么办?回答:女孩不是追来的,是吸引来的,你追的过程是吸引女孩的过程,如果女孩没有看上你,再追都是没有用的 ...
 - 通过Blazor使用C#开发SPA单页面应用程序(1)
		
2019年9月23——25日 .NET Core 3.0即将在.NET Conf上发布! .NET Core的发布及成熟重燃了.net程序员的热情和希望,一些.net大咖也在积极的为推动.NET Co ...
 - 通过Blazor使用C#开发SPA单页面应用程序(2)
		
今天我们尝试创建一个默认的Blazor应用. 1.安装 .Net Core 3.0需要Visual Studio 2019 的支持. 安装.Net Core 3.0 预览版 SDK版本,注意预览版对应 ...
 
随机推荐
- nginx 哈希表结构图
 - Object-Detection中常用的概念解析
			
常用的Region Proposal Selective Search Edge Boxes Softmax-loss softmax-loss层和softmax层计算大致是相同的,softmax是一 ...
 - 再次学习javascript中的參数传递
			
javascript中的全部函数的參数传递都是依照值传递的,做了以下測试: function addTen(num){ num +=10; return num; } var count = ...
 - php用类生成二维码
			
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/qq1355541448/article/details/28630289 百度云盘里面已经有了.引用 ...
 - 003-shell 传递参数
			
一.概述 可以在执行 Shell 脚本时,向脚本传递参数,脚本内获取参数的格式为:$n.n 代表一个数字,1 为执行脚本的第一个参数,2 为执行脚本的第二个参数,以此类推…… 二.实例 以下实例我们向 ...
 - 从数学分析的角度来看Softmax
			
作者:无影随想 时间:2016年1月. 出处:https://zhaokv.com/machine_learning/2016/01/softmax-calculous-perspective.htm ...
 - python学习笔记(四)random 、json模块
			
一.模块简介 Python 模块(Module),是一个 Python 文件,以 .py 结尾,包含了 Python 对象定义和Python语句. 导入模块 import module #导入模块 f ...
 - 分布式存储系统 Ceph
			
你了解Ceph吗? Ceph是一种分布式存储系统,它可以将多台服务器组成一个超大集群,把这些机器中的磁盘资源整合到一块儿,形成一个大的资源池(PB级别),然后按需分配给应用使用. 那么你知道Ceph的 ...
 - ansible一些基本操作
			
一.介绍 特性 (1).no agents:不需要在被管控主机上安装任何客户端: (2).no server:无服务器端,使用时直接运行命令即可: (3).modules in any languag ...
 - 联想笔记本电脑的F1至F12键盘问题。怎么设置才能不按FN就使用F1
			
在BIOS中有相应调整开关,开机时进入BIOS----CONFIG----Keyboard/Mouse----Change to "f1-f12 keys"选项设置为Legacy ...