简易路由操作

路由操作出现很早了，最近这些时候，webapp的出现，路由操作被各个框架实现。

在那些框架上的路由链接大概都这样子index.html#/index/或者 index.html#/list/12

通过对hash变化的监听，可以知道我们的路由到哪里了，然后再分配给应执行的函数 这样就可以生效。

一个可能的使用方式是：

   router({
            "/index":function(){
                $('#secoend').fadeOut(function(){
                    $("#index").fadeIn();
                })
            },
            "/list":function(){
                $('#index').fadeOut(function(){
                    $("#secoend").fadeIn();
                })
            }
        })

以上所表述的是 当页面为 index.html#!/index 执行对应的函数。 这是个最简单的做法，其它框架实现的复杂方法先不学习了Orz

代码：

   var  Router = function(routes){
        var win = window,
            ac =  [],
            def = {
                type:"!"
            };
        if(!routes || typeof routes!=="object") return ;
        else parseRouter(routes);

        function parseRouter(routes){
            for( var i in routes){
                if(typeof i=='string' && typeof routes[i] =="function")
                    ac.push({
                        path:i,
                        fn:routes[i]
                    })
            }
        }
        function parseHash(url){
            var ucache = url.replace(/^[^#]*/,''),
                u ;
            if(ucache[1]!=def.type){
                return '';
            }
            u = ucache.slice(2);
            return u ;
        }
        $(win).bind('hashchange', function(ev) {
            var originEvent = ev.originalEvent,
                newUrl = originEvent.newURL,
                oldUrl = originEvent.oldURL;
            checkHash(newUrl)
        });
        function checkHash(url){
            var hash  = parseHash(url);
            $(ac).each(function(i,router){
                if(router.path==hash){
                    router.fn()
                }
            })
        }
        checkHash(win.location.hash)
    }
    $.router = Router;

注意

我们使用的默认方式是 #!外加路由路径

使用方法

    <a class="btn" href="#!/index"> /index</a>
    <a class="btn" href="#!/secoend"> /secoend</a>

 $.router({
            "/index":function(){
                $('#secoend').fadeOut(function(){
                    $("#index").fadeIn();
                })
            },
            "/secoend":function(){
                $('#index').fadeOut(function(){
                    $("#secoend").fadeIn();
                })
            }
        })