用js写的一个路由(简单实例)
前几天在网上看了一个大牛用js写了一个路由的,有一句代码一直不知道怎么回事,后来就自己写了一个,写的比较的粗糙,我觉得把面向对象的思想都搞得乱七八糟的,不过功能实现了。
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>js实现路由</title>
</head>
<body>
<ahref="">white</a>
<ahref="#/green">green</a>
<ahref="#/blue">blue</a>
<ahref="#/yellow">yellow</a>
</body>
</html>
<script>
functionRoute(){
}
Route.prototype.open=function(route,callback){
vararr={};
arr[route]=callback;
window.addEventListener('hashchange',function(){
vartemp=window.location.hash;
for(variinarr){
if(i==temp.slice(1,temp.length)){
arr[i]();
}
}
})
}
window.Route=newRoute();
functionchange(color){
varbody=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写的一个路由(简单实例)的全部内容了，希望对大家有所帮助，多多支持毛票票~
热门推荐
10 八一幼儿祝福语大全简短
11 公司乔迁食堂祝福语简短
12 婚礼结束聚餐祝福语简短
13 儿媳买车妈妈祝福语简短
14 毕业送礼老师祝福语简短
15 同事辞职正常祝福语简短
16 恭贺新婚文案祝福语简短
17 金店立秋祝福语简短英文
18 婆婆高寿祝福语大全简短