用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 相关文章推荐
根据分辨率不同,调用不同的css文件
Aug 25 Javascript
javascript+xml技术实现分页浏览
Jul 27 Javascript
js类型检查实现代码
Oct 29 Javascript
JavaScript的9种继承实现方式归纳
May 18 Javascript
JS实现拖动滚动条评分的效果代码分享
Sep 29 Javascript
微信小程序异步处理详解
Nov 10 Javascript
vue几个常用跨域处理方式介绍
Feb 07 Javascript
Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法
Aug 08 Javascript
JS实现的碰撞检测与周期移动完整示例
Sep 02 Javascript
vue prop属性传值与传引用示例
Nov 13 Javascript
js实现鼠标点击页面弹出自定义文字效果
Dec 24 Javascript
vue之封装多个组件调用同一接口的案例
Aug 11 Javascript
简单的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中sprintf与printf函数的用法及区别
2016/01/08 PHP
浅谈htmlentities 、htmlspecialchars、addslashes的使用方法
2016/12/09 PHP
使用PHP下载CSS文件中的所有图片【几行代码即可实现】
2016/12/14 PHP
php 判断页面或图片是否经过gzip压缩的方法
2017/04/05 PHP
ThinkPHP5分页paginate代码实例解析
2020/11/10 PHP
Javascript技术技巧大全(五)
2007/01/22 Javascript
Jquery Validation插件防止重复提交表单的解决方法
2010/03/05 Javascript
弹出层之1:JQuery.Boxy (一) 使用介绍
2011/10/06 Javascript
VBS通过WMI监视注册表变动的代码
2011/10/27 Javascript
HTML中的setCapture和releaseCapture使用介绍
2012/03/21 Javascript
用js实现输入提示(自动完成)的实例代码
2013/06/14 Javascript
js正则表达exec与match的区别说明
2014/01/29 Javascript
详解JavaScript异步编程中jQuery的promise对象的作用
2016/05/03 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(下)
2017/04/21 Javascript
JavaScript瀑布流布局实现代码
2017/05/06 Javascript
详解jQuery中的isPlainObject()使用方法
2018/02/27 jQuery
Angular2进阶之如何避免Dom误区
2018/04/02 Javascript
基于vue cli 通过命令行传参实现多环境配置
2018/07/12 Javascript
layui表格数据重载
2019/07/27 Javascript
[02:27]2014DOTA2国际邀请赛 VG赛后采访:更大的挑战在等着我们
2014/07/13 DOTA
Python标准库os.path包、glob包使用实例
2014/11/25 Python
通过代码实例展示Python中列表生成式的用法
2015/03/31 Python
Python实现多线程抓取妹子图
2015/08/08 Python
Python MySQL 日期时间格式化作为参数的操作
2020/03/02 Python
Python如何使用27行代码绘制星星图
2020/07/20 Python
检测用户浏览器是否支持CSS3的方法
2009/08/29 HTML / CSS
iframe跨域的几种常用方法
2019/11/11 HTML / CSS
墨西哥皇宫度假村预订:Palace Resorts
2018/06/16 全球购物
Joules官网:女士、男士和儿童服装和鞋类
2018/10/23 全球购物
测绘工程个人的自我评价
2013/11/10 职场文书
环境工程毕业生自荐信
2013/11/17 职场文书
售房协议书
2014/08/19 职场文书
群众路线个人剖析材料及整改措施
2014/11/04 职场文书
文体活动总结
2015/02/04 职场文书
2015年党员发展工作总结
2015/05/13 职场文书
2015暑期社会实践通讯稿
2015/07/18 职场文书