单页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. django中同源策略和跨域解决方案

    一  同源策略 1.1何谓同源? 如果两个页面的协议,端口(如果有指定)和域名都相同,则两个页面具有相同的源. 举个例子: 下表给出了相对http://a.xyz.com/dir/page.html同 ...

  2. VirtualBox network / study environment setup for RHEL

    I re-visited the RHEL study material and setup the environment again, noted down the procedure. 1, c ...

  3. zabbix使用之常用功能使用心得

    ZABBIX 使用 Written by: Jane.Hoo 1.zabbix监控概念介绍 项目(iterm)定义收集被监控的数据项,如收集被监控机内存使用情况 应用集(application)一些项 ...

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

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

  5. PAT 1121 Damn Single[简单]

    1121 Damn Single (25 分) "Damn Single (单身狗)" is the Chinese nickname for someone who is bei ...

  6. linux文件修改管理

    Linux文件系统的层次结构 Linux文件系统的树状结构 目录是什么 顶层根目录的表示 文件系统中的两个特殊目录 Linux系统中的一些重要的目录 bin目录 sbin目录 家目录 dev目录 et ...

  7. win7 64bits下编译libjpeg库

    一.下载源代码.下载地址:http://www.ijg.org/.注意:一定要下载win32 版本二.编译源代码.       1.解压源代码,(不需要修改,修改报错)修改源代码中jconfig.vc ...

  8. idea构建一个简单的maven_web项目

    软件说明 好啦,开始创建mave的web项目啦!

  9. docker for spark

    项目需求,有一个spark-streaming的程序,读kafka的数据,需要构建一个不使用hadoop的spark 以下建立的镜像参考网络,可以稍加修改就可以使用不同的版本. 可单独启动master ...

  10. git 移除某个文件的版本管理

    1:最简单的,在项目刚创建的时候,在根目录的.gitignore,加入该文件的相对路径 2:已经被纳入到了版本控制,使用在当前目录下,打开cmd窗口 输入rm命令,加上文件的绝对路径(相对路径没试过) ...