什么是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