时间:2021-07-01 10:21:17 帮助过:4人阅读
前几天在网上看了一个大牛用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写的一个路由(简单实例)的全部内容了,希望对大家有所帮助,多多支持脚本之家~