原生 js前端路由系统实现2之代码可读性 和可扩展性

前一篇 尝试着实现了前端路由的部分功能 原生 js前端路由系统实现1

代码可读性

    影响代码可读和易于理解的因素  

        1 代码规范 2缩进空格 3减少函数嵌套层次 4函数单一职责 5。。。。

 以上这些顶多只能在外观上面看起来清晰(也不一定真的清晰),但随着代码量的增大  代码依然非常难读和易于理解 

如果给你几十行代码,程序员通过琢磨也能短时间搞清楚,如果给你上万行代码 即便技术大牛也得花大量的时间去阅读和调试才能看懂

影响代码可读性的主要原因是 代码的多少

以下是上次实现路由的代码 去掉兼容AMD等库的代码 是百来行,初次看的时候依然有点吃力,需要花点时间才能看懂  之后会把它改成更容易理解和看懂的代码

!function(root,fn){
	if (typeof exports === 'object') {
        // Node.
        module.exports = fn.call(root);
    } else if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(function(){ return fn.call(root) });
    } else {
        // Browser globals (root is window)
        root.diqye = fn.call(root);
    }
}(this,function(){
    var TYPE=(function(){
            var r={},types=['Arguments','Function','String','Number','Date','RegExp','Error','Null'];
            for(var i=0,t;t=types[i++];){
                !function(t){
                    r['is'+t]=function(obj){
                        return Object.prototype.toString.call(obj) === '[object '+t+']';
                    }
                }(t)
            }
            return r;
        })();
    //前端路由 本来打算写成一个函数,但路由对象只需要全局存在一个即可 并没有发现需要多个对象存在的场景
    var route=(function(){
        var p={
            //全局拦截器,本来想用链表来实现,但基于Javascript的特性用数组实现更加简单 和易用
            headUseFns:[],
            gets:[],
            type:{
                'number':/^\d+$/,
                'string':/^[^\/]+$/,
                'date':/^[0-9]{6,6}$/
            }
        };
        function getPath(url){
            var path=url.split("#")[1];
            if(!path)return "/";
            if(path.charAt(0)!="/")path="/"+path;
            return path;
        }

        function use(fn){
            p.headUseFns.push(fn);
        }

        function hashchange(path){
            var req={path:path},hlen=p.headUseFns.length;
            if(hlen==0){
                doother(req);
                return;
            }
            //执行拦截器链
            !function intec(i){
                if(i==hlen){
                    doother(req);
                    return;
                }
                p.headUseFns[i](req,function(){
                    intec(i+1);
                });
            }(0);
        }

        function doother(req){
            var path=req.path,hlen=p.gets.length;
            var a=path.split('?');
            if(a[1])path=a[0];
            path=path.split('//').join('/');
            if(path.length!=1&&path.charAt(path.length-1)=='/')path=path.substr(0,path.length-1);
            //执行拦截器链
            !function intec(i){
                if(i==hlen){
                    return;
                }
                if(p.gets[i].match(path,req)){
                    p.gets[i].fn(req,function(){
                        intec(i+1);
                    });
                }else{
                    intec(i+1);
                }

            }(0);
        }

        function get(context,fn){
            var match=null;
            if(TYPE.isFunction(context))match=context;
            else if(TYPE.isRegExp(context)){
                match=function(path,req){
                    var para=context.exec(path);
                    if(para){
                        req.para=para;
                    }
                    return para;
                }
            }else if(TYPE.isString(context)){
                match=stringmatch(context);
            }
            var getter={
                match:match,
                fn:fn
            };
            p.gets.push(getter);
        }
        function stringmatch(context){
            var a=context.split(':'),b=context.split('*');
            if(a.length==1&&b.length==1){
                return function(path,req){
                    return path==context;
                }
            }else if(a.length!=1){
                var reg=p.type[a[1]];
                if(reg==null)reg=new RegExp(a[1]);
                return function(path,req){
                    var para=path.substr(a[0].length);
                    var r=path.indexOf(a[0])==0&&reg.test(para);
                    if(r)req.para=para;
                    return r;
                }
            }else if(b.length!=1){
                return function(path,req){
                    return path.indexOf(b[0])==0;
                }
            }
        }
        function start(){
            window.onhashchange=function(){
                var path=getPath(location.href);
                hashchange(path);
            }
            var path=getPath(location.href);
            hashchange(path);
        }
        function to(path){
            window.location.hash=path;
        }
        
        return {
            start:start,
            use:use,
            get:get,
            to:to,
            p:p
        }
    })();
    return {
        type:TYPE,
        route:route
    }
});

代码不管怎么写 最终都是操作数据的 没有数据代码啥都不是(即使语法级别的 也算是一个语法树的数据) 所以看代码的时候 一般脑子中会勾勒出一幅数据图

以上代码主要提供几个api  start,use,get,to 他们维护的数据是p

var p={
            headUseFns:[],
            gets:[],
            type:{
                'number':/^\d+$/,
                'string':/^[^\/]+$/,
                'date':/^[0-9]{6,6}$/
            }
        };

p.headUseFns 是一个数组 里面存放的全部是拦截器 由use函数 和 hashchange事件去维护

p.gets 类似上面 不过是由get函数维护  p.type是为p.gets服务的

当搞明白这些数据的意义时候 不需要看代码了

上面的代码之所以看起浪费时间的地方(相对于来说) 个人觉得就是维护的数据是多个 当一段代码操作数据的时候脑中肯定会想 这个数据的来龙去脉 操作两个数据的时候就要在脑中想两个数据的环境 可惜大脑是单线程的 当在脑中关注的东西超过1个的时候 大脑就会增加负担 同时关注的东西越多大脑就越容易混乱

