用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面向对象之静态与非静态类
Feb 03 Javascript
javascript 函数使用说明
Apr 07 Javascript
javascript unicode与GBK2312(中文)编码转换方法
Nov 14 Javascript
使用firebug进行调试javascript的示例
Dec 16 Javascript
基于jQuery的图片不完全按比例自动缩小
Jul 11 Javascript
jQuery的animate函数学习记录
Aug 08 Javascript
jQuery实现的支持IE的html滑动条
Mar 16 Javascript
JavaScript DOM节点操作方法总结
Aug 23 Javascript
canvas实现流星雨的背景效果
Jan 13 Javascript
Express + Session 实现登录验证功能
Sep 08 Javascript
详解微信小程序开发聊天室—实时聊天,支持图片预览
May 20 Javascript
javascript设计模式 ? 建造者模式原理与应用实例分析
Apr 10 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
Warning: session_destroy() : Trying to destroy uninitialized sessionq错误
2011/06/16 PHP
PHP框架Laravel学习心得体会
2015/10/28 PHP
thinkphp5.0自定义验证规则使用方法
2017/11/16 PHP
javascript YUI 读码日记之 YAHOO.util.Dom - Part.4
2008/03/22 Javascript
一个JQuery操作Table的代码分享
2012/03/30 Javascript
关于IE中getElementsByClassName不能用的问题解决方法
2013/08/26 Javascript
浅谈jquery.fn.extend与jquery.extend区别
2015/07/13 Javascript
基于JavaScript实现手机短信按钮倒计时(超简单)
2015/12/30 Javascript
JS控制文本域只读或可写属性的方法
2016/06/24 Javascript
在Web项目中引入Jquery插件报错的完美解决方案(图解)
2016/09/19 Javascript
工厂模式在JS中的实践
2017/01/18 Javascript
jQuery.Form实现Ajax上传文件同时设置headers的方法
2017/06/26 jQuery
微信小程序用户自定义模版用法实例分析
2017/11/28 Javascript
Vue.js自定义指令学习使用详解
2019/10/19 Javascript
详解vue实现坐标拾取器功能示例
2020/11/18 Vue.js
javascript实现时钟动画
2020/12/03 Javascript
三剑客:offset、client和scroll还傻傻分不清?
2020/12/04 Javascript
Vue多选列表组件深入详解
2021/03/02 Vue.js
Python迭代器与生成器用法实例分析
2018/07/09 Python
详解【python】str与json类型转换
2019/04/29 Python
Python使用monkey.patch_all()解决协程阻塞问题
2020/04/15 Python
python自定义函数def的应用详解
2020/06/03 Python
有关pycharm登录github时有的时候会报错connection reset的问题
2020/09/15 Python
matplotlib事件处理基础(事件绑定、事件属性)
2021/02/03 Python
详解HTML5中ol标签的用法
2015/09/08 HTML / CSS
加拿大折扣、优惠券和交易网站:WagJag
2018/02/07 全球购物
总经理助理职责
2014/02/04 职场文书
办公室秘书岗位职责范本
2014/02/11 职场文书
文案策划求职信
2014/03/18 职场文书
绿色学校实施方案
2014/03/31 职场文书
2014年教师业务工作总结
2014/12/19 职场文书
安全员岗位职责
2015/02/10 职场文书
小升初自荐信范文
2015/03/05 职场文书
酒店采购员岗位职责
2015/04/03 职场文书
入党申请书格式
2019/06/20 职场文书
Python pygame实现中国象棋单机版源码
2021/06/20 Python