jQuery源码学习5——工具方法之attr parents sibling clean

（1）、attr

    attr: function(elem, name, value){
        var fix = {
            "for": "htmlFor",
            "class": "className",
            "float": "cssFloat",
            innerHTML: "innerHTML",
            className: "className"
        };

        if ( fix[name] ) {
            if ( value != undefined ) elem[fix[name]] = value;
            return elem[fix[name]];
        } else if ( elem.getAttribute ) {
            if ( value != undefined ) elem.setAttribute( name, value );
            return elem.getAttribute( name, 2 );
        } else {
            name = name.replace(/-([a-z])/ig,function(z,b){return b.toUpperCase();});
            if ( value != undefined ) elem[name] = value;
            return elem[name];
        }
    },

从形参上基本上可以猜测出这个方法的作用

$.attr(oDiv,"abc")是获取到oDiv的abc属性的值

$.attr(oDiv,"abc",1)是将oDiv的abc属性值设置为1

最开始在fix这个对象中枚举了需要修正的一些属性

接下来先在if中判断传进来的属性是否在fix所枚举的属性中

如果在的话要使用修正后的属性，例如

如果调用的时候是这样调：$.attr(oDiv,"class")

那么在该方法内部就会被修正为oDiv["className"]

然后再分析接下来的else if

else if的条件是判断elem有么有getAttribute这个方法

如果有这个方法那就通过get/setAttribute来获取/设置属性即可

如果元素不支持getAttribute这个方法就会走到最后的else中

然后将形如aaa-bbb-ccc的属性转换成驼峰式的名字再进行获取/设置

经过测试，如果通过下面这样给元素设置了自定义属性：

<div id="div1" abc="123"></div>

那么在IE8- 的浏览器中通过oDiv.abc或者oDiv.getAttribute("abc");都可以得到123

而在IE9+ chrome FF中通过oDiv.abc得到了undefined，而oDiv.getAttribute("abc")可以得到123

测试完了之后感觉else这个分支不知道什么时候进入了

（2）、parents

    parents: function( elem ){
        var matched = [];
        var cur = elem.parentNode;
        while ( cur && cur != document ) {
            matched.push( cur );
            cur = cur.parentNode;
        }
        return matched;
    },

从名字上能看出来这个方法是要获得elem的父元素

而且parents还是复数形式

所以会一直向顶层追踪

在方法内部用递归做到了这一点

最后把所有取到的父元素放到match中直接返回

match数组中第一个元素是elem的直接父级，最后一个元素是最顶层的父级

（3）、sibling

    sibling: function(elem, pos, not) {
        var elems = [];

        var siblings = elem.parentNode.childNodes;
        for ( var i = 0; i < siblings.length; i++ ) {
            if ( not === true && siblings[i] == elem ) continue;

            if ( siblings[i].nodeType == 1 )
                elems.push( siblings[i] );
            if ( siblings[i] == elem )
                elems.n = elems.length - 1;
        }

        return jQuery.extend( elems, {
            last: elems.n == elems.length - 1,
            cur: pos == "even" && elems.n % 2 == 0 || pos == "odd" && elems.n % 2 || elems[pos] == elem,
            prev: elems[elems.n - 1],
            next: elems[elems.n + 1]
        });
    },

sibling的意思是兄弟姐妹，所以这个方法是用来获取传入的elem的兄弟元素的

至于第二个参数pos是位置的意思，通过搜索jQuery内部使用sibling的情况发现

pos的值可以是数字、"odd"，在sibling这个函数的函数体中还发现了pos的值还可以是"even"

至于第三个参数not，还没有发现它在jQuery源码的哪个地方用到了

在该方法内部，先循环遍历了elem的直接父级下的所有元素

值得注意是这里面有文本节点、注释节点、元素节点等等

所以里面的if条件作了一定的筛选

先来看下第一个if条件，如果not是true而且遍历到的元素(sibling[i])就是传入的elem时结束本次循环

到这里我们就知道这个sibling方法的第三个参数not到底是什么意思了

如果not传进来true，就代表将来返回的结果集中不包含elem本身，反之则包含

第二个if条件，则是将元素节点筛选出来放入elems

第三个if条件，给elems加了一个属性n，这个属性n代表elem在数组elems中的位置

接下来再在elems上扩展last cur prev next四个属性

最后将elems返回回去

last类型是bool，表示elem是否是elems里面的最后一个

prev next分别返回elem的前一个元素和后一个元素

如果elems.n是0，即传进来的elem是所有兄弟元素中的第一个时，那么elems[elems.length-1]就得到elems[-1]

也就是数组下标越界了

