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


Posted in Javascript onMay 27, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
随机显示经典句子或诗歌的javascript脚本
Aug 04 Javascript
用jquery与css打造个性化的单选框和复选框
Oct 20 Javascript
Jquery判断IE6等浏览器的代码
Apr 05 Javascript
分享9个最好用的JavaScript开发工具和代码编辑器
Mar 24 Javascript
分享使用AngularJS创建应用的5个框架
Dec 05 Javascript
基于jquery实现图片相关操作(重绘、获取尺寸、调整大小、缩放)
Dec 25 Javascript
JS随机打乱数组的方法小结
Jun 22 Javascript
简易的JS计算器实现代码
Oct 18 Javascript
jQuery EasyUI 页面加载等待及页面等待层
Feb 06 Javascript
鼠标经过出现气泡框的简单实例
Mar 17 Javascript
详解ES6系列之私有变量的实现
Nov 21 Javascript
weui上传多图片,压缩,base64编码的示例代码
Jun 22 Javascript
JavaScript实现将UPC转换成ISBN的方法
May 26 #Javascript
JavaScript对表格或元素按文本,数字或日期排序的方法
May 26 #Javascript
js实现文本框选中的方法
May 26 #Javascript
javascript委托(Delegate)blur和focus用法实例分析
May 26 #Javascript
javascript删除元素节点removeChild()用法实例
May 26 #Javascript
JavaScript事件委托实例分析
May 26 #Javascript
JQuery选择器、过滤器大整理
May 26 #Javascript
You might like
对盗链说再见...
2006/10/09 PHP
php设计模式 Visitor 访问者模式
2011/06/28 PHP
关于php循环跳出的问题
2013/07/01 PHP
php把session写入数据库示例
2014/02/26 PHP
PHP中提问频率最高的11个面试题和答案
2014/09/02 PHP
Laravel框架实现利用中间件进行操作日志记录功能
2018/06/06 PHP
JavaScript词法作用域与调用对象深入理解
2012/11/29 Javascript
js获取或设置当前窗口url参数的小例子
2013/10/14 Javascript
js判断客户端是iOS还是Android等移动终端的方法
2013/12/11 Javascript
JS中捕获console.log()输出的方法
2015/04/16 Javascript
使用微信内嵌H5网页解决JS倒计时失效问题
2017/01/13 Javascript
Node.js获取前端ajax提交的request信息
2017/02/20 Javascript
利用NPM淘宝的node.js镜像加速nvm
2017/03/27 Javascript
ES6新特性之字符串的扩展实例分析
2017/04/01 Javascript
关于Vue单页面骨架屏实践记录
2017/12/13 Javascript
微信小程序实现折叠面板
2018/01/31 Javascript
javascript导出csv文件(excel)的方法示例
2019/08/25 Javascript
Vue单文件组件开发实现过程详解
2020/07/30 Javascript
[03:21]【TI9纪实】Old Boys
2019/08/23 DOTA
利用Python学习RabbitMQ消息队列
2015/11/30 Python
python实现简易云音乐播放器
2018/01/04 Python
Python实现加载及解析properties配置文件的方法
2018/03/29 Python
简单了解python 生成器 列表推导式 生成器表达式
2019/08/22 Python
基于python cut和qcut的用法及区别详解
2019/11/22 Python
pytorch中的weight-initilzation用法
2020/06/24 Python
基于python requests selenium爬取excel vba过程解析
2020/08/12 Python
Python爬虫分析微博热搜关键词的实现代码
2021/02/22 Python
美国知名户外用品畅销中心:Sierra Trading Post
2016/07/19 全球购物
NARS化妆品官方商店:美国彩妆品牌
2017/08/26 全球购物
IWOOT美国:新奇的小玩意
2018/04/27 全球购物
美国值得信赖的婚恋交友网站:eHarmony
2018/10/04 全球购物
可持续未来的时尚基础:Alternative Apparel
2019/05/06 全球购物
策划总监岗位职责
2014/02/16 职场文书
运动会广播稿200字
2014/10/18 职场文书
2016幼儿园教师年度考核评语
2015/12/01 职场文书
浅谈redis缓存在项目中的使用
2021/05/20 Redis