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 相关文章推荐
用js实现预览待上传的本地图片
Mar 15 Javascript
javascript使用数组的push方法完成快速排序
Sep 15 Javascript
深入理解JavaScript系列(27):设计模式之建造者模式详解
Mar 03 Javascript
基于zepto的移动端轻量级日期插件--date_picker
Mar 04 Javascript
JavaScript数据绑定实现一个简单的 MVVM 库
Apr 08 Javascript
JavaScript实现Java中Map容器的方法
Oct 09 Javascript
web打印小结
Jan 11 Javascript
JavaScript自定义文本框光标
Mar 05 Javascript
使用JS组件实现带ToolTip验证框的实例代码
Aug 23 Javascript
微信小程序之蓝牙的链接
Sep 26 Javascript
JS数组及对象遍历方法代码汇总
Jun 16 Javascript
通过实例了解Render Props回调地狱解决方案
Nov 04 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
用PHP制作静态网站的模板框架(一)
2006/10/09 PHP
mayfish 数据入库验证代码
2010/04/30 PHP
Yii实现多按钮保存与提交的方法
2014/12/03 PHP
10个php函数实用却不常见
2015/10/13 PHP
学习php设计模式 php实现原型模式(prototype)
2015/12/07 PHP
详谈php ip2long 出现负数的原因及解决方法
2017/04/05 PHP
JavaScript arguments 多参传值函数
2010/10/24 Javascript
使用JavaScript实现Java的List功能(实例讲解)
2013/11/07 Javascript
JS实现隐藏同级元素后只显示JS文件内容的方法
2016/09/04 Javascript
javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结
2016/10/10 Javascript
ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案
2016/11/23 Javascript
自带气泡提示的vue校验插件(vue-verify-pop)
2017/04/07 Javascript
详解如何提高 webpack 构建 Vue 项目的速度
2017/07/03 Javascript
[01:34]传奇从这开始 2016国际邀请赛中国区预选赛震撼开启
2016/06/26 DOTA
python基础教程之lambda表达式使用方法
2014/02/12 Python
Python sys.argv用法实例
2015/05/28 Python
Python排序搜索基本算法之冒泡排序实例分析
2017/12/09 Python
Python+OpenCV实现图像融合的原理及代码
2018/12/03 Python
Python socket 套接字实现通信详解
2019/08/27 Python
Python 中pandas索引切片读取数据缺失数据处理问题
2019/10/09 Python
Python函数的定义方式与函数参数问题实例分析
2019/12/26 Python
Python之字典添加元素的几种方法
2020/09/30 Python
利用python如何实现猫捉老鼠小游戏
2020/12/04 Python
pytorch Dataset,DataLoader产生自定义的训练数据案例
2021/03/03 Python
日本快乐生活方式购物网站:Shop Japan
2018/07/17 全球购物
.net工程师笔试题
2012/06/09 面试题
医学检验专业大学生求职信
2013/11/18 职场文书
部队学习十八大感言
2014/01/11 职场文书
出生医学证明样本
2014/01/17 职场文书
我的梦中国梦演讲稿
2014/04/23 职场文书
副科级后备干部考察材料
2014/05/15 职场文书
幼儿园老师工作总结2015
2015/05/22 职场文书
Nginx代理同域名前后端分离项目的完整步骤
2021/03/31 Servers
4种非常实用的python内置数据结构
2021/04/28 Python
HTML+CSS制作心跳特效的实现
2021/05/26 HTML / CSS
Go语言基础知识点介绍
2021/07/04 Golang