Posted in Javascript onSeptember 24, 2016
前几天在网上看了一个大牛用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写的一个路由(简单实例)的全部内容了,希望对大家有所帮助,多多支持三水点靠木~
用js写的一个路由(简单实例)
- Author -
jingxian声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@