单页web应用（SPA）的简单介绍
单页 Web 应用 (single-page application 简称为 SPA) 是一种特殊的 Web 应用。它将所有的活动局限于一个Web页面中，仅在该Web页面初始化时加载相应的HTML、JavaScript 和 CSS。一旦页面加载完成了，SPA不会因为用户的操作而进行页面的重新加载或跳转。而是利用 JavaScript 动态的变换HTML的内（采用的是div切换显示和隐藏），从而实现UI与用户的交互。由于避免了页面的重新加载，SPA 可以提供较为流畅的用户体验。得益于ajax，我们可以实现无跳转刷新，又多亏了浏览器的histroy机制，我们用hash的变化从而可以实现推动界面变化。
angularJS,是目前中最流行的mvvm框架，非常适合做SPA；与之类似的还有vueJS，backbone，extjs等。
hash值
即url中#号后面的部分。
<a href="target">go target</a>
......<div id="target">i am target place</div>驱动div显示隐藏的方式有很多种，比较好的选择为以下两种：
1.监听地址栏中hash变化驱动界面变化
2.用pushsate记录浏览器的历史，驱动界面发送变化
首先，我们画出三个div，它们实际上是作为三个界面存在界面上的，body作为界面外框容器，限制着它们的大小。为了给每个界面配对一个hash地址，我们给每个div配一个id，将hash地址与对应的选择器（id、class）建立链接关系，从而可以从hash变化值中操作界面。
window.onhashchange = function(){ //监听hash值变化，实现页面变换
var hash=window.location.hash;
changePage(hash);
}
function changePage(hash){
switch (hash)
{
case '#index':
url='partials/list.html';
break;
case '#newpage':
url='partials/newpage.html';
break;
case '#edit':
url='partials/edit.html';
break;
case '#view':
url='partials/view.html';
break;
}
$.ajax({ //根据hash值选择页面
type:'GET',
url:url,
//async:false,
success:function(data){
main.innerHTML=data;
}
});
}
单页web应用（SPA）的简单介绍的更多相关文章
- Javascript 与 SPA单页Web富应用
书单推荐 # <单页Web应用:JavaScript从前端到后端> http://download.csdn.net/detail/epubitbook/8720475 # <MVC ...
- 构建单页Web应用——简单概述
一.开发框架 ExtJS可以称为第一代单页应用框架的典型,它封装了各种UI组件,用户主要使用JavaScript来完成整个前端部分,甚至包括布局.随着功能逐渐增加,ExtJS的体积也逐渐增大,即使用于 ...
- 单页Web应用：
概念: Web应用程序: WEB应用程序一般是B(浏览器)/S(服务器)模式.Web应用程序首先是“应用程序”,和用标准的程序语言,如C.C++等编写出来的程序没有什么本质上的不同.然而Web应用程序 ...
- 构建单页Web应用
摘自前端农民工的博客 让我们先来看几个网站: coding teambition cloud9 注意这几个网站的相同点,那就是在浏览器中,做了原先“应当”在客户端做的事情.它们的界面切换非常流畅,响应 ...
- 简陋的 ASP.NET CORE 单页Web应用程序“框架”
我对ASP.NET CORE了解不多,不知道是不是重复造轮子,也或者什么也不是,这个Demo是这样的: 1.非常简单或者说原始:2.将单页Web应用增加了一个页(Page)概念(相当于MVC的 Vie ...
- 单页web应用是什么？它又会给传统网站带来哪些好处?
文章来源:<单页Web应用:JavaScript从前端到后端> 什么是单页应用? 单页应用是指在浏览器中运行的应用,它们在使用期间不会重新加载页面.像所有的应用一样,它旨在帮助用户完成任务 ...
- 单页Web应用优缺点
一.定义单页 Web 应用 (single-page application 简称为 SPA) 是一种特殊的 Web 应用.它将所有的活动局限于一个Web页面中,仅在该Web页面初始化时加载相应的HT ...
- 论单页Web应用和RESTful架构
单页Web应用 概述 单页Web应用并不是突然诞生的一门新技术,而是web展示的一种新的尝试.它将所有的动作局限于一个Web页面,在加载站点首页的时候就加载站点需要的JavaScript和CSS.单页 ...
- 单页应用（SPA，Single-page-App）和多页应用（MPA，Multi-page App）的区别
单页应用(SPA,Single-page-App)和多页应用(MPA,Multi-page App)的区别 参考博客:https://www.jianshu.com/p/4c9c29967dd6
随机推荐
- centos下cmake安装
步骤一.安装gcc等必备程序包(已安装则略过此步,用gcc -v检测) yum install -y gcc gcc-c++ make automake 步骤二.安装wget (已安装则略过此步) y ...
- u-boot 之配置分析 （2）
Makefile简要分析所有这些目录的编译连接都是由顶层目录的makefile来确定的. 1.在makefile中有: unconfig: @rm -f $(obj)include/config.h ...
- 反Secure Boot垄断：兼谈如何在Windows 8电脑上安装Linux
感谢HQSQ的投递一.自由软件基金会的呼吁上周,2012年将近结束的时候,自由软件基金会(FSF)发出呼吁,要求人们继续支持反Secure Boot垄断,希望签名者能达到5万人(目前是4万).我觉得, ...
- java 基本类库包的作用
tools.jar:工具类库,它跟我们程序中用到的基础类库没有关系. Jre库包含的jar文件(jdk1.6):resources.jar.rt.jar.jsse.jar.jce.jar.charse ...
- cpio的简单使用
有如下文件 # file boot.kylin boot.kylin: ASCII cpio archive (SVR4 with no CRC) extract: # cpio -i <boo ...
- 解决uploadify多图片上传部分图片丢失，且不提示任何错误的问题
这两天用到uploadify的flash版本进行批量图片上传并生成缩略图的功能,之前用uploadify用的好好的,这次突然出现了一个奇怪的问题. 问题描述如下:当我选择单个图片上传的时候,图片上传都 ...
- eclipse 提交作业到JobTracker Hadoop的数据类型要求必须实现Writable接口
问:在eclipse中的写的代码如何提交作业到JobTracker中的哪?答:(1)在eclipse中调用的job.waitForCompletion(true)实际上执行如下方法 connect() ...
- protected 和default的区别
default:包内可见,包外不可见 protected:包内可见,包外不可见,但是包外继承之后可见.
- c++中，bool与int 的区别
菜鸟一枚,为了观察区别,特地运行了下面几个语句 /*阅读程序回答问题, 1.bool类型的false对应数值?true呢? 2.非0整数对应bool型的?0呢? */ #include<iost ...
- HttpWebRequest与HttpWebResponse使用例子（转）
转自:http://www.jb51.net/article/28401.htm 在每个系统出写入报告错误代码(找个合理的理由,比如系统免费升级) -> 自家服务器接收并处理错误报告 -> ...