脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js实现自定义路由

js实现自定义路由

 更新时间：2017年02月04日 11:15:02   作者：firegood  
本文介绍了js实现自定义路由，主要是事件hashchange的使用，然后根据我们的业务需求封装。具有很好的参考价值，下面跟着小编一起来看下吧

本文实现自定义路由，主要是事件hashchange的使用，然后根据我们的业务需求封装。

首先实现一个router的类，并实例化。

function _router(config){
 this.config = config ? config : {}; 
} 
_router.prototype = {
 event:function(str,callback){
  var events = str.split(' ');
  for (var i in events) window.addEventListener(events[i],callback,false);
 },
init: function() {
 this.event('load hashchange',this.refresh.bind(this));
 return this;
},
refresh: function() {
 this.currentUrl = location.hash.slice(1) || '/';
 this.config[this.currentUrl]();
},
route: function(path,callback){
 this.config[path] = callback || function(){};
}
}
function router (config){
 return new _router(config).init();
}

上边唯一需要注意的是，在使用addEventListener的时候，需要注意bind函数的使用，因为我是踩了坑，这才体会到$.proxy()。

上边使用的时候可以使用两种方法进行注册，但第二种是依赖第一种的。

方法一：

var Router = router({
 '/' : function(){content.style.backgroundColor = 'white';},
 '/1': function(){content.style.backgroundColor = 'blue';},
 '/2': function(){content.style.backgroundColor = 'green';}
})

方法二：

Router.route('/3',function(){ content.style.backgroundColor = 'yellow'; })

完整代码：

<html>
 <head>
  <title></title>
 </head>
 <body>
  <ul>
   <li><a href="#/1">/1: blue</a></li>
   <li><a href="#/2">/2: green</a></li>
   <li><a href="#/3">/3: yellow</a></li>
  </ul>
  <script>
  var content = document.querySelector('body');
  function _router(config){
   this.config = config ? config : {}; 
  } 
  _router.prototype = {
   event:function(str,callback){
    var events = str.split(' ');
    for (var i in events) window.addEventListener(events[i],callback,false);
   },
   init: function() {
    this.event('load hashchange',this.refresh.bind(this));
    return this;
   },
   refresh: function() {
    this.currentUrl = location.hash.slice(1) || '/';
    this.config[this.currentUrl]();
   },
   route: function(path,callback){
    this.config[path] = callback || function(){};
   }
  }
  function router (config){
   return new _router(config).init();
  }
  var Router = router({
   '/' : function(){content.style.backgroundColor = 'white';},
   '/1': function(){content.style.backgroundColor = 'blue';},
   '/2': function(){content.style.backgroundColor = 'green';}
  })
  Router.route('/3',function(){
   content.style.backgroundColor = 'yellow';
  })
  </script>
 </body>
</html>
<script> 
</script>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 纯js封装的ajax功能函数与用法示例

    纯js封装的ajax功能函数与用法示例

    这篇文章主要介绍了纯js封装的ajax功能函数与用法,结合实例形式分析了基于JavaScript封装的ajax功能函数定义及与php后台交互相关操作技巧,需要的朋友可以参考下
    2018-05-05
  • ES6新特性四：变量的解构赋值实例

    ES6新特性四：变量的解构赋值实例

    这篇文章主要介绍了ES6新特性之变量的解构赋值操作,结合实例形式分析了ES6针对数组、对象等的解构赋值操作相关实现技巧,需要的朋友可以参考下
    2017-04-04
  • JS设计模式之中介者模式使用方法详解

    JS设计模式之中介者模式使用方法详解

    JavaScript中介者模式是一种行为型设计模式,用于降低多个对象之间的耦合性,在中介者模式中,多个对象之间不直接相互通信,而是通过中介者进行通信, 本文就来给大家详细的介绍一下JS设计模式之中介者模式使用方法,需要的朋友可以参考下
    2023-08-08
  • JS实现滑动导航效果

    JS实现滑动导航效果

    这篇文章主要为大家详细介绍了JS实现滑动导航效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-01-01
  • Iframe自适应高度绝对好使的代码 兼容IE,遨游，火狐

    Iframe自适应高度绝对好使的代码 兼容IE,遨游，火狐

    Iframe自适应高度绝对好使的代码IE,遨游，火狐都兼容,需要的朋友可以参考下。
    2011-01-01
  • js 静态动态成员 and 信息的封装和隐藏

    js 静态动态成员 and 信息的封装和隐藏

    一下用面向对象的相关概念来解释js中的仿面向对象，因为js中不像其他语言，不存在面向对象语言的相关特性
    2011-05-05
  • js继承的6种方式详解

    js继承的6种方式详解

    这篇文章主要给大家介绍了关于js继承的6种方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04
  • javascript中动态加载js文件多种解决办法总结

    javascript中动态加载js文件多种解决办法总结

    这篇文章主要介绍了javascript中动态加载js文件多种解决办法，有需要的朋友可以参考一下
    2013-11-11
  • JavaScript获取radio选中值的几种常用方法小结

    JavaScript获取radio选中值的几种常用方法小结

    这篇文章主要介绍了JavaScript获取radio选中值的几种常用方法,结合实例形式总结分析了javascript获取radio选中值的常见实现方法与操作注意事项,需要的朋友可以参考下
    2023-06-06
  • 解析JavaScript中delete操作符不能删除的对象

    解析JavaScript中delete操作符不能删除的对象

    这篇文章主要是对JavaScript中delete操作符不能删除的对象进行了详细的分析介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2013-12-12

最新评论