用js写的一个路由

WBOY
发布: 2016-09-25 09:24:20
原创
1238 人浏览过

前几天在院子里看了一个大牛用js写了一个路由的,有一句代码一直不知道怎么回事,后来就自己写了一个,写的比较的粗糙,我觉得把面向对象的思想都搞得乱七八糟的,不过功能实现了.



    <meta charset="UTF-8">
    <title>js实现路由</title>


    white a>
    green a>
    blue a>
    yellow a>



<script>

    <span style="color: #0000ff;">function<span style="color: #000000;"> Route(){
    }
    Route.prototype.open=<span style="color: #0000ff;">function<span style="color: #000000;">(route,callback){
        <span style="color: #0000ff;">var arr=<span style="color: #000000;">{};
        arr[route]=<span style="color: #000000;">callback;

        window.addEventListener('hashchange',<span style="color: #0000ff;">function<span style="color: #000000;">(){
            <span style="color: #0000ff;">var temp=<span style="color: #000000;">window.location.hash;
            <span style="color: #0000ff;">for(<span style="color: #0000ff;">var i <span style="color: #0000ff;">in<span style="color: #000000;"> arr){
                <span style="color: #0000ff;">if(i==temp.slice(1<span style="color: #000000;">,temp.length)){
                    arr[i]();
                }
            }
        })
    }
    window.Route=<span style="color: #0000ff;">new<span style="color: #000000;"> Route();


    <span style="color: #0000ff;">function<span style="color: #000000;"> change(color){
        <span style="color: #0000ff;">var body=document.getElementsByTagName('body')[0<span style="color: #000000;">];
        body.style.backgroundColor=<span style="color: #000000;">color;
        console.log(color);
    }
    
    Route.open('/',<span style="color: #0000ff;">function<span style="color: #000000;">(){
        change(''<span style="color: #000000;">);
    });
    Route.open('/green',<span style="color: #0000ff;">function<span style="color: #000000;">(){
        change('green'<span style="color: #000000;">);
    });
    Route.open('/blue',<span style="color: #0000ff;">function<span style="color: #000000;">(){
        change('blue'<span style="color: #000000;">);
    });
    Route.open('/yellow',<span style="color: #0000ff;">function<span style="color: #000000;">(){
        change('yellow'<span style="color: #000000;">);
    });

</script>
  
登录后复制
相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板