框架设计续集（四）

对于上述的获取元素的方法，其中有缺陷，在于获取元素都是对整个document进行遍历，在性能方面可以优化

给以前的获取元素都加上第三个参数，上下文（context），意思是在指定的区域查找元素

//---------------------------------
/**
 * 假如context是一个dom对象
 */
    //假设context是一个dom对象
//对浏览器能力检测
var support ={};
support.getElementsByClassName = (function(){
    var isExist = !!document.getElementsByClassName;
    console.log(document.getElementsByClassName);
    if(isExist && typeof document.getElementsByClassName == "function" ){
        var  oDivParent = document.createElement("div"),
            oDivChild = document.createElement("div");
        oDivChild.className = "cc";
        oDivParent.appendChild(oDivChild);
        return  oDivParent.getElementsByClassName("cc")[0] ===oDivChild;
    }
    return false

})();


//遍历for(){}
function each(arr,fn){
    for(var i=0;i<arr.length;i++){
        if(fn.call(arr[i],i,arr[i])===false){
            break
        }
    }
}


//单个的获取元素的方法
function getTag(tag,context,results){
    results = results || [];
    context = context ||document;
    results.push.apply(results,context.getElementsByTagName(tag));
    return results
}

function getID(id,results){
    results = results || [];
    results.push(document.getElementById(id));
    return results
}

function getClass(classname,context,results){
    results = results || [];
    context = context ||document;
    var arr, i,reg;
    if(support.getElementsByClassName){
        results.push.apply(results,document.getElementsByClassName(classname));
    }else{
        arr = context.getElementsByTagName("*");
        for( i= 0;i<arr.length;i++){
            reg = new  RegExp("\b"+classname+"\b");
            if(reg.test(arr[i].className)){
                results.push(arr[i])
            }
        }
    }
    //console.log(results)
    return results
}


//对所有的元素的获取
function getElem(selector,context,results){
    results = results || [];
    context = context ||document;
    var regE = /^(?:#([w-]+)|.([w-]+)|([w]+)|(*))$/,
        ex = regE.exec(selector);
    if(ex){
        if(ex[1]){
            getID(ex[1],results);
        }else if(ex[2]){
            getClass(ex[2],context,results);
        }else if(ex[3]){
            getTag(ex[3],context,results)
        }else if(ex[4]){
            getTag("*",context,results)
        }
    }
    return results;
}

<div id="con">
    <div class="box box1">123</div>
    <p class="box box1">pppppppppppppppp</p>
    <h4>我是大标题</h4>
</div>
<body>
<script src="js/common1.0.js"></script>
<script>
    //对于先前的获取元素的方法都是在document下进行的，性能可以优化
    //假定上下文是一个dom元素
    var list = getElem(".box",getElem("#con"));
    console.log(list);
    each(list,function(i,v){
        this.style.background = "pink";
    })
</script>


//结果(#con下的.box)背景色变粉红

/*
*假如上下文是一个dom对象伪数组
*需要修改的地方就是在调用获取元素函数传的上下文之前进行遍历，选择了在对总的函数进行修改，
*/
//对所有的元素的获取
function getElem(selector,context,results){
    results = results || [];
    context = context ||document;
    var regE = /^(?:#([w-]+)|.([w-]+)|([w]+)|(*))$/,
        ex = regE.exec(selector);
    if(ex){
        //下边的判断是为了加入上下文不传参，代表document，此时下边的遍历在运行时会报错
        if(context.nodeType){
            context = [context]
        }
        each(context,function(i,v){
            if(ex[1]){
                getID(ex[1],results);
            }else if(ex[2]){
                getClass(ex[2],v,results);
            }else if(ex[3]){
                getTag(ex[3],v,results)
            }else if(ex[4]){
                getTag("*",v,results)
            }
        })

    }
    return results;
}
//-------------------------------
eg：
<div class="con" id="con">
    <div class="box box1">123</div>
    <p class="box box1">pppppppppppppppp</p>
    <h4>我是大标题</h4>
</div>
<div class="con">
    <p class="box box1">我是第二个p标签</p>
    <h4 class="box">我是大标题</h4>
</div>
<body>
<script src="js/common1.1.js"></script>
<script>
    //对于先前的获取元素的方法都是在document下进行的，性能可以优化
    //假定上下文是一个dom元素伪数组
    each(getElem(".box",getElem(".con")),function(i,v){
        this.style.background = "pink";
    })
</script>

/*
加入context传进来的是一个选择器字符串（这个才是真正的实用的）
*/

//对所有的元素的获取
function getElem(selector,context,results){
    results = results || [];
    context = context ||document;
    var regE = /^(?:#([w-]+)|.([w-]+)|([w]+)|(*))$/,
        ex = regE.exec(selector);
    if(ex){
        //在context不传参数时，对document的情况进行转化，
        if(context.nodeType){
            context = [context]
        }
        if(typeof context == "string"){
            //将选择器字符串转化为dom数组,加上if判断判断的目的是下边函数递归，需要跳出
            context = getElem(context);
        }
        each(context,function(i,v){
            if(ex[1]){
                getID(ex[1],results);
            }else if(ex[2]){
                getClass(ex[2],v,results);
            }else if(ex[3]){
                getTag(ex[3],v,results)
            }else if(ex[4]){
                getTag("*",v,results)
            }
        })

    }
    return results;
}

eg：

<div class="con" id="con">
    <div class="box box1">123</div>
    <p class="box box1">pppppppppppppppp</p>
    <h4>我是大标题</h4>
</div>
<div class="con">
    <p class="box box1">我是第二个p标签</p>
    <h4 class="box">我是大标题</h4>
</div>
<body>
<script src="js/common1.2.js"></script>
<script>
    //对于先前的获取元素的方法都是在document下进行的，性能可以优化
    //假定上下文是一个dom元素伪数组
    each(getElem(".box",".con"),function(i,v){
        this.style.background = "pink";
    })

    each(getElem(".box1"),function(i,v){
        this.style.fontSize= "25px";
        this.style.color = "white"
    })
</script>