用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的动态添加控件并取值的实现代码
Sep 24 Javascript
Three.js源码阅读笔记(Object3D类)
Dec 27 Javascript
JavaScript实现函数返回多个值的方法
Jun 09 Javascript
无刷新上传文件并返回自定义值
Jun 11 Javascript
基于Flowplayer打造一款免费的WEB视频播放器附源码
Sep 06 Javascript
jQuery Ajax 全局调用封装实例代码详解
Jun 02 Javascript
ionic2 tabs 图标自定义实例
Mar 08 Javascript
webstorm中配置Eslint的两种方式及差异比较详解
Oct 19 Javascript
js、jquery实现列表模糊搜索功能过程解析
Mar 27 jQuery
微信小程序用户登录和登录态维护的实现
Dec 10 Javascript
如何使用JavaScript策略模式校验表单
Apr 29 Javascript
如何制作自己的原生JavaScript路由
May 05 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目录操作实例代码
2014/02/21 PHP
深入理解PHP之源码目录结构与功能说明
2016/06/01 PHP
thinkPHP框架中执行事务的方法示例
2018/05/31 PHP
PHP类的自动加载机制实现方法分析
2019/01/10 PHP
laravel中的fillable和guarded属性详解
2019/10/23 PHP
javascript获取下拉列表框当中的文本值示例代码
2013/07/31 Javascript
JS实现自适应高度表单文本框的方法
2015/02/25 Javascript
Javascript中的方法链(Method Chaining)介绍
2015/03/15 Javascript
详解AngularJS的通信机制
2015/06/18 Javascript
设计模式中的组合模式在JavaScript程序构建中的使用
2016/05/18 Javascript
JavaScript 字符串数字左补位,右补位,取固定长度,截位扩展函数代码
2017/03/25 Javascript
详解JavaScript中操作符和表达式
2018/09/12 Javascript
原生js实现的观察者和订阅者模式简单示例
2020/04/18 Javascript
vue+Element中table表格实现可编辑(select下拉框)
2020/05/21 Javascript
vue实现移动端拖动排序
2020/08/21 Javascript
Vue-Ant Design Vue-普通及自定义校验实例
2020/10/24 Javascript
[10:04]国际邀请赛采访专栏:DK.Farseer,mouz.Black^,采访员Josh专访
2013/08/05 DOTA
[01:08]2014DOTA2展望TI 剑指西雅图LGD战队专访
2014/06/30 DOTA
django项目运行因中文而乱码报错的几种情况解决
2017/11/07 Python
Python3对称加密算法AES、DES3实例详解
2018/12/06 Python
python的依赖管理的实现
2019/05/14 Python
python3 requests库实现多图片爬取教程
2019/12/18 Python
音频处理 windows10下python三方库librosa安装教程
2020/06/20 Python
H5调用相机拍照并压缩图片的实例代码
2017/07/20 HTML / CSS
Backcountry旗下的户外商品闪购网站:steep&cheap
2016/09/22 全球购物
会计电算化专业应届大学生求职信
2013/10/22 职场文书
《火烧云》教学反思
2014/04/12 职场文书
建筑工地门卫岗位职责
2014/04/30 职场文书
心得体会的写法
2014/09/05 职场文书
标准版离职证明书
2014/09/12 职场文书
教师党员个人总结
2015/02/10 职场文书
一般纳税人申请报告
2015/05/18 职场文书
考研经验交流会策划书
2015/11/02 职场文书
go语言中fallthrough的用法说明
2021/05/06 Golang
java调用Restful接口的三种方法
2021/08/23 Java/Android
万能密码的SQL注入漏洞其PHP环境搭建及防御手段
2021/09/04 SQL Server