单页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. Python并行编程(三):线程同步之Lock

    1.基础概念 当两个或以上对共享内存操作的并发线程中,如果有一个改变数据,又没有同步机制的条件下,就会产生竞争条件,可能会导致执行无效代码.bug等异常行为. 竞争条件最简单的解决方法是使用锁.锁的操 ...

  2. Python下的正则表达式原理和优化笔记

    摘要: 本文旨在总结一些编写表达式的技巧和原理.鉴于介绍python中re模块的使用方法的文章太多.所以本文在基础方面都是略过,而在回溯原理和一些技巧方面记录一点点学习总结. 目录:[ - ] 基础规 ...

  3. Mysql中字段类型之时间戳大坑

         一 .环境说明: 在目前项目中,有这样的一张表,用来记录会议的相关信息,例如:会议的内容.会议的参会人员.会议的地点.会议的状态(会议是否已结束.会议是否被撤销).会议的开始时间以及该条信息 ...

  4. Linux 2.6 内核阅读笔记 中断和异常

    2014年7月24日 中断门.陷阱门及中断门 中断是能够禁止的,能够通过告诉PIC停止对某个中断的公布.被禁止的中断是不会丢失的,在解除禁止后又会发送到CPU上. 禁止中断和屏蔽(mask)中断的不同 ...

  5. 2D游戏中的碰撞检测:圆形与矩形碰撞检测(Javascrip版)

    一,原理介绍 这回有点复杂,不过看懂了还是很好理解的.当然,我不敢保证这种算法在任何情况下都会起效果,如果有同学测试时,发现出现错误,请及时联系我. 我们首先来建立一个以圆心为原点的坐标系: 然后要检 ...

  6. 从原型链看DOM--Document类型

    JavaScript通过Document类型表示文档,原型链的继承关系为:document.__proto__->HTMLDocument.prototype->Document.prot ...

  7. PHP 基础篇 - PHP 错误级别详解

    一.前言 最近经常看到工作 2 年左右的童鞋写的代码也会出现以静态方法的形式调用非静态方法,这是个 Deprecated 级别的语法错误,代码里不应该出现的.对方很郁闷,说:为什么我的环境可以正常运行 ...

  8. 生信-RPKM与FPKM学习[转载]

    转自:https://baike.baidu.com/item/RPKM/1197657 均反应基因的表达水平 1.RPKM的计算公式 分母是总共比对到这个基因的reads的数目(条 为单位),分母是 ...

  9. 查看MySQL变量

    类似于Oracle的参数文件,MySQL的选项文件(如my.cnf)用于配置MySQL服务器,但和Oracle叫法不一样,在MySQL里, 官方叫变量(Varialbes),但其实叫参数也是可以的,只 ...

  10. 打开关闭oracle自动表分析

      oracle 表的统计信息,跟他的执行计划很有关联 执行计划的正常是否,跟SQL的执行速度很有关系 首先讲解一下如何查看一个数据库的是否开启自动统计分析 1.查看参数:STATISTICS_LEV ...