单页 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>
 
点击a链接，文档会滚动到id为target的div的可视区域上面去。hash除了这个功能还有另一一种含义：指导浏览器的行为但不上传到服务器。大家都知道，改变url中的任何一个字符都会导致浏览器重新请求服务器，除了#号后面那段字符之外。所以，简而言之我们可以这样理解：改变#后面的值不触发网页重载，但会记录到浏览器history中去。
 

驱动div显示隐藏的方式有很多种，比较好的选择为以下两种：

1.监听地址栏中hash变化驱动界面变化

2.用pushsate记录浏览器的历史，驱动界面发送变化

 
如何搭建一个基础的SPA

首先，我们画出三个div，它们实际上是作为三个界面存在界面上的，body作为界面外框容器，限制着它们的大小。为了给每个界面配对一个hash地址，我们给每个div配一个id，将hash地址与对应的选择器（id、class）建立链接关系，从而可以从hash变化值中操作界面。

 <body>
　　<div id="A" class="a">A</div>
　　<div id="B" class="b" style="display:none;">B</div>
　　<div id="C" class="c" style="display:none;">C</div>
</body>
 
Hash的改变不会引起界面的刷新，但是会出发onhashchange事件，我们要做的就是监听这个事件：
 
 
 目前，只需要以上的代码，我们便可以完成一个最简单的SPA，通过地址栏的变化，界面会相应地变化。当然，除了手动在地址栏里面改变hash的变化，我们也可以用代码改变它的变化,从而推动界面变化，
 window.localtion.hash="A";
 
下面是一个利用$.ajax实现的单页面切换的例子：

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）的简单介绍的更多相关文章

  1. Javascript 与 SPA单页Web富应用

    书单推荐 # <单页Web应用:JavaScript从前端到后端> http://download.csdn.net/detail/epubitbook/8720475 # <MVC ...

  2. 构建单页Web应用——简单概述

    一.开发框架 ExtJS可以称为第一代单页应用框架的典型,它封装了各种UI组件,用户主要使用JavaScript来完成整个前端部分,甚至包括布局.随着功能逐渐增加,ExtJS的体积也逐渐增大,即使用于 ...

  3. 单页Web应用：

    概念: Web应用程序: WEB应用程序一般是B(浏览器)/S(服务器)模式.Web应用程序首先是“应用程序”,和用标准的程序语言,如C.C++等编写出来的程序没有什么本质上的不同.然而Web应用程序 ...

  4. 构建单页Web应用

    摘自前端农民工的博客 让我们先来看几个网站: coding teambition cloud9 注意这几个网站的相同点,那就是在浏览器中,做了原先“应当”在客户端做的事情.它们的界面切换非常流畅,响应 ...

  5. 简陋的 ASP.NET CORE 单页Web应用程序“框架”

    我对ASP.NET CORE了解不多,不知道是不是重复造轮子,也或者什么也不是,这个Demo是这样的: 1.非常简单或者说原始:2.将单页Web应用增加了一个页(Page)概念(相当于MVC的 Vie ...

  6. 单页web应用是什么？它又会给传统网站带来哪些好处?

    文章来源:<单页Web应用:JavaScript从前端到后端> 什么是单页应用? 单页应用是指在浏览器中运行的应用,它们在使用期间不会重新加载页面.像所有的应用一样,它旨在帮助用户完成任务 ...

  7. 单页Web应用优缺点

    一.定义单页 Web 应用 (single-page application 简称为 SPA) 是一种特殊的 Web 应用.它将所有的活动局限于一个Web页面中,仅在该Web页面初始化时加载相应的HT ...

  8. 论单页Web应用和RESTful架构

    单页Web应用 概述 单页Web应用并不是突然诞生的一门新技术,而是web展示的一种新的尝试.它将所有的动作局限于一个Web页面,在加载站点首页的时候就加载站点需要的JavaScript和CSS.单页 ...

  9. 单页应用（SPA，Single-page-App）和多页应用（MPA，Multi-page App）的区别

    单页应用(SPA,Single-page-App)和多页应用(MPA,Multi-page App)的区别 参考博客:https://www.jianshu.com/p/4c9c29967dd6

随机推荐

  1. ZOJ 3647 Gao the Grid dp,思路,格中取同一行的三点,经典 难度:3

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=4837 三角形的总数=格子中任取3个点的组合数-同一横行任取3个点数目-同一纵行 ...

  2. 安装arbotix simulator仿真环境（）

    先安装rbx1功能包: cd ~/catkin_ws/src git clone https://github.com/pirobot/rbx1.git cd rbx1 git checkout in ...

  3. Windows7下U盘安装Ubuntu14.04双系统

    1.准备工作 (1)下载Ubuntu14.04系统镜像文件,Ultraiso,EasyBcd,分区助手 Ubuntu14.04地址:http://www.ubuntu.com/download/des ...

  4. 线程系列4---sleep()和wait()方法区别

    2013-12-25 14:49:00 1. sleep()方法是Thread类的一个静态方法,可以在任意地方被调用,而wait()方法是object类的一个方法,只能在同步代码块或者同步方法里面,通 ...

  5. [开发笔记]-FireWorks常用操作快捷键

    一.工具快捷键 指针.选择后方对象[V],[0] 部分选定[A],[1] 选取框.椭圆选取框[M] 套索.多边形套索[L] 裁剪.导出区域[C] 魔术棒[W] 线条工具[N] 钢笔工具[P] 矩形.圆 ...

  6. wp8.1 Study6： App的生命周期管理

    一.概述 应用程序的生命周期详解可以参照Windows8.1开发中msdn文档http://msdn.microsoft.com/library/windows/apps/hh464925.aspx ...

  7. maven的简单安装与配置

    什么是Maven? Maven可以被理解成"知识的积累",也可以被翻译为"专家".它是一个项目管理工具. 它的主要服务即源于java平台的项目构建.依赖管理和项 ...

  8. URAL 1671 Anansi's Cobweb （并查集）

    题意:给一个无向图.每次查询破坏一条边,每次输出查询后连通图的个数. 思路:并查集.逆向思维,删边变成加边. #include<cstdio> #include<cstring> ...

  9. BestCoder Round #1

    逃生 反向拓扑+优先队列+逆序输出 这里要注意,题中要求的不是输出字典序,而是要编号小的尽量考前(首先1尽量考前,然后2尽量考前..). 比如说 约束是 4->1,3->2,字典序答案就是 ...

  10. ARC以及MRC中setter方法

    ARC以及MRC中setter方法的差异 有时候,你会需要重写setter或者getter方法,你知道么,ARC与MRC的setter方法是有着差异的呢. 先看下MRC下的setter方法: 在看下A ...