我觉得影响代码可读性的第二个因素是代码所维护的数据个数 也就是大脑关注的数据个数

上述代码我要变的更易读,我需要把代码变少,代码变少我需要把功能变少。功能变少并不是说要去掉功能而是做一个通用的功能 后续的功能通过可扩展去添加 刚好此时的use函数 可以做为一个通用函数 get函数可以基于use去做 代码简化成

var route=(function(){
        var p={
            intes:[]
        };
        function getPath(url){
            var path=url.split("#")[1];
            if(!path)return "/";
            if(path.charAt(0)!="/")path="/"+path;
            return path;
        }
        function use(fn){
            p.intes.push(fn);
        }
        function hashchange(path){
            var req={path:path},hlen=p.intes.length;
            if(hlen==0){
                doother(req);
                return;
            }
            //执行拦截器链
            !function intec(i){
                if(i==hlen){
                    return;
                }
                p.intes[i](req,function(){
                    intec(i+1);
                });
            }(0);
        }
        function start(){
            window.onhashchange=function(){
                var path=getPath(location.href);
                hashchange(path);
            }
            var path=getPath(location.href);
            hashchange(path);
        }
        
        return {
            start:start,
            use:use
        }
    })();

可扩展性

当你的代码可读性自认为已经达标的情况下 此时如果增加代码很容易会对原先代码造成污染 久之可能自己都看不懂了(比较实际的情况是人离职留给新来的了  哈哈 …………)这个时候比较成熟的解决法方案就是通过扩展来做其它的东东了

我需要对库本身的API进行扩展  提供一个扩展API函数 这个函数的名字需要参考别的框架中的名字  使用别的流行的框架功能函数命名也可以提高阅读速度 js中扩展api基本上是两个函数 一个是以jquery为主的extends函数  一个是mix 个人比较有洁癖 喜欢用短名字 mix ~~~~~~

//前端路由 本来打算写成一个函数,但路由对象只需要全局存在一个即可 并没有发现需要多个对象存在的场景
    var route=(function(){
        var p={
            intes:[]
        };
        function getPath(url){
            var path=url.split("#")[1];
            if(!path)return "/";
            if(path.charAt(0)!="/")path="/"+path;
            return path;
        }
        function use(fn){
            p.intes.push(fn);
        }
        function hashchange(path){
            var req={path:path},hlen=p.intes.length;
            if(hlen==0){
                doother(req);
                return;
            }
            //执行拦截器链
            !function intec(i){
                if(i==hlen){
                    return;
                }
                p.intes[i](req,function(){
                    intec(i+1);
                });
            }(0);
        }
        function start(){
            window.onhashchange=function(){
                var path=getPath(location.href);
                hashchange(path);
            }
            var path=getPath(location.href);
            hashchange(path);
        }
        //扩展API
        function mix(obj){
            for(var key in obj){
                result[key]=obj[key];
            }
        }
        var result={
            start:start,
            use:use,
            mix:mix
        }
        return result;
    })();

通过mix实现get函数功能

 //get 路由实现
    !function(mix){
        //获取处理后的path  去掉问好 和多余的/
        function pathfn(path){
            var a=path.split('?');
            if(a[1])path=a[0];
            path=path.split('//').join('/');
            return path;
        }
        //function interceptor
        function get1(fn,cb){
            return function(req,next){
                if(fn(pathfn(req.path)))cb(req,next);
                else next();
            }
        }
        //regExp interceptor
        function get2(reg,cb){
            return function(req,next){
                var para=reg.exec(pathfn(req.path));
                if(para){
                    req.para=para;
                    cb(req,next);
                }else next();
            }
        }
        //:xxx  xxx是可以扩展的
        function get3(ps,cb){
            var reg=get.type[ps[1]];
            return function(req,next){
                var path=pathfn(req.path);
                var para=path.substr(ps[0].length);
                if(pathfn(req.path).indexOf(ps[0])==0&&reg.test(para)){
                    req.para=para;
                    cb(req,next);
                }else next();
            }
        }
        //通配符  /xxxx*  *后面不允许有字符
        function get4(os,cb){
            return function(req,next){
                if(pathfn(req.path).indexOf(os[0])==0)cb(req,next);
                else next();
            }
        }
        //string interceptor
        function get5(path,cb){
            return function(req,next){
                if(path==pathfn(req.path))cb(req,next);
                else next();
            }
        }
        function get(path,cb){
            //匹配路径支持的5中情况
            if(TYPE.isFunction(path))this.use(get1(path,cb));
            if(TYPE.isRegExp(path))this.use(get2(path,cb));
            if(!TYPE.isString(path))return;
            var a=path.split(':');
            if(a.length!=1){
                this.use(get3(a,cb));
                return;
            }
            var b=path.split('*');
            if(b.length!=1){
                this.use(get4(b,cb));
                return;
            }
            this.use(get5(path,cb));
        }
        get.type={
            'number':/^\d+$/,
            'string':/^[^\/]+$/,
            'date':/^[0-9]{6,6}$/
        };
        mix({
            get:get
        });
    }(route.mix);

以上主要是支持了5中路由的匹配方式, 而这五中方式 函数取名 get1 get2 get3 get4 get5 但看函数名字就能知道属于统一类的  只是做不同的分支 

以上所有代码地址 https://git.oschina.net/diqye/route.js

后续会扩展querystring功能 即对 url中的参数 和json对象互相转换

你可能感兴趣的:(原生 js前端路由系统实现2之代码可读性 和可扩展性)