dojo dom原始碼學習

dojo/dom模組作為乙個基礎模組，最常用的就是byid方法。除此之外還有isdescendant和setselectable方法。

dom.byid(myid)方法：

各種前端類庫都免不了與dom節點打交道，操作dom的方法千變萬化最終還是要回到原生的那幾個方法中，因為類庫再快也快不過原生。所以在dom.byid方法中，還是要依靠document.getelementbyid('myid')方法。假如沒有ie，假如不要考慮相容性，getelementbyid方法可以完全滿足我們的需求。但是，ie毀了一切，借用美國同事的一句話：**** the stupid 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)
//if more than 1, choose first with the correct id
var i = 0
; 
while((te = eles[i++]))
}

所以，dojo/dom中的實現根據瀏覽器的不同，有不同的實現：

if(has("ie"
)) 
var _d = doc || win.doc, te = id &&_d.getelementbyid(id);
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))
else
//if more than 1, choose first with the correct id
var i = 0
; 
while((te = eles[i++]))}}
};}
else
; }

dom.isdescendant（node, ancestor）方法：

這個方法用來判斷node是否是ancestor的乙個子節點，其實就是孩子找父親。孩子找父親比較簡單，而父親找孩子是比較難的，因為子節點一定有父節點，所以只要一級一級的找上去即可。

dom.isdescendant = function(/*
domnode|string
*/ node, /*
domnode|string
*/ancestor)
node =node.parentnode;}}
catch(e)
return
false; //
boolean
};

其實還有乙個原生的函式也可以滿足要求：element.contains方法，不過這個方法並沒有被納入規範中。但是幾乎所有的瀏覽器都支援，包括ie（最初就是ie增加的該方法，總算做了件好事。。）。所以該方法也可以這樣實現：

dom.isdescendant = function(/*
domnode|string
*/ node, /*
domnode|string
*/ancestor)
catch(e)
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)
var style =element.style;
var prefixes = ["
khtml
", "
o", "
moz", "
webkit"],
i =prefixes.length,
name = "
userselect",
prefix;
//iterate prefixes from most to least likely
do }
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) : function(node, selectable)
}else
}};

ie中，迴圈改變所有子節點的unselectable特性來控制選擇性。

分享一條小經驗：設定乙個元素不可選中時，最好在能滿足需求的最遠祖先上設定，如果僅僅在乙個元素上設定未必能夠達到效果；比如：設定乙個不可選中，但是祖先可以選中，使用者可能會祖先選中時會變藍，看起來好像依然能夠被選中。

dojo dom原始碼學習

原始碼學習 ArrayList的擴容原始碼分析

PicoContainer原始碼學習

PicoContainer原始碼學習

dojo dom原始碼學習

原始碼學習 ArrayList的擴容原始碼分析

PicoContainer原始碼學習

PicoContainer原始碼學習

相關推薦