自己實(shí)現(xiàn)的簡(jiǎn)單的html元素選擇器,類似jquery選擇器,比jquery選擇器還要快! – WEB前端開(kāi)發(fā)
最近做前端,需要選擇元素,雖說(shuō)有jquery和各大js庫(kù)已經(jīng)幫我造好了輪子,但我想試試自己實(shí)現(xiàn)一個(gè),正好項(xiàng)目也不忙,正好加入自己的js文件中,下面是實(shí)現(xiàn)代碼。用$g(“#content .op”)這種格式就可以調(diào)用,和jquery $()的參數(shù)一樣:
function $findChilds(parentNode, text) { //如果不傳入父節(jié)點(diǎn)的話,默認(rèn)為body if(parentNode == undefined) parentNode = document.body; var childNodes = parentNode.childNodes; var results = []; //子節(jié)點(diǎn)大于零才循環(huán) if(childNodes.length > 0) { var length = childNodes.length; //循環(huán)查找符合text的節(jié)點(diǎn) for(var i=0;i<length;++i) { //三種情況,className,id, tagName switch(text.substr(0, 1)) { case '.': //這兩種:parentNode.getElementsByClassName,parentNode.all //都是后來(lái)加上的,如果瀏覽器這兩種方法都不支持,那就只能暴力遞歸了 if(parentNode.getElementsByClassName) return parentNode.getElementsByClassName(text.substr(1)); else if(parentNode.all) { var finded = []; var jlength = parentNode.all.length; for(var j=0;j<jlength;++j) if(parentNode.all[j].className == text.substr(1)) finded.push(parentNode.all[j]); return finded; } //以上兩種方法都不支持,直接判斷 if(childNodes[i].className == text.substr(1)) results.push(childNodes[i]); break; case '#': return [document.getElementById(text.substr(1))]; default: return parentNode.getElementsByTagName(text); } //判斷完后,把當(dāng)前子元素的子元素傳入$findChilds進(jìn)行遞歸查找,返回的結(jié)果直接和現(xiàn)在的結(jié)果合并 results = results.concat($findChilds(childNodes[i], text)); } } return results; } String.prototype.vtrim = function() { return this.replace(/^\s+|\s+$/g, ''); } function $g(text) { //按照空格分割參數(shù) var values = text.vtrim().split(" "); var length = values.length; //如果只有一個(gè)選擇參數(shù)的話,就直接調(diào)用dom方法返回結(jié)果。 if(length == 1) switch(values[0].substr(0, 1)) { case "#": return document.getElementById(values[0].substr(1)); case ".": if(document.getElementsByClassName) return document.getElementsByClassName(values[0].substr(1)); default: return document.getElementsByTagName(values[0]); } //每次迭代都會(huì)產(chǎn)生許多符合參數(shù)的結(jié)果節(jié)點(diǎn),這里結(jié)果節(jié)點(diǎn)的名稱為parentNodes,第一次循環(huán)默認(rèn)為body var parentNodes = [document.body]; //外層循環(huán)為迭代每個(gè)傳入的參數(shù) for(var i = 0; i < length; ++i) { var jlength = parentNodes.length; var results = []; //這里如果values的長(zhǎng)度為零的話, //就說(shuō)明是多出來(lái)的空格, //例如:$g(" .content");這種情況不執(zhí)行代碼直接跳入下一循環(huán) var tmpValue = values[i].vtrim(); if(tmpValue.length <= 0) continue; //內(nèi)層循環(huán)為迭代每個(gè)結(jié)果節(jié)點(diǎn), //在結(jié)果節(jié)點(diǎn)中查找符合選擇條件的結(jié)果。當(dāng)然第一次為body for(var j=0;j<jlength;++j) { //$findChilds就是上邊的那個(gè)函數(shù),就是選擇某個(gè)節(jié)點(diǎn)的子節(jié)點(diǎn)的 var result = $findChilds(parentNodes[j], values[i].vtrim()); var rlength = result.length; //因?yàn)榉祷氐挠袝r(shí)候是html容器,無(wú)法直接和數(shù)組concat所以倒入數(shù)組,這里有優(yōu)化空間,但暫不考慮性能先這么做 for (var k = 0; k < rlength; ++k) results.push(result[k]); } //沒(méi)有結(jié)果,立即返回undefined if(results == undefined || results.length <= 0) return undefined; //最后一次循環(huán)就直接返回結(jié)果數(shù)組,但是如果最后一個(gè)選擇條件是選擇id的話,那就不返回?cái)?shù)組直接返回dom對(duì)象了 if (i == length - 1) { if (values[i].substr(0, 1) == "#") return results[0]; return results; } parentNodes = results; } }
經(jīng)過(guò)在ff ie6下的測(cè)試 單純的選擇id比jquery要快很多,
其他的部分選擇模式我測(cè)試的少數(shù)比jquery要快。
當(dāng)然測(cè)試不可能全面,還可能會(huì)有bug,而且不支持類似于.content:first-child這樣的偽類選擇。