单页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中执行定时任务对oracle备份(crontab命令)

    执行定时任务对oracle表数据备份: 1.创建sh脚本 [oracle@localhost ~]$ vi bak.sh 2.添加脚本内容 #!/bin/bash #:本脚本自动备份7天的数据库,每次 ...

  2. Kafka笔记整理(三):消费形式验证与性能测试

    Kafka消费形式验证 前面的<Kafka笔记整理(一)>中有提到消费者的消费形式,说明如下: .每个consumer属于一个consumer group,可以指定组id.group.id ...

  3. lnmp1.4环境下thinkphp3.2配置pathinfo模式

    1.打开php.ini 通常该文件在 /usr/local/php/etc/php.ini vi /usr/local/php/etc/php.ini 找到 cgi.fix_pathinfo,默认为0 ...

  4. IBM Java 7 新特性和在 WAS 8.5 中的配置【转载】

    IBM Java 7新特性以及在WAS V8.5 中的安装与版本切换 简介: 本文介绍了 IBM Java 7 的基本新特性以及 IBM 特有的新特性,并详细的介绍和分析了 JVM 所采用的新的垃圾回 ...

  5. MySQL数据库--练习

    学生选课系统 设计表关系 创建表和插入数据 /* Navicat MySQL Data Transfer Source Server : localhost_3306 Source Server Ve ...

  6. PKU 4334 Trouble(哈希)

    原题链接 思路:哈希存入相反数 注意:HDU不支持long long要使用__int64 #include<cstdio> #include<cstring> #define ...

  7. 54. Spiral Matrix(矩阵,旋转打印)

    Given a matrix of m x n elements (m rows, n columns), return all elements of the matrix in spiral or ...

  8. Python3 计算城市距离

    利用上一篇得到的城市经纬度算城市距离 import requests from math import radians, cos, sin, asin, sqrt def geocode(addres ...

  9. php项目代码 编码格式不对会大范围报错

    php项目代码 编码格式不对会大范围报错

  10. 20145331 《Java程序设计》第8周学习总结

    20145331 <Java程序设计>第8周学习总结 教材学习内容总结 14.NIO与NIO2 高级的输入输出处理,可以使用NIO(New IO),NIO2是文件系统的API Channe ...