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获取当前地理位置方法汇总
Dec 18 Javascript
javascript中attachEvent用法实例分析
May 14 Javascript
js+canvas绘制矩形的方法
Jan 28 Javascript
js入门之Function函数的使用方法【新手必看】
Nov 22 Javascript
JavaScript正则表达式小结(test|match|search|replace|split|exec)
Dec 08 Javascript
canvas实现粒子时钟效果
Feb 06 Javascript
浅谈angular4生命周期钩子
Sep 05 Javascript
使用html+js+css 实现页面轮播图效果(实例讲解)
Sep 21 Javascript
Three.js利用顶点绘制立方体的方法详解
Sep 27 Javascript
webpack多入口多出口的实现方法
Aug 17 Javascript
微信小程序wx.navigateTo方法里的events参数使用详情及场景
Jan 07 Javascript
解决Can't find variable: SockJS vue项目的问题
Sep 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
简单谈谈PHP中的trait
2017/02/25 PHP
JS宝典学习笔记(下)
2007/01/10 Javascript
javascript语句中的CDATA标签的意义
2007/05/09 Javascript
location.href 在IE6中不跳转的解决方法与推荐使用代码
2010/07/08 Javascript
客户端js性能优化小技巧整理
2013/11/05 Javascript
js改变文章字体大小的实例代码
2013/11/27 Javascript
jquery事件的ready()方法使用详解
2015/11/11 Javascript
实例代码详解javascript实现窗口抖动及qq窗口抖动
2016/01/04 Javascript
深入理解JavaScript中为什么string可以拥有方法
2016/05/24 Javascript
Bootstrap源码解读排版(1)
2016/12/23 Javascript
JS正则替换去空格的方法
2017/03/24 Javascript
AngularJS2中一种button切换效果的实现方法(二)
2017/03/27 Javascript
JS使用cookie实现只出现一次的广告代码效果
2017/04/22 Javascript
解决Vue编译时写在style中的路径问题
2017/09/21 Javascript
javascript闭包的使用之按钮切换功能
2018/08/30 Javascript
实现一个 Vue 吸顶锚点组件方法
2019/07/10 Javascript
Vuex中的Mutations的具体使用方法
2020/06/01 Javascript
微信小程序连接服务器展示MQTT数据信息的实现
2020/07/14 Javascript
vue created钩子函数与mounted钩子函数的用法区别
2020/11/05 Javascript
同时安装Python2 & Python3 cmd下版本自由选择的方法
2017/12/09 Python
彻底搞懂Python字符编码
2018/01/23 Python
python Kmeans算法原理深入解析
2019/08/23 Python
Windows下Sqlmap环境安装教程详解
2020/08/04 Python
django 获取字段最大值,最新的记录操作
2020/08/09 Python
python3处理word文档实例分析
2020/12/01 Python
html5文本内容_动力节点Java学院整理
2017/07/11 HTML / CSS
详解html5 postMessage解决跨域通信的问题
2018/08/17 HTML / CSS
英国音乐设备和乐器商店:Gear4music
2017/10/16 全球购物
工作中个人的自我评价
2013/12/31 职场文书
《在山的那边》教学反思
2014/02/23 职场文书
文明班级申报材料
2014/12/24 职场文书
公司副总经理岗位职责
2015/04/08 职场文书
厉行节约工作总结
2015/08/12 职场文书
班主任工作总结范文
2015/08/13 职场文书
浅谈python中的多态
2021/06/15 Python
Python面向对象之成员相关知识总结
2021/06/24 Python