编写高质量代码(7)

Javascript分层概念
分为3层
base层，最底层，有两个功能一个是用来兼容浏览器，第二是扩展js接口，提供一些更方便的接口
common层 依赖于base层接口，提供可复用的组件，是典型MVC模式里的 M 和页面内的具体功能没什么关系，功能是给page层提供组件
page层，三层最顶层，和页面的具体功能直接相关，是MVC里的C 依赖于前两个层，page层的功能是完成页面功能需求
下面主要是说base层的问题
封装一些基本函数
首先是childNodes问题，在火狐下，空格会被计入到子节点数，所以在使用nextS就会出现问题，如何兼容呢？

function getNextNode(node){
        node=(typeof node)=="string"?document.getElementById(node):node;
        var nextNode=node.nextSibling;
        if(!nextNode) return null;
        if(!document.all){
            while(true){
                if(nextNode.nodeType==1){
                    break
                }else{
                    if(nextNode.nextSibling){
                        nextNode=nextNode.nextSibling;
                    }else{
                        break;
                    }
                }
            }
        }
        return nextNode
    }

event对象兼容

function getElementTarget(e){
    e=window.event||e;
    return e.srcElement||e.target
}

阻止冒泡，前面的文章有介绍过

function stopPropagation(e){
    e=window.event||e;
    if(document.all){
        e.cancelBubble=true;
    }else{
        e.stopPropagation();
    }
}

事件绑定，ie下attachEvent 和标准的addEventListener

function on(node,eventType,fun){
    node=typeof node=="string"?document.getElementById(node):node;
    if(document.all){
        node.attachEvent("on"+eventType,fun);
    }else{
        node.addEventListener(eventType,fun,false)
    }
}

表格验证中，是否为空，有空格或者缩进就饶过

function trim(ostr){
    return ostr.replace(/^\s+|\s+$/g,"");
}

简单的getId封装

function get(node){
    node=typeof node=="string"?document.getElementById(node):node;
    return node
}

为了方便getClass函数，这个比我以前的更完整，可以判断多个class在一起的情况

function getClass(str,root,tag){
    if(root){
        root=typeof root=="string"?document.getElementById(root):root;
    }else{
        root=document.body;
    }
    tag=tag||"*";
    var els=root.getElementsByTagName(tag);
    var arr=[];
    for(var i=0,n=els.length;i<n;i++){
    //下面这一行就可以判断多个class中是否含有选定class，因为我们的节点不一定有几个class
        for(var j=0,k=els[i].className.split(" "),l=k.length;j<l;j++){
            if(k[j]==str){
                arr.push(els[i]);
                break;
            }
        }
    }
    return arr;
}

//---------定义类型判断函数--------
function isNumber(s){
    return !isNaN(s);
}
function isString(s){
    return typeof s==="string";
}
function isBoolean(s){
    return typeof s==="boolean";
}
function isFucntion(s){
    return typeof s==="function";
}
function isNull(s){
    return typeof s==="null";
}
function isUndefined(s){
    return typeof s==="undefined";
}
function isEmpty(s){
    return /^\s+$/.test(s);
}
function isArray(s){
    return s instanceof Array;
}

最后这一个，怎么说呢能力有限，我的解释也不是非常对，希望有人可以解释一下吧，这个也就是个人的理解

//---------继承--------
function extend(subClass,superClass){
    var F=function(){};
    F.prototype=superClass.prototype;//父级原型实例化成F的原型
    subClass.prototype=new F();//实例化子级原型
    subClass.prototype.constructor=subClass;//让construcetor指向子级
    subClass.superclass=superClass.prototype;//属性指向父级原型，这里为什么这么写有些疑问
    if(superClass.prototype.constructor==Object.prototype.constructor){//如果父函数也是继承别人的那么指正
        superClass.prototype.constructor=superClass;
    }
}