用js写的一个路由(简单实例)

2019-11-20 08:53:51

字体：大中小

来源：转载

供稿：网友

前几天在网上看了一个大牛用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>  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>

以上就是小编为大家带来的用js写的一个路由(简单实例)的全部内容了，希望对大家有所帮助，多多支持武林网~

上一篇：angular.js之路由的选择方法

下一篇：简单的js表格操作