Maison >interface Web >tutoriel HTML >用js写的一个路由
前几天在院子里看了一个大牛用js写了一个路由的,有一句代码一直不知道怎么回事,后来就自己写了一个,写的比较的粗糙,我觉得把面向对象的思想都搞得乱七八糟的,不过功能实现了.
<meta charset="UTF-8"> <title>js实现路由</title> white a> green a> blue a> yellow a> <script> <span style="color: #0000ff;">function<span style="color: #000000;"> Route(){ } Route.prototype.open=<span style="color: #0000ff;">function<span style="color: #000000;">(route,callback){ <span style="color: #0000ff;">var arr=<span style="color: #000000;">{}; arr[route]=<span style="color: #000000;">callback; window.addEventListener('hashchange',<span style="color: #0000ff;">function<span style="color: #000000;">(){ <span style="color: #0000ff;">var temp=<span style="color: #000000;">window.location.hash; <span style="color: #0000ff;">for(<span style="color: #0000ff;">var i <span style="color: #0000ff;">in<span style="color: #000000;"> arr){ <span style="color: #0000ff;">if(i==temp.slice(1<span style="color: #000000;">,temp.length)){ arr[i](); } } }) } window.Route=<span style="color: #0000ff;">new<span style="color: #000000;"> Route(); <span style="color: #0000ff;">function<span style="color: #000000;"> change(color){ <span style="color: #0000ff;">var body=document.getElementsByTagName('body')[0<span style="color: #000000;">]; body.style.backgroundColor=<span style="color: #000000;">color; console.log(color); } Route.open('/',<span style="color: #0000ff;">function<span style="color: #000000;">(){ change(''<span style="color: #000000;">); }); Route.open('/green',<span style="color: #0000ff;">function<span style="color: #000000;">(){ change('green'<span style="color: #000000;">); }); Route.open('/blue',<span style="color: #0000ff;">function<span style="color: #000000;">(){ change('blue'<span style="color: #000000;">); }); Route.open('/yellow',<span style="color: #0000ff;">function<span style="color: #000000;">(){ change('yellow'<span style="color: #000000;">); }); </script>