通过script标签实现一个spa网站

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

作者: 曾小乱

喜欢写点有意思的东西

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据