什么是spa？
spa是放松保养疗法，中文也称水疗，然而比较偏向专业美容结合休闲而没有医学上的治疗意义，因此和某些烧烫伤患者在医院接受的水疗并不同。
哈哈，这个是“偏洗脚”类的意义，不开玩笑了。
单页应用程序 (SPA)是一种网页应用程序或网站，适合单个网页，目的是提供一个和桌面应用程序相似的用户体验。在一个单页面应用中，无论是所需要的代码是HTML、JavaScript还是CSS都在一次页面加载中获取，或者通常根据用户动作动态加载合适的资源并按需要加入到网页中。尽管位置的Hash或HTML5历史API可用于在应用中提供独立逻辑页的感性和导航，网页在这个过程中不会重新加载，也不控制跳转到另一个网页。和单页面应用交互通常会涉及到和网络服务器动态通信。
怎么实现呢？
技术类的文章不要多言，直接看代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="show">test</div>
<button data-id="test1">test1</button>
<button data-id="test2">test2</button>
<button data-id="test3">test3</button>
<script>
window.onload = function () {
show = document.getElementById( 'show' );
var defaultShowHTML = show.innerHTML;
var btns = document.getElementsByTagName( 'button' );
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = function(){
var id = this.getAttribute('data-id');
var components = document.getElementById( id );
show.innerHTML = components.innerHTML;
go( id );
}
}
function go( id ){
history.pushState( null, '', location.href.replace( /#.*/, '' ) + '#' + id );
}
function init(){
var components = location.hash.replace( '#', '' );
document.getElementById( 'show' ).innerHTML = ( document.getElementById( components ) && document.getElementById( components ).innerHTML ) || defaultShowHTML;
}
window.addEventListener('hashchange', init, false);
init();
}
</script>
<script type="text/html" id="test1">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing.</h1>
</script>
<script type="text/html" id="test2">
<h1>Lorem ipsum dolor sit.</h1>
</script>
<script type="text/html" id="test3">
<h1>Lorem ipsum.</h1>
</script>
</body>
</html>
实现的关键点是什么？
- pushState的使用方法
- hashchange的事件监听
- 将dom结构放在script标签里
- 通过grunt将一个一个页面模板整合到一个文件
- 将dom结构放在script标签里，
type="text/somethingnotexist"//浏览器不识别这个MIME type就会忽略掉
为什么要这样实现单页面？
我主要是看到https://weui.io/是这样实现的，适不适合大规模的spa网站我没有研究。看截图：
注意
示例代码没有经过严格的兼容性测试，请不要在生产环境使用！具体demo看这里：http://git.oschina.net/zengxiaoluan/spa-with-script
