dojo/dom源码学习

dojo/dom模块作为一个基础模块，最常用的就是byId方法。除此之外还有isDescendant和setSelectable方法。

　　dom.byId(myId)方法：

　   各种前端类库都免不了与DOM节点打交道，操作DOM的方法千变万化最终还是要回到原生的那几个方法中，因为类库再快也快不过原生。所以在dom.byId方法中，还是要依靠document.getElementById('myId')方法。假如没有ie，假如不要考虑兼容性，getElementById方法可以完全满足我们的需求。但是，ie毁了一切，借用美国同事的一句话：Fuck the stupid IE! 兼容性问题有两条：

• ie8及较低版本中，myId不区分大小写，所以myid跟myId会返回同样的结果
• ie7及较低版本中，如果name名称与给定ID相同的表单元素且表单元素在给定ID元素的前面，那么IE就会返回那个表单元素

　　这就要求我们在必须判断一下得到的元素的id是否真与传入参数相同。判断方法是利用id属性或id特性节点：

var te = id && document.getElementById(id)te && (te.attributes.id.value == id || te.id == id)

　　如果上帝为你关上了一扇门，他一定会为你打开另一扇门（好矫情，就行天无绝人之路嘛）。ie4开始提供了document.all，它是一个代表所有元素的集合。document.all[myId]返回id为myId的一个元素或者包含name为myId的一个类数组。我们可以循环判断其中的元素是否满足要求：

var eles = document.all[id];                if(!eles || eles.nodeName){                    eles = [eles];                }                // if more than 1, choose first with the correct id                var i = 0;                while((te = eles[i++])){                    if((te.attributes && te.attributes.id && te.attributes.id.value == id) || te.id == id){                        return te;                    }                }

　　所以，dojo/dom中的实现根据浏览器的不同，有不同的实现：

    if(has("ie")){        dom.byId = function(id, doc){            if(typeof id != "string"){                return id;            }            var _d = doc || win.doc, te = id && _d.getElementById(id);            // attributes.id.value is better than just id in case the            // user has a name=id inside a form            if(te && (te.attributes.id.value == id || te.id == id)){                return te;            }else{                var eles = _d.all[id];                if(!eles || eles.nodeName){                    eles = [eles];                }                // if more than 1, choose first with the correct id                var i = 0;                while((te = eles[i++])){                    if((te.attributes && te.attributes.id && te.attributes.id.value == id) || te.id == id){                        return te;                    }                }            }        };    }else{        dom.byId = function(id, doc){            // inline'd type check.            // be sure to return null per documentation, to match IE branch.            return ((typeof id == "string") ? (doc || win.doc).getElementById(id) : id) || null; // DOMNode        };    }

　　

　　dom.isDescendant（node, ancestor）方法：

　　这个方法用来判断node是否是ancestor的一个子节点，其实就是孩子找父亲。孩子找父亲比较简单，而父亲找孩子是比较难的，因为子节点一定有父节点，所以只要一级一级的找上去即可。

dom.isDescendant = function(/*DOMNode|String*/ node, /*DOMNode|String*/ ancestor){        try{            node = dom.byId(node);            ancestor = dom.byId(ancestor);            while(node){                if(node == ancestor){                    return true; // Boolean                }                node = node.parentNode;            }        }catch(e){ /* squelch, return false */ }        return false; // Boolean    };

　　其实还有一个原生的函数也可以满足要求：element.contains方法，不过这个方法并没有被纳入规范中。但是几乎所有的浏览器都支持，包括IE（最初就是ie增加的该方法，总算做了件好事。。）。所以该方法也可以这样实现：

dom.isDescendant = function(/*DOMNode|String*/ node, /*DOMNode|String*/ ancestor){        try{            node = dom.byId(node);            ancestor = dom.byId(ancestor);            return ancestor.contains(node);        }catch(e){ /* squelch, return false */ }        return false; // Boolean    };

 

　　dom.setSelectable(node, selectable)方法：

　　看名字也知道是用来设置一个节点及其自己点是否可选中的。css属性中可以通过设置“user-select”来控制一个元素是否可选择，但这个属性并未被纳入标准中去，所以各个浏览器中都需要加浏览器前缀，如：-webkit、-moz、-ms、-o等；所以我们可以通过设置元素的style属性中的相应属性来控制元素的可选择性。但是，ie总是太操蛋，大多数情况下，ms前缀都可以解决问题，但是如果一个将一个frame作为编辑器使用时，设置msUserSelect为none时无法达到效果，所以在ie中我们利用unselectable特性来解决这个问题。ie下存在的这个特性：unselectable， 设为on则不可选中，移除这个属性则表示可选中。

　　dojo的实现中，首先判断userSelect属性是否能使用：

has.add("css-user-select", function(global, doc, element){        // Avoid exception when dom.js is loaded in non-browser environments        if(!element){ return false; }                var style = element.style;        var prefixes = ["Khtml", "O", "Moz", "Webkit"],            i = prefixes.length,            name = "userSelect",            prefix;        // Iterate prefixes from most to least likely        do{            if(typeof style[name] !== "undefined"){                // Supported; return property name                return name;            }        }while(i-- && (name = prefixes[i] + "UserSelect"));        // Not supported if we didn't return before now        return false;    });

　　这里省略了ms前缀。

　　然后根据对"css-user-select"的支持，使用不同的实现：

var cssUserSelect = has("css-user-select");    dom.setSelectable = cssUserSelect ? function(node, selectable){        // css-user-select returns a (possibly vendor-prefixed) CSS property name        dom.byId(node).style[cssUserSelect] = selectable ? "" : "none";    } : function(node, selectable){        node = dom.byId(node);        // (IE < 10 / Opera) Fall back to setting/removing the        // unselectable attribute on the element and all its children        var nodes = node.getElementsByTagName("*"),            i = nodes.length;        if(selectable){            node.removeAttribute("unselectable");            while(i--){                nodes[i].removeAttribute("unselectable");            }        }else{            node.setAttribute("unselectable", "on");            while(i--){                nodes[i].setAttribute("unselectable", "on");            }        }    };

　　ie中，循环改变所有子节点的unselectable特性来控制选择性。

　　分享一条小经验：设置一个元素不可选中时，最好在能满足需求的最远祖先上设置，如果仅仅在一个元素上设置未必能够达到效果；比如：设置一个图片不可选中，但是祖先可以选中，用户可能会祖先选中时会变蓝，看起来好像图片依然能够被选中。