框架设计（一）

<!--调用getTag（tag，results）方法-->
<!--1.tag是一个标签名；-->
<!--2.results是一个容器，储存元素，传参时代表一个dom元素伪数组，不传就是默认为空-->

<!--注：此方法只适合标签-->
//-----------------------------------------
    function getTag(tag,results){
        results = results || [];
        <!--results是一个数组，同事也是一个对象，其__proto__属性中有push方法。。。-->
        results.push.apply(results,document.getElementsByTagName(tag));
        
        return results
    }

//对数组或者dom对象遍历的目的就是改查；
<!-------------------------------------------->

    arr = [2, 4, 8, 4];
    var sum=0;
    
    //求和
    for (var i = 0; i < arr.length; i++) {
        sum += arr[i]
    }
    console.log(sum)//18

    //求最大值
    var max = arr[0];
    for (var i = 0; i < arr.length; i++) {
        if (arr[i] > max) {
            max = arr[i]
        }
    }
    console.log(max)//8

    //求最小值
    var min = arr[0];
    for (var i = 0; i < arr.length; i++) {
        if (arr[i] < min) {
            min = arr[i]
        }
    }
    console.log(min)//2
    
    //查找
    for (var i = 0; i < arr.length; i++) {
        if (arr[i] === 4) {
            console.log(i)//2
            break
        }
    }
    
    
    
    //    封装for循环
    
    //分析：for循环的外层都一样就是循环体不一样，
    //所以封装的思路是将循环体作为函数的参数传进去
    
    //由于在调用each函数时无法访问循环体中的i和对应的值，所以将其作为参数传进去
    function each(arr,fn){
        for (var i = 0; i < arr.length; i++) {
            fn(i,arr)
        }
    }

    //求和
    each(arr,function(a,b){
        var sum =0;
        sum+=b[a]
    })
    console.log(sum)//18
    
    //求最大值
    var max =0;
    each(arr,function(a,b){
        if(b[a]>max){
            max =b[a]
        }
    })
    console.log(max)//8
    
    //求最小值
    var min =arr[0];
    each(arr,function(a,b){
        if(b[a]<min){
            max =b[a];
        }
    })
    console.log(min)//2
    
    //对于查询
    //问题在于，调用each方法时，查询到后，还是会继续循环查找，
    //不能中断循环，查找的结果会是最后一个
    //所以需要想办法将信息传递个循环体
    
    function each(arr,fn){
        for (var i = 0; i < arr.length; i++) 
        
            //if(fn(i,arr)==="xx"){
            if(fn(i,arr)===false){
                break;
            }

        }
    }
    
    var index =-1;
    each(arr,function(a,b){
        if(b[a]===4){
            console.log(this);//window
            index =a;
            //return "xx";//由于“xx”是个字符串，万一数组的内容就是“xx”会出问题，
            return false
        }
    })
    console.log(index)//1
    
    //再来看看this指向
    //可以考虑将this指向当前被遍历的对象
    //所以代码更改
    
    function each(arr,fn){
        for (var i = 0; i < arr.length; i++) {
            if(fn.call(arr,i,arr)===false){//利用call改变this指向；
                break;
            }
        }
    }

    var index =-1;
    each(arr,function(a,b){
        console.log(this);//arr
        if(b[a]===4){
            index =a;
            return false;
        }
    })
    console.log(index)

<!------------------------------------------->
<div>122454</div>
<div>aaaaaa</div>
<p>我是一个兵</p>
<p>AAAAA</p>
<script>
    function each(arr,fn){
        for (var i = 0; i < arr.length; i++) {
            if(fn.call(arr[i],i,arr)===false){
                break;
            }
        }
    }

    function getTag(tag,results){
        results = results || [];
        results.push.apply(results,document.getElementsByTagName(tag));
        return results
    }

    var elem = getTag("div");
    elem = getTag("p",elem);

    each(elem,function(a,b){
        console.log(a,b);//打印的结果是索引和对应的值；
        this.style.backgroundColor = "pink";
    })
    //结果是对应的标签背景都变成了粉红色
</script>