返回顶部

收藏

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();

标签:路由器,route,javascript

收藏

0人收藏

支持

0

反对

0

相关聚客文章
  1. linux@linux.cn (linu 发表 2018-07-07 06:46:17 JavaScript 路由器
  2. 博主 发表 2015-04-10 02:09:06 说说刚才图片墙的BUG
  3. 飞尘 发表 2011-12-13 13:32:56 extjs使用grid动态加载数据中文提示
  4. 博主 发表 2015-11-28 03:29:12 javascript的类型数组(Typed Array)
  5. Freewind 发表 2013-01-02 05:51:10 Javascript群规
  6. 十年灯 发表 2015-12-03 08:40:53 Javascript:for循环的几种节省字符的写法
  7. 刘晓帆 发表 2013-02-18 09:39:25 淘宝购物车页面的底部浮动层效果
  8. 新一 发表 2015-12-12 13:40:33 js简单实现模版功能
  9. simon 发表 2012-12-27 08:37:23 HTML5的placeholder 属性的向下兼容
  10. zak 发表 2015-06-22 02:42:51 《javascript性能优化》读书笔记
  11. 明城 发表 2012-05-24 00:00:00 改造 TL-MR11U 3g 路由器 Part.2
  12. tommy 发表 2015-12-18 05:29:36 2015 年 JavaScript 开发者调查报告

发表评论