用js寫的一個路由(簡單實例)

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

下面小編就為大家?guī)硪黄胘s寫的一個路由(簡單實例)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>js實現(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ī)淼挠胘s寫的一個路由(簡單實例)的全部內(nèi)容了，希望對大家有所幫助，多多支持腳本之家~

您可能感興趣的文章:

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

js
路由

相關(guān)文章

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