返回顶部

收藏

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. 博主 发表 2012-12-05 00:00:00 Javascript Bookmark Scripts
  3. Novtopro He 发表 2015-10-08 03:23:38 JavaScript Scope Chain
  4. 博主 发表 2015-10-15 10:57:15 Javascript中常见的异步编程模型
  5. zrong 发表 2015-10-17 13:52:59 常用开源镜像站整理
  6. camnpr@163.com (佚名) 发表 2015-10-21 02:54:16 解决IE6、IE7、IE8、IE9不支持HTML5 placeholder属性值的方案
  7. knd2 发表 2014-08-26 14:59:29 使用 JavaScript 闭包实现 Google Maps 平滑缩放
  8. TAT.Johnny 发表 2015-10-31 15:55:23 React服务器端渲染实践小结
  9. David Walsh 发表 2015-11-02 14:11:40 JavaScript Promise API
  10. 博主 发表 2015-11-06 06:39:43 解决 ByClassName 在IE中的兼容性问题
  11. 阮一峰 发表 2015-11-12 13:46:35 读懂 ECMAScript 规格
  12. Jichao Ouyang 发表 2015-05-12 16:00:00 Functional JavaScript Mini Book

发表评论