您的位置：首页 > Web前端 > JavaScript

用js写的一个路由(简单实例)

2016-09-24 13:52 417 查看

前几天在网上看了一个大牛用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实现简单路由器功能的方法

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： js 路由

相关文章推荐

新的分享

章节导航