前幾天在網上看了一個大牛用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寫的一個路由(簡單實例)的全部內容了，希望對大家有所幫助，多多支持VeVb武林網~
新聞熱點
疑難解答
