用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操作xml
Nov 04 Javascript
JavaScript利用构造函数和原型的方式模拟C#类的功能
Mar 06 Javascript
js 设置缓存及获取设置的缓存
May 08 Javascript
深入分析js的冒泡事件
Dec 05 Javascript
用jquery获取自定义的标签属性的值简单实例
Sep 17 Javascript
React组件生命周期详解
Jul 03 Javascript
React 子组件向父组件传值的方法
Jul 24 Javascript
JS获取url参数,JS发送json格式的POST请求方法
Mar 29 Javascript
非常漂亮的js烟花效果
Mar 10 Javascript
在vue中封装的弹窗组件使用队列模式实现方法
Jul 23 Javascript
vue组件实现移动端九宫格转盘抽奖
Oct 16 Javascript
用Javascript实现发送短信验证码间隔功能
Feb 08 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 采集获取指定网址的内容
2010/01/05 PHP
php通过baihui网API实现读取word文档并展示
2015/06/22 PHP
基于laravel where的高级使用方法
2019/10/10 PHP
基于Jquery的淡入淡出的特效基础练习
2010/12/13 Javascript
一些常用的JavaScript函数(json)附详细说明
2011/05/25 Javascript
input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
2013/04/02 Javascript
Javascript Web Slider 焦点图示例源码
2013/10/10 Javascript
javascript删除字符串最后一个字符
2014/01/14 Javascript
浅谈jQuery事件绑定原理
2015/01/02 Javascript
举例讲解jQuery中可见性过滤选择器的使用
2016/04/18 Javascript
浅谈jQuery 中的事件冒泡和阻止默认行为
2016/05/28 Javascript
jQuery实现边框动态效果的实例代码
2016/09/23 Javascript
微信小程序 地图(map)实例详解
2016/11/16 Javascript
nodejs实现发出蜂鸣声音(系统报警声)的方法
2017/01/18 NodeJs
基于bootstrap写的一点localStorage本地储存
2017/11/21 Javascript
webpack 4.0.0-beta.0版本新特性介绍
2018/02/10 Javascript
使用vue-cli编写vue插件的方法
2018/02/26 Javascript
webpack+vuex+axios 跨域请求数据的示例代码
2018/03/06 Javascript
JS 实现微信扫一扫功能
2018/09/14 Javascript
python进程类subprocess的一些操作方法例子
2014/11/22 Python
用python 制作图片转pdf工具
2015/01/30 Python
深入解析Python中的lambda表达式的用法
2015/08/28 Python
python实现微信接口(itchat)详细介绍
2017/10/23 Python
Python产生Gnuplot绘图数据的方法
2018/11/09 Python
Python最小二乘法矩阵
2019/01/02 Python
判断python对象是否可调用的三种方式及其区别详解
2019/01/31 Python
解决Django删除migrations文件夹中的文件后出现的异常问题
2019/08/31 Python
css3隔行变换色实现示例
2014/02/19 HTML / CSS
北京华建集团SQL面试题
2014/06/03 面试题
风险评估实施方案
2014/03/09 职场文书
庆六一活动总结
2014/08/29 职场文书
公司授权委托书范文
2014/09/21 职场文书
离婚协议书怎么写(范本参考)
2014/09/30 职场文书
2014年双拥工作总结
2014/11/21 职场文书
Golang 正则匹配效率详解
2021/04/25 Golang
聊一聊python常用的编程模块
2021/05/14 Python