单页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. BBS项目部署之数据库的处理

    一  数据库的处理: 1.1上传bbs.sql(数据库中的数据) 1.2在mysql中创建bbs库,并导入数据库SQL脚本 在mysqld的文件夹中: mysql> create databas ...

  2. 技术架构标杆(Certicom Security Architecture)对比思考——By Me at 20140408

    看到一家国外网络安全企业Certicom,官网链接:http://www.certicom.com/,可以作为很好的企业安全技术建构以及产品规划的标杆,下面我绘制了该公司的产品组合以及技术架构框图:

  3. 如何检测浏览器是否安装了Adblock,uBlock Origin,Adguard,uBlock等广告屏蔽插件

    由于我们网站上的广告经常被一些广告插件给屏蔽掉,上级给我下达了一个检测浏览器是否安装了屏蔽广告的插件的任务. 经过研究,借鉴,参考,整合了如下三种解决方案.   方案一: 利用广告插件通过对含有goo ...

  4. 学会JS的this这一篇就够了

    转自:http://www.imooc.com/article/1758 以前看某本书上讲: 掌握了JS中this的用法才算真正的跨过了JS的门槛 我深以为是!但是JS的this却并不是那么简单的内容 ...

  5. AtCoder Regular Contest 080 C - 4-adjacent

    地址:http://arc080.contest.atcoder.jp/tasks/arc080_a 题目: C - 4-adjacent Time limit : 2sec / Memory lim ...

  6. 2017浙江省赛 H - Binary Tree Restoring ZOJ - 3965

    地址:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3965 题目: iven two depth-first-search ...

  7. 51nod 1391 01串(hash+DP)

    题目链接题意:给定一个01串S,求出它的一个尽可能长的子串S[i..j],满足存在一个位置i<=x <=j, S[i..x]中0比1多,而S[x + 1..j]中1比0多.求满足条件的最长 ...

  8. C++之旅:拷贝构造与友元

    拷贝构造与友元 拷贝构造是在构造一个对象的时候将已有对象的属性拷贝给新的对象:友元可以让一个类的所有属性(主要是private)对特定的类开放 拷贝构造 如果没有复写拷贝构造函数,系统会帮我们默认生成 ...

  9. 使用自签名SSL证书配置HTTPS,解决浏览器提示不安全警告

    项目测试过程中需要将应用从HTTP升级到HTTPS,浏览了网上一些帖子,参考<WebLogic11g-单双向SSL配置(以Springside3为例)>一文使用openssl工具来自建CA ...

  10. dependency的scope

    scope作用域,一共有三种作用域:compile(编译).runtime(运行).test(测试) 备注:打包必经compile阶段 1.test        测试 2.compile  编译 打 ...