单页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
随机推荐
- http://bootswatch.com/
http://bootswatch.com/ http://v3.bootcss.com/examples/dashboard/
- 一台服务器搭载两个tomcat项目
之前下载的mysql 在官网是有 历史库的 如果现在一台机器上已经部署了一个tomcat服务,无论这个tomcat是否已经注册为服务了,或者没有注册windows服务,或者注册了,都没关系.都可以采 ...
- tornado介绍
一.定义 tornado是一个异步非阻塞模型的服务器(tcp/http).web框架. 二.特性 1.高并发 原因:其一,网络事件循环部分根据操作系统选择最高效的,如Linux会是epoll: 其二, ...
- Spring学习笔记之BeanFactory
Spring bean container 的根接口,也是一个bean容器的基本功能,更深一步的接口像ListableBeanFactory 和 ConfigurableBeanFactory 都是 ...
- linux下一键安装 powershell,的bash脚本
说明 目前,linux下的powershell约等于pash.希望大家专注mono,关注pash. 一键安装脚本包括for centos6,centos7,ubuntu 14.04 ubuntu 1 ...
- ppurl
ppurl 就这么挂了?? 简直不敢相信 我才刚上不久,它竟然就这么挂啦??? 还是转到哪了? 有人知道吗? 表示我很愤怒,就好像当年新浪爱问共享就这么挂了一样 过了很久我才知道原来它转到新浪微盘了. ...
- DotNetBar v12.5.0.2 Fully Cracked
更新信息: http://www.devcomponents.com/customeronly/releasenotes.asp?p=dnbwf&v=12.5.0.2 如果遇到破解问题可以与我 ...
- C/C++中函数参数传递详解（二）
昨天看了内存管理的有关内容,有一点了解,但不是很深入,发现之前写代码时有很多细节问题没有注意到,只知道这样做可以实现功能,却不知道为什么可以这样,对于采用自己的方法造成的隐患也未知,更不晓得还有其他方 ...
- MapReduce数据流（二）
输入块(InputSplit):一个输入块描述了构成MapReduce程序中单个map任务的一个单元.把一个MapReduce程序应用到一个数据集上,即是指一个作业,会由几个(也可能几百个)任务组成. ...
- InterruptedException 线程异常
InterruptedException 这个异常一般发生在线程中,当一个正在执行的线程被中断时就会出现这个异常-! 简单的说就是:假如有两个线程,第一个线程正在运行,第二个没有运行,这时第二个线程启 ...