用js寫的一個路由

WBOY
發布: 2016-09-25 09:24:20
原創
1237 人瀏覽過

前幾天在院子裡看了一個大牛用js寫了一個路由的,有一句代碼一直不知道怎麼回事,後來就自己寫了一個,寫的比較的粗糙,我覺得把麵向對象的思想都搞得亂七八糟的,不過功能實現了.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js实现路由</title>
</head>
<body>
    < a href=" " >white</ a>
    < a href="#/green" >green</ a>
    < a href="#/blue" >blue</ a>
    < a href="#/yellow" >yellow</ a>
</body>
</html>

<script>

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

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


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

</span></script>
  
登入後複製
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板