SPA(单页面应用)的简单实现

       一想到逼格满满的【网易云音乐】首页,所使用的技术是单页面应用,我就按捺不住,要好好会一会这何方神圣。
       通过在页面导航栏一通乱点,我们可以发现,url地址栏#后面的字符在不停变化,且每一次变化,页面会跟随着实现局部刷新,呈现出不同的内容。
       显然,实现SPA的全部技术:
       一是处理#后面的字符,
       二是局部刷新。
       总共就两个技术,那我们就悠着来。
       首先是#后面的字符,这通过一张图应该就能说明白。
SPA(单页面应用)的简单实现_第1张图片
       从上图我们可以得知,#后面的字符,其实是location对象的hash属性的值,即是说,我们可以轻松拿到这个#后面字符的变化值,代码如下:

var hash = location.hash;

       既然值能拿到,我们又如何通过代码去改变这个hash值呢?这更简单吧,直接一个a标签跳转不就轻松解决。

<a href="#zhangsan">张三a>;
<a href="#lisi">李四a>;
<a href="#wangwu">王五a>;

       到这里,第一个技术已经解决的差不多,还缺一个监听hash值变化的事件,其实猜也能猜出几分,因为老外起名都一个路子。
       hashchange,什么作用什么名,真没太多复杂的东西。
       通过hashchange事件,我们可以监视#后面字符,一旦发生改变,就会触发此事件,也是大家常说的URL 的锚部分。
       第一个技术大功告成,至于第二个技术,局部刷新,这属于AJAX(阿贾克斯)的内容,鄙人不才,刚好写了一篇文关于AJAX的实现原理以及封装,大家可以稍挪雅步前往。
       接下来就是废话少说,直接上代码的环节。
SPA(单页面应用)的简单实现_第2张图片
SPA(单页面应用)的简单实现_第3张图片

        
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>title>
    <style>
        a{
            text-decoration: none;
            color: #000;
            border: 1px solid maroon;
        }
        div{
            width: 300px;
            height: 300px;
            background-color: gray;
            margin-top: 10px;
            font-size: 20px;
        }
    style>
head>
<body>
<a href="#zhangsan">张三a>
<a href="#lisi">李四a>
<a href="#wangwu">王五a>
<div id="conment">div>


<script src="js/ajax-own.js">script>
<script>
    //通过hashchange事件来监听hash值的变化,直接使用onhashchange也是一样
    window.addEventListener('hashchange',function(){
        //拿到#后面的字符,即是URL的锚部分
        var hash = document.location.hash;
        //通过判断不同的hash值,从而请求不同的数据来渲染页面
        // 对switch不熟悉,使用if elseif  else 也是一样
        switch (hash){
            case '#zhangsan':
                    //这里是我封装的AJAX
                $.ajax({
                    url:'./json/zhangsan.json',
                    success:function(result){
                       document.getElementById('conment').innerText = result[0].name;
                    }
                });
            break;
            case '#lisi':
                $.ajax({
                    url:'./json/lisi.json',
                    success:function(result){
                        document.getElementById('conment').innerText = result[0].name;
                    }
                });
            break;
            case '#wangwu':
                $.ajax({
                    url:'./json/wangwu.json',
                    success:function(result){
                        document.getElementById('conment').innerText = result[0].name;
                    }
                });
            break;
            default :
                $.ajax({
                    url:'./json/zhangsan.json',
                    success:function(result){
                        document.getElementById('conment').innerText = result[0].name;
                    }
                });
        }
    });
script>
body>
html>

参考文章:AJAX的实现原理以及封装:
http://blog.csdn.net/u011032902/article/details/54728710

        若是有误人子弟的地方,务必指出,大谢大谢。
                                                                                ——龙猫村庄1号村民敬上!

你可能感兴趣的:(AngularJs)