用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 相关文章推荐
jQuery Lightbox 图片展示插件使用说明
Apr 25 Javascript
Javascript学习笔记之相等符号与严格相等符号
Nov 23 Javascript
jQuery实现鼠标滚动图片延迟加载效果附源码下载
Jun 28 Javascript
基于JS模仿windows文件按名称排序效果
Jun 29 Javascript
jQuery数组处理函数整理
Aug 03 Javascript
jQuery事件用法详解
Oct 06 Javascript
深入理解Javascript中的valueOf与toString
Jan 04 Javascript
JavaScript简介_动力节点Java学院整理
Jun 26 Javascript
微信小程序分页加载的实例代码
Jul 11 Javascript
Vuex 入门教程
Jan 10 Javascript
原生js代码能实现call和bind吗
Jul 31 Javascript
easyUI使用分页过滤器对数据进行分页操作实例分析
Jun 01 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
ezSQL PHP数据库操作类库
2010/05/16 PHP
访问编码后的中文URL返回404错误的解决方法
2014/08/20 PHP
PHP设计模式之注册树模式分析
2018/01/26 PHP
比较简单实用的使用正则三种版本的js去空格处理方法
2007/11/18 Javascript
拥抱模块化的JavaScript
2012/03/07 Javascript
javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板
2013/04/27 Javascript
jquery重新播放css动画所遇问题解决
2013/08/21 Javascript
判断一个变量是数组Array类型的方法
2013/09/16 Javascript
js 操作select与option(示例讲解)
2013/12/20 Javascript
jQuery获取动态生成的元素示例
2014/06/15 Javascript
JavaScript随机生成信用卡卡号的方法
2015/04/07 Javascript
浅谈React 属性和状态的一些总结
2016/11/21 Javascript
VUE饿了么树形控件添加增删改功能的示例代码
2017/10/17 Javascript
Angular 项目实现国际化的方法
2018/01/08 Javascript
深入理解Node module模块
2018/03/26 Javascript
AngularJs返回前一页面时刷新一次前面页面的方法
2018/10/09 Javascript
[00:48]食人魔魔法师至宝“金鹏之幸”全新模型和自定义特效展示
2019/12/19 DOTA
Python通过websocket与js客户端通信示例分析
2014/06/25 Python
python脚本爬取字体文件的实现方法
2017/04/29 Python
基于python时间处理方法(详解)
2017/08/14 Python
Python3实现发送QQ邮件功能(附件)
2020/12/23 Python
python增加矩阵维度的实例讲解
2018/04/04 Python
python3利用venv配置虚拟环境及过程中的小问题小结
2018/08/01 Python
Python中对数组集进行按行打乱shuffle的方法
2018/11/08 Python
django下创建多个app并设置urls方法
2020/08/02 Python
基于python实现操作redis及消息队列
2020/08/27 Python
python Scrapy框架原理解析
2021/01/04 Python
运动会广播稿50字
2014/01/26 职场文书
精通CAD能手自荐书
2014/01/31 职场文书
低碳生活倡议书
2014/04/14 职场文书
解除劳动关系协议书2篇
2014/11/28 职场文书
邀请函格式范文
2015/02/02 职场文书
史上最牛辞职信
2015/05/13 职场文书
MySQL 数据丢失排查案例
2021/05/08 MySQL
oracle重置序列从0开始递增1
2022/02/28 Oracle
JavaScript声明变量和数据类型的转换
2022/04/12 Javascript