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


Posted in Javascript onSeptember 24, 2016

前几天在网上看了一个大牛用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是否可实现多线程  深入理解JavaScript定时机制
Dec 22 Javascript
JavaScript(JS) 压缩 / 混淆 / 格式化 批处理工具
Dec 10 Javascript
利用js实现遮罩以及弹出可移动登录窗口
Jul 08 Javascript
jquery重新播放css动画所遇问题解决
Aug 21 Javascript
jQuery的remove()方法使用详解
Aug 11 Javascript
详解JavaScript中数组的reduce方法
Dec 02 Javascript
jQuery无刷新上传之uploadify简单代码
Jan 17 Javascript
Vue.js对象转换实例
Jun 07 Javascript
Angularjs 双向绑定时字符串的转换成数字类型的问题
Jun 12 Javascript
微信小程序实现图片放大预览功能
Oct 22 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【矩形情况】
Dec 13 Javascript
在vue中通过render函数给子组件设置ref操作
Nov 17 Vue.js
简单的js表格操作
Sep 24 #Javascript
js面向对象实现canvas制作彩虹球喷枪效果
Sep 24 #Javascript
轻松实现js选项卡切换效果
Sep 24 #Javascript
在localStorage中存储对象数组并读取的方法
Sep 24 #Javascript
基于JavaScript实现跳转提示页面
Sep 24 #Javascript
JavaScript实现DOM对象选择器
Sep 24 #Javascript
用瀑布流的方式在网页上插入图片的简单实现方法
Sep 23 #Javascript
You might like
PHP chmod 函数与批量修改文件目录权限
2010/05/10 PHP
Yii实现MySQL多数据库和读写分离实例分析
2014/12/03 PHP
thinkPHP实现将excel导入到数据库中的方法
2016/04/22 PHP
PHP-FPM运行状态的实时查看及监控详解
2016/11/18 PHP
thinkphp5.1框架模板布局与模板继承用法分析
2019/07/19 PHP
jQuery中ready事件用法实例
2015/01/19 Javascript
JavaScript学习笔记之JS事件对象
2015/01/22 Javascript
js实现简单的可切换选项卡效果
2015/04/10 Javascript
用JavaScript显示浏览器客户端信息的超相近教程
2015/06/18 Javascript
jQuery基于$.ajax设置移动端click超时处理方法
2016/05/14 Javascript
jQuery中Chosen三级联动功能实例代码
2017/03/07 Javascript
纯js实现动态时间显示
2020/09/07 Javascript
富文本编辑器vue2-editor实现全屏功能
2019/05/26 Javascript
[48:21]林俊杰圣堂刺客超神杀戮秀
2014/10/29 DOTA
python实现360皮肤按钮控件示例
2014/02/21 Python
用Python的Tornado框架结合memcached页面改善博客性能
2015/04/24 Python
浅谈function(函数)中的动态参数
2017/04/30 Python
python+pandas+时间、日期以及时间序列处理方法
2018/07/10 Python
python实现简单tftp(基于udp协议)
2018/07/30 Python
Python中的 enum 模块源码详析
2019/01/09 Python
Python实现的在特定目录下导入模块功能分析
2019/02/11 Python
Python如何实现定时器功能
2020/05/28 Python
Steve Madden官网:美国鞋类品牌
2017/01/29 全球购物
配置管理计划的主要内容有哪些
2014/06/20 面试题
考试作弊检讨书大全
2014/02/18 职场文书
大学毕业生求职自荐信
2014/02/20 职场文书
毕业自我鉴定怎么写
2014/03/25 职场文书
共产党员公开承诺书
2014/03/25 职场文书
亚布力滑雪场导游词
2015/02/09 职场文书
加班费申请报告
2015/05/15 职场文书
期中考试后的感想
2015/08/07 职场文书
学生会宣传部竞选稿
2015/11/21 职场文书
小学英语课教学反思
2016/02/15 职场文书
Python中requests做接口测试的方法
2021/05/30 Python
mysql分表之后如何平滑上线详解
2021/11/01 MySQL
深入讲解数据库中Decimal类型的使用以及实现方法
2022/02/15 MySQL