用js写的一个路由-tutoriel HTML-php.cn

用js写的一个路由

WBOY

Libérer： 2016-09-25 09:24:20

original

1244 Les gens l'ont consulté

前几天在院子里看了一个大牛用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>

Copier après la connexion