用js写的一个路由(简单实例)
更新时间：2016年09月24日 13:52:50 投稿：jingxian
下面小编就为大家带来一篇用js写的一个路由(简单实例)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
前几天在网上看了一个大牛用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写的一个路由(简单实例)的全部内容了，希望对大家有所帮助，多多支持脚本之家~
您可能感兴趣的文章:
相关文章
这篇文章主要给大家介绍了关于JavaScript一元正号运算符的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用JavaScript具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-06-06
本文主要分享了原生js封装实现放大镜效果的示例代码，具有一定的参考价值，下面跟着小编一起来看下吧2017-01-01
给label赋值以及取label的值，取值及赋值代码如下，感兴趣的朋友可以参考下2013-11-11
在本篇文章里小编给各位分享的是关于判断“命令按钮”是否被鼠标单击的相关知识点内容，有需要的朋友们参考下。2019-07-07![javascript中[]和{}对象使用介绍](//img.jbzj.com/images/xgimg/bcimg4.png)
[]不仅仅可以表示数组，可以直接通过对象的属性设置值和访问值，接下来为大家介绍下[]和{}对象的使用，感兴趣的你可以参考下哈2013-03-03
这篇文章主要介绍了javascript原始值和对象引用的方法,实例分析了javascript原始值和对象引用的功能、定义与相关技巧,需要的朋友可以参考下2015-04-04
this是Javascript中一个非常容易理解错，进而用错的特性。所以下面这篇文章主要给大家介绍了关于Javascript中this关键字指向问题的相关资料，文中通过测试的题目考验大家对this的熟悉程度，需要的朋友可以参考借鉴，下面来一起看看吧。2017-08-08
本来是很简单的一个功能，可是一开始弄的时候，还有IE能实现，FF总是不能实现，在网上看了半天，也没弄出个所以然，所以在同事的帮忙下，总算弄出来了，浏览器的兼容性考的还是细节上面的东西，所有关于细节的，我会用注释标出来的。2015-05-05
这篇文章主要介绍了security.js实现的RSA加密功能,结合实例形式分析了基于security.js进行RSA加密的相关操作技巧,需要的朋友可以参考下2018-06-06
这篇文章主要介绍了微信小程序顶部导航栏可滑动并选中放大,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-12-12
![javascript中[]和{}对象使用介绍](http://img.jbzj.com/images/xgimg/bcimg4.png)
最新评论