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 相关文章推荐
S2SH整合JQuery+Ajax实现登录验证功能实现代码
Jan 30 Javascript
jquery限定文本框只能输入数字即整数和小数
Nov 29 Javascript
jQuery实现的多屏图像图层切换效果实例
May 07 Javascript
jquery淡入淡出效果简单实例
Jan 14 Javascript
基于Angularjs实现分页功能
May 30 Javascript
js实现随机抽选效果、随机抽选红色球效果
Jan 13 Javascript
vue-cli+webpack记事本项目创建
Apr 01 Javascript
vue-router 源码实现前端路由的两种方式
Jul 02 Javascript
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
Apr 04 Javascript
layuiAdmin循环遍历展示商品图片列表的方法
Sep 16 Javascript
JavaScript中如何对多维数组(矩阵)去重的实现
Dec 04 Javascript
深入浅析vue全局环境变量和模式
Apr 28 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
关于mysql 字段的那个点为是定界符
2007/01/15 PHP
由php的call_user_func传reference引发的思考
2010/07/23 PHP
php重定向的三种方法分享
2012/02/22 PHP
php+mysql实现用户注册登陆的方法
2015/01/03 PHP
PHP 传输会话curl函数的实例详解
2017/09/12 PHP
基于jquery的气泡提示效果
2010/05/31 Javascript
JavaScript高级程序设计 阅读笔记(十三) js定义类或对象
2012/08/14 Javascript
JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码
2015/10/31 Javascript
javascript倒计时效果实现
2015/11/12 Javascript
js弹出对话框方式小结
2015/11/17 Javascript
详解Vue2+Echarts实现多种图表数据可视化Dashboard(附源码)
2017/03/21 Javascript
angular.js+node.js实现下载图片处理详解
2017/03/31 Javascript
深入理解nodejs中Express的中间件
2017/05/19 NodeJs
vue.js源代码core scedule.js学习笔记
2017/07/03 Javascript
vue 实现边输入边搜索功能的实例讲解
2018/09/16 Javascript
vue实现导航标题栏随页面滚动渐隐渐显效果
2020/03/12 Javascript
Vue记住滚动条和实现下拉加载的完美方法
2020/07/31 Javascript
JS PHP字符串截取函数实现原理解析
2020/08/29 Javascript
JavaScript实现点击图片换背景
2020/11/20 Javascript
[03:42]2016国际邀请赛中国区预选赛首日现场玩家采访
2016/06/26 DOTA
python字符串排序方法
2014/08/29 Python
django 实现编写控制登录和访问权限控制的中间件方法
2019/01/15 Python
Python开发网站目录扫描器的实现
2019/02/21 Python
Python定时任务APScheduler的实例实例详解
2019/07/22 Python
python循环嵌套的多种使用方法解析
2019/11/29 Python
Keras官方中文文档:性能评估Metrices详解
2020/06/15 Python
Python实现小黑屋游戏的完整实例
2021/01/06 Python
Html5中的桌面通知Notification的实现
2018/09/25 HTML / CSS
潘多拉珠宝美国官方网站:Pandora US
2020/06/18 全球购物
什么是ESB?请介绍一下ESB?
2015/05/27 面试题
传播学专业毕业生自荐信
2013/11/04 职场文书
数控技校生自我鉴定
2014/03/02 职场文书
小学数学教研活动总结
2014/07/01 职场文书
要账委托书范本
2014/09/15 职场文书
七年级作文之英语老师
2019/10/28 职场文书
SpringBoot中使用Redis作为全局锁示例过程
2022/03/24 Java/Android