快捷導(dǎo)航

用js寫(xiě)的一個(gè)路由(簡(jiǎn)單實(shí)例)

更新時(shí)間：2016年09月24日 13:52:50 投稿：jingxian

下面小編就為大家?guī)?lái)一篇用js寫(xiě)的一個(gè)路由(簡(jiǎn)單實(shí)例)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

前幾天在網(wǎng)上看了一個(gè)大牛用js寫(xiě)了一個(gè)路由的,有一句代碼一直不知道怎么回事,后來(lái)就自己寫(xiě)了一個(gè),寫(xiě)的比較的粗糙,我覺(jué)得把面向?qū)ο蟮乃枷攵几愕脕y七八糟的,不過(guò)功能實(shí)現(xiàn)了。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>js實(shí)現(xiàn)路由</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>

  function Route(){
  }
  Route.prototype.open=function(route,callback){
    var arr={};
    arr[route]=callback;

    window.addEventListener('hashchange',function(){
      var temp=window.location.hash;
      for(var i in arr){
        if(i==temp.slice(1,temp.length)){
          arr[i]();
        }
      }
    })
  }
  window.Route=new Route();


  function change(color){
    var body=document.getElementsByTagName('body')[0];
    body.style.backgroundColor=color;
    console.log(color);
  }
  
  Route.open('/',function(){
    change('');
  });
  Route.open('/green',function(){
    change('green');
  });
  Route.open('/blue',function(){
    change('blue');
  });
  Route.open('/yellow',function(){
    change('yellow');
  });

</script>

以上就是小編為大家?guī)?lái)的用js寫(xiě)的一個(gè)路由(簡(jiǎn)單實(shí)例)的全部?jī)?nèi)容了，希望對(duì)大家有所幫助，多多支持腳本之家~

您可能感興趣的文章:

JS實(shí)現(xiàn)簡(jiǎn)單路由器功能的方法

js
路由

相關(guān)文章

JavaScript一元正號(hào)運(yùn)算符示例代碼
這篇文章主要給大家介紹了關(guān)于JavaScript一元正號(hào)運(yùn)算符的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-06-06
原生js實(shí)現(xiàn)放大鏡效果
本文主要分享了原生js封裝實(shí)現(xiàn)放大鏡效果的示例代碼，具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧
2017-01-01
js操作label給label賦值及取label的值示例
給label賦值以及取label的值，取值及賦值代碼如下，感興趣的朋友可以參考下
2013-11-11
判斷“命令按鈕”是否被鼠標(biāo)單擊詳解
在本篇文章里小編給各位分享的是關(guān)于判斷“命令按鈕”是否被鼠標(biāo)單擊的相關(guān)知識(shí)點(diǎn)內(nèi)容，有需要的朋友們參考下。
2019-07-07
javascript中[]和{}對(duì)象使用介紹
[]不僅僅可以表示數(shù)組，可以直接通過(guò)對(duì)象的屬性設(shè)置值和訪(fǎng)問(wèn)值，接下來(lái)為大家介紹下[]和{}對(duì)象的使用，感興趣的你可以參考下哈
2013-03-03
javascript原始值和對(duì)象引用實(shí)例分析
這篇文章主要介紹了javascript原始值和對(duì)象引用的方法,實(shí)例分析了javascript原始值和對(duì)象引用的功能、定義與相關(guān)技巧,需要的朋友可以參考下
2015-04-04
Javascript中this關(guān)鍵字指向問(wèn)題的測(cè)試與詳解
this是Javascript中一個(gè)非常容易理解錯(cuò)，進(jìn)而用錯(cuò)的特性。所以下面這篇文章主要給大家介紹了關(guān)于Javascript中this關(guān)鍵字指向問(wèn)題的相關(guān)資料，文中通過(guò)測(cè)試的題目考驗(yàn)大家對(duì)this的熟悉程度，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。
2017-08-08
js實(shí)現(xiàn)兼容IE和FF的上下層的移動(dòng)
本來(lái)是很簡(jiǎn)單的一個(gè)功能，可是一開(kāi)始弄的時(shí)候，還有IE能實(shí)現(xiàn)，F(xiàn)F總是不能實(shí)現(xiàn)，在網(wǎng)上看了半天，也沒(méi)弄出個(gè)所以然，所以在同事的幫忙下，總算弄出來(lái)了，瀏覽器的兼容性考的還是細(xì)節(jié)上面的東西，所有關(guān)于細(xì)節(jié)的，我會(huì)用注釋標(biāo)出來(lái)的。
2015-05-05
security.js實(shí)現(xiàn)的RSA加密功能示例
這篇文章主要介紹了security.js實(shí)現(xiàn)的RSA加密功能,結(jié)合實(shí)例形式分析了基于security.js進(jìn)行RSA加密的相關(guān)操作技巧,需要的朋友可以參考下
2018-06-06
微信小程序頂部導(dǎo)航欄可滑動(dòng)并選中放大
這篇文章主要介紹了微信小程序頂部導(dǎo)航欄可滑動(dòng)并選中放大,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-12-12