JS实现简单路由器功能的方法

 更新时间:2015年05月27日 15:29:13   作者:不吃皮蛋  
这篇文章主要介绍了JS实现简单路由器功能的方法,基于javascript模拟简单路由编码的相关技巧,需要的朋友可以参考下

本文实例讲述了JS实现简单路由器功能的方法。分享给大家供大家参考。具体实现方法如下:

var wawa = {};
wawa.Router = function(){
  function Router(){
  }
  Router.prototype.setup = function(routemap, defaultFunc){
    var that = this, rule, func;
    this.routemap = [];
    this.defaultFunc = defaultFunc;
    for (var rule in routemap) {
      if (!routemap.hasOwnProperty(rule)) continue;
      that.routemap.push({
        rule: new RegExp(rule, 'i'),
        func: routemap[rule]
      });       
    }
  };
  Router.prototype.start = function(){
    console.log(window.location.hash);
    var hash = location.hash, route, matchResult;
    for (var routeIndex in this.routemap){
      route = this.routemap[routeIndex];
      matchResult = hash.match(route.rule);
      if (matchResult){
        route.func.apply(window, matchResult.slice(1));
        return; 
      }
    }
    this.defaultFunc();
  };
  return Router;
}();
var router = new wawa.Router();
router.setup({
  '#/list/(.*)/(.*)': function(cate, id){
      console.log('list', cate, id);
    },
  '#/show/(.*)': function(id){
      console.log('show', id); 
    }
}, function(){
  console.log('default router');
});
router.start();

希望本文所述对大家的javascript程序设计有所帮助。

相关文章

  • 如何检查一个对象是否为空

    如何检查一个对象是否为空

    这篇文章主要介绍了js如何检查一个对象是否为空,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • 学习JavaScript设计模式之单例模式

    学习JavaScript设计模式之单例模式

    这篇文章主要为大家介绍了JavaScript设计模式中的单例模式,对JavaScript设计模式感兴趣的小伙伴们可以参考一下
    2016-01-01
  • 一个简单的弹性返回顶部JS代码实现介绍

    一个简单的弹性返回顶部JS代码实现介绍

    页面滚动条处于低端,点击回到顶部,并且隐藏掉,具体实现代码如下,感兴趣的朋友可以参考下哈
    2013-06-06
  • js实现图片切换(动画版)

    js实现图片切换(动画版)

    本文主要对javascript实现图片切换(动画版)的方法进行步骤分析、实例介绍,具有很好的参考价值,需要的朋友一起来看下吧
    2016-12-12
  • 微信小程序如何实现radio单选框单击打勾和取消

    微信小程序如何实现radio单选框单击打勾和取消

    这篇文章主要介绍了微信小程序如何实现radio单选框单击打勾和取消,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-01-01
  • 基于JS实现EOS隐藏错误提示层代码

    基于JS实现EOS隐藏错误提示层代码

    本文给大家分享一段代码基于js实现EOS隐藏错误提示层,对eos隐藏提示层的相关知识感兴趣的朋友一起学习吧
    2016-04-04
  • 原生JS实现网页手机音乐播放器 歌词同步播放的示例

    原生JS实现网页手机音乐播放器 歌词同步播放的示例

    下面小编就为大家分享一篇原生JS实现网页手机音乐播放器 歌词同步播放的示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • bootstrapTable+ajax加载数据 refresh更新数据

    bootstrapTable+ajax加载数据 refresh更新数据

    这篇文章主要为大家详细介绍了bootstrapTable+ajax加载数据,以及refresh更新数据,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-08-08
  • js或css实现滚动广告的几种方案

    js或css实现滚动广告的几种方案

    今天无事逛网,突然发现了一个很有趣的事情,(也许只有我觉得有趣).我看到一图片竟然在我拖动滚动条的时候没有动,也许你会说我少见多怪,不信你去找个这样的我看看,很少有的,一般的都是一拖动图片就在那跳得厉害。
    2010-01-01
  • 轻松实现js弹框显示选项

    轻松实现js弹框显示选项

    这篇文章主要为大家详细介绍了js轻松实现弹框显示选项效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-09-09

最新评论