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 相关文章推荐
seajs1.3.0源码解析之module依赖有序加载
Nov 07 Javascript
Jquery加载时从后台读取数据绑定到dropdownList实例
Jun 09 Javascript
js跳转页面方法实现汇总
Feb 11 Javascript
javascript实现动态模态绑定grid过程代码
Sep 22 Javascript
JavaScript获取浏览器信息的方法
Nov 20 Javascript
使用基于Node.js的构建工具Grunt来发布ASP.NET MVC项目
Feb 15 Javascript
基于jQuery实现仿51job城市选择功能实例代码
Mar 02 Javascript
vue实现长图垂直居上 vue实现短图垂直居中
Oct 18 Javascript
vue2.0实现的tab标签切换效果(内容可自定义)示例
Feb 11 Javascript
vue实现全屏滚动效果(非fullpage.js)
Mar 07 Javascript
JS前后端实现身份证号验证代码解析
Jul 23 Javascript
vue中h5端打开app(判断是安卓还是苹果)
Feb 26 Vue.js
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
ThinkPHP3.1新特性之内容解析输出详解
2014/06/19 PHP
php过滤htmlspecialchars() 函数实现把预定义的字符转换为 HTML 实体用法分析
2019/06/25 PHP
获取JavaScript用户自定义类的类名称的代码
2007/03/08 Javascript
ExtJS 下拉多选框lovcombo
2010/05/19 Javascript
jQuery学习笔记[1] jQuery中的DOM操作
2010/12/03 Javascript
lyhucSelect基于Jquery的Select数据联动插件
2011/03/29 Javascript
jQuery性能优化28条建议你值得借鉴
2013/02/16 Javascript
jquery选择器排除某个DOM元素的方法(实例演示)
2014/04/25 Javascript
laytpl 精致巧妙的JavaScript模板引擎
2014/08/29 Javascript
jQuery实现气球弹出框式的侧边导航菜单效果
2015/09/22 Javascript
Angularjs material 实现搜索框功能
2016/03/08 Javascript
使用JavaScript实现ajax的实例代码
2016/05/11 Javascript
js实现城市级联菜单的2种方法
2017/06/23 Javascript
Vue.js如何实现路由懒加载浅析
2017/08/14 Javascript
vue项目实现表单登录页保存账号和密码到cookie功能
2018/08/31 Javascript
this.$toast() 了解一下?
2019/04/18 Javascript
JavaScript中Dom操作实例详解
2019/07/08 Javascript
Node.js创建一个Express服务的方法详解
2020/01/06 Javascript
python中星号变量的几种特殊用法
2016/09/07 Python
Python制作钉钉加密/解密工具
2016/12/07 Python
Python中turtle作图示例
2017/11/15 Python
通过PHP与Python代码对比的语法差异详解
2019/07/10 Python
Python实现二叉搜索树BST的方法示例
2019/07/30 Python
python栈的基本定义与使用方法示例【初始化、赋值、入栈、出栈等】
2019/10/24 Python
使用apiDoc实现python接口文档编写
2019/11/19 Python
python 实现多维数组(array)排序
2020/02/28 Python
浅谈pycharm导入pandas包遇到的问题及解决
2020/06/01 Python
Python中Yield的基本用法
2020/10/18 Python
什么是makefile? 如何编写makefile?
2012/08/08 面试题
会计岗位职责模板
2014/03/12 职场文书
超市创业计划书
2014/04/24 职场文书
纪念九一八事变演讲稿:青少年应树立远大理想
2014/09/14 职场文书
法人单位适用的授权委托书
2014/09/19 职场文书
保研推荐信格式
2015/03/25 职场文书
如何使用Python对NetCDF数据做空间相关分析
2021/04/21 Python
python 常用的异步框架汇总整理
2021/06/18 Python