js实现自定义路由
本文实现自定义路由，主要是事件hashchange的使用，然后根据我们的业务需求封装。
首先实现一个router的类，并实例化。
function_router(config){
this.config=config?config:{};
}
_router.prototype={
event:function(str,callback){
varevents=str.split('');
for(variinevents)window.addEventListener(events[i],callback,false);
},
init:function(){
this.event('loadhashchange',this.refresh.bind(this));
returnthis;
},
refresh:function(){
this.currentUrl=location.hash.slice(1)||'/';
this.config[this.currentUrl]();
},
route:function(path,callback){
this.config[path]=callback||function(){};
}
}
functionrouter(config){
returnnew_router(config).init();
}
上边唯一需要注意的是，在使用addEventListener的时候，需要注意bind函数的使用，因为我是踩了坑，这才体会到$.proxy()。
上边使用的时候可以使用两种方法进行注册，但第二种是依赖第一种的。
方法一：
varRouter=router({
'/':function(){content.style.backgroundColor='white';},
'/1':function(){content.style.backgroundColor='blue';},
'/2':function(){content.style.backgroundColor='green';}
})
方法二：
Router.route('/3',function(){content.style.backgroundColor='yellow';})
完整代码：
<html>
<head>
<title></title>
</head>
<body>
<ul>
<li><ahref="#/1">/1:blue</a></li>
<li><ahref="#/2">/2:green</a></li>
<li><ahref="#/3">/3:yellow</a></li>
</ul>
<script>
varcontent=document.querySelector('body');
function_router(config){
this.config=config?config:{};
}
_router.prototype={
event:function(str,callback){
varevents=str.split('');
for(variinevents)window.addEventListener(events[i],callback,false);
},
init:function(){
this.event('loadhashchange',this.refresh.bind(this));
returnthis;
},
refresh:function(){
this.currentUrl=location.hash.slice(1)||'/';
this.config[this.currentUrl]();
},
route:function(path,callback){
this.config[path]=callback||function(){};
}
}
functionrouter(config){
returnnew_router(config).init();
}
varRouter=router({
'/':function(){content.style.backgroundColor='white';},
'/1':function(){content.style.backgroundColor='blue';},
'/2':function(){content.style.backgroundColor='green';}
})
Router.route('/3',function(){
content.style.backgroundColor='yellow';
})
</script>
</body>
</html>
<script>
</script>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持毛票票！