快捷導(dǎo)航

jQuery的鏈?zhǔn)秸{(diào)用淺析

更新時(shí)間：2010年12月03日 19:00:53 作者：

并不是所有的瀏覽器都暴露了dom的對(duì)象原型,所以不能通過(guò)簡(jiǎn)單擴(kuò)展原型方法并通過(guò)return this的形式來(lái)實(shí)現(xiàn)跨瀏覽器的鏈?zhǔn)秸{(diào)用,jquery采用了包裝器的方式來(lái)解決了這個(gè)問(wèn)題。

jQuery式的方法鏈核心部分是三點(diǎn)：
1)jquery的包裝器函數(shù)（也就是jQuery(),以此來(lái)構(gòu)建包裝器對(duì)象）,以此構(gòu)造函數(shù)可以產(chǎn)生飽含了原生DOM對(duì)象的包裝器對(duì)象。
它大概是這個(gè)樣子的…(當(dāng)然跟官方庫(kù)的規(guī)模跟功能以及實(shí)現(xiàn)方式都差很多，我只是寫(xiě)了個(gè)大概的實(shí)現(xiàn)方式)：
呃…………我的失誤,請(qǐng)大家如果有興趣嘗試下代碼記得不要引入jQuery庫(kù)，命名沖突了

復(fù)制代碼代碼如下:

 
(function(){ 
//簡(jiǎn)化起見(jiàn)不支持子類(lèi)選擇器屬性選擇器等等,只接受形如".className"或者"#id"或者"tagName"以及它們之間的組合形式 自定義的工具函數(shù)（紅色）會(huì)在下面說(shuō)明 
function _jQuery(els){ 
this.elements = new Array(); 
for (var i = 0; i < els.length; i++) { 
var element = els[i]; 
if (typeof element == 'string') { 
element = element.trim(); //防止手抽多打入前后的空格 
var sign = element.substr(0, 1); 
if (sign == "#") { //按id查找 
element = document.getElementById(element.substr(1)); 
this.elements.push(element); 
} 
else 
if (sign == ".") { 
//按類(lèi)名查找 這里用到一個(gè)自定義的按類(lèi)名返回dom數(shù)組的工具函數(shù)getElementsByClassName 
element = getElementsByClassName(element.substr(1)); //element此時(shí)為數(shù)組對(duì)象,此方法為自定義見(jiàn)下文 
this.elements = this.elements.merge(element); 
} 
else { //無(wú)任何標(biāo)識(shí)符按標(biāo)簽名查找 
element = document.getElementsByTagName(element); //element此時(shí)為數(shù)組對(duì)象 
this.elements = this.elements.merge(element);//這個(gè)方法可以使得elements數(shù)組中只會(huì)存在不相同的dom對(duì)象 就如同set一樣 
} 
} 
else { 
this.elements.push(element); 
} 
} 
} 
/*這里可以開(kāi)始擴(kuò)展包裝器對(duì)象的原型函數(shù)比如 
_ jQuery.prototype.addEvent=function(){………} 
*/ window['jQuery'] = function(){ return new _jQuery(arguments) }; if (!window['$']) window['$'] = window['jQuery']; })()//自執(zhí)行匿名函數(shù) 

OK了插入下面這段簡(jiǎn)單html文檔來(lái)測(cè)試一下(不要鄙視偶的這個(gè)html寫(xiě)的規(guī)范不規(guī)范…測(cè)試而已)

復(fù)制代碼代碼如下:

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>my function addtion</title> 
</head> 
<body> 
<div id="header"> 
<p id="header1" class="entrance"> 
header1 
</p> 
<p id="header2"class="entrance"> 
header2 
</p> 
<p id="header3"class="entrance"> 
<a href="http://chabaoo.cn/index.html">header3</a> 
</p> 
</div> 
<hr/> 
<div id="content" class="news"> 
<p id="content1" class="topic"> 
node1 
</p> 
<p id="content2" class="topic"> 
node2 
</p> 
<p id="content3" class="topic"> 
<a href="http://chabaoo.cn/index.html">node3</a> 
</p> 
</div> 
<hr/> 
<div id="foot"> 
<p id="foot1" class="entrance"></p> 
</div> 
</body> 
</html> 

輸入:

復(fù)制代碼代碼如下:

 
var f=$(‘#header').elements[0]; 
consoles.write("nodeName: "+f.nodeName+"==> Id:"+f.id) 
/*自定義的代替alert的一個(gè)調(diào)試面板工具,由于在用的這個(gè)是照搬的某本書(shū)上的有點(diǎn)bug而且功能和操作性都不太好,過(guò)兩天可能我會(huì)修改一下在放上來(lái)，自己調(diào)試可以用alert代替*/ 

輸出：

輸入:

復(fù)制代碼代碼如下:

 
var e=jQuery(' div ',' p').elements; //這里故意多輸了幾個(gè)空格 
for(var i=0;i<e.length;i++){ 
consoles.write("nodeName: "+e[i].nodeName+"==> Id:"+e[i].id); 
} 

輸出：

雖然整合了dom對(duì)象查找的幾個(gè)方法，但是還是可以看到每次都使用循環(huán)語(yǔ)句來(lái)操作dom對(duì)象是一件十分煩躁的事情，并且接下來(lái)還會(huì)以此包裝器為基礎(chǔ)引入很多針對(duì)此包裝器對(duì)象的方法比如上面的addEvent方法等等，這些方法的引入最終是為了操作對(duì)象中包裝的原生dom對(duì)象，所以每一個(gè)方法中又必須引入for或者while語(yǔ)句,這個(gè)引出第二個(gè)核心函數(shù)==> jQuery.each(){}; 太晚了…明天再總結(jié)
本文使用到的工具函數(shù)(都是很有用的函數(shù))：

復(fù)制代碼代碼如下:

 
//className:類(lèi)名 tag:在此標(biāo)簽名范圍內(nèi)尋找 parent:在此父節(jié)點(diǎn)內(nèi)尋找 
function getElementsByClassName(className, tag, parent){ 
parent = parent || document; //缺省默認(rèn)為document 
var tag = tag || '*'; //缺省默認(rèn)為查找所有標(biāo)簽 
var elements = new Array(); 
var re = new RegExp('(^|\\s)' + className + '(\\s|$)'); 
var allList = parent.getElementsByTagName(tag); 
var element; 
for (var i = 0; i < allList.length; i++) { 
element = allList[i]; 
if (element.className.match(re)) { 
elements.push(element); 
} 
} 
return elements; 
} 

復(fù)制代碼代碼如下:

 
if (!String.prototype.trim) {//去除首尾空格 
String.prototype.trim = function(){ 
return this.replace(/^\s+|\s+$/g, ''); 
} 
} 

if (!Array.prototype.merge) { 
Array.prototype.merge = function(arr){ //使得數(shù)組有類(lèi)似set的特性 相同的對(duì)象無(wú)法放入同一個(gè)數(shù)組不要鄙視偶算法的問(wèn)題只是闡述下原理 
for (var i = 0; i < arr.length; i++) { 
var signals=false; 
for (var j = 0; j < this.length; j++) { 
if (arr[i] == this[j]) 
signals=true; 
} 
if (!signals) this.push(arr[i]); 
} 
return this; 
} 
} 