但是经过测试并没有报错，只是返回undefined

最后再看最麻烦的cur

说实话，日常开发的话最好加上小括号来表明优先级，这样的代码看起来不太友好

所以我画了一张图，这样看起来更明显

cur有分成了三种情况，最简单的就是最后一个红框

这是传入的pos是数字的情况，返回值的意思就是在所有的兄弟元素中，elem是不是第pos个元素

第二种、第三种情况就是pos分别传入even和odd的情况

pos传入even时，返回值的意思就是在所有的兄弟元素中，elem的索引是不是偶数

pos传入odd自然不用多说

（4）、clean

    clean: function(a) {
        var r = [];
        for ( var i = 0; i < a.length; i++ ) {
            if ( a[i].constructor == String ) {

                var table = "";
    
                if ( !a[i].indexOf("<thead") || !a[i].indexOf("<tbody") ) {
                    table = "thead";
                    a[i] = "<table>" + a[i] + "</table>";
                } else if ( !a[i].indexOf("<tr") ) {
                    table = "tr";
                    a[i] = "<table>" + a[i] + "</table>";
                } else if ( !a[i].indexOf("<td") || !a[i].indexOf("<th") ) {
                    table = "td";
                    a[i] = "<table><tbody><tr>" + a[i] + "</tr></tbody></table>";
                }
    
                var div = document.createElement("div");
                div.innerHTML = a[i];
    
                if ( table ) {
                    div = div.firstChild;
                    if ( table != "thead" ) div = div.firstChild;
                    if ( table == "td" ) div = div.firstChild;
                }
    
                for ( var j = 0; j < div.childNodes.length; j++ )
                    r.push( div.childNodes[j] );
            } else if ( a[i].jquery || a[i].length && !a[i].nodeType )
                for ( var k = 0; k < a[i].length; k++ )
                    r.push( a[i][k] );
            else if ( a[i] !== null )
                r.push(    a[i].nodeType ? a[i] : document.createTextNode(a[i].toString()) );
        }
        return r;
    },

 

在这个系列的第二篇文章中提到过，有3个地方用到了clean 最开始的jQuery构造函数里面 domManip里面 wrap里面

但是clean这个函数具体用在什么场合下，还是不太清楚

不过没有关系，我们先大概了解一下它是干什么的，等分析到domManip wrap等这些函数里面再去看

通过查看clean函数被调用的三个地方来看，它貌似是接收一个形如 ["<div></div>",$("a"),"<table></table>"]的数组参数a

数组里面的每一项都会被遍历到，遍历的过程中会根据其类型走三个不同的分支

第一个分支是处理字符串的，第二个分支处理jQuery对象，第三个分支处理非空对象

先看较为简单的第二个分支，进入这个分支有两个渠道

第一个渠道是a[i]有length属性并且没有nodeType属性

不能有nodeType属性说明a[i]不是DOM元素，有length属性又说明得是类数组元素

第二个渠道是a[i]有jquery属性，即a[i]是jQuery对象

不论哪种渠道，最后r中存放的都是这些类数组集合中的各项

最后一个else if分支看起来也是同样的道理

最后再来看很复杂的第一个if分支

处理["<div></div>","<table></table>"]的情况

里面有对是不是thead tbody tr td标签做了判断

如果不是这一系列的标签，那代码就简化成了这样：

var div = document.createElement("div");
div.innerHTML = a[i];
for ( var j = 0; j < div.childNodes.length; j++ ){
    r.push( div.childNodes[j] );
}

其实就是把string类型的标签转换为真正的DOM元素，最后存放在r中

对于表格家族的标签，处理的过程好像是当传入thead tbody tr的时候

就在这些标签的外层包裹table标签

当传入td的时候，就在td外层包裹table tbody tr

if ( table ) {
    div = div.firstChild;
    if ( table != "thead" ) div = div.firstChild;
    if ( table == "td" ) div = div.firstChild;
}

这段代码的作用是找到距离传入的元素最近的父元素

通过以上分析和我的猜测，再联想到这个方法的名字，感觉clean是要返回一个纯粹的数组

这个数组里面存放的就是原生DOM对象

为什么说是一个纯粹的数组呢？因为类数组对象有可能形如：

    {
        "1":oDiv1,
        "2":oDiv2,
        "3":oDiv3,
        "length":3,
        "aaa":123,
        "bbb":456
    }

也就是说类数组对象上除了有length属性之外，还有aaa bbb这些东西

而这个方法的功能之一就是把这些aaa bbb之类的属性给clean掉

功能之二就是将"<div></div>"转换成对应的DOM元素