快捷導(dǎo)航

讀jQuery之一(對(duì)象的組成)

更新時(shí)間：2011年06月11日 00:50:23 作者：

首次接觸jQuery是在2008年，上地的一家小公司。當(dāng)時(shí)的版本是1.1，在此之前我僅接觸過(guò)Prototype.js。

對(duì)于jQuery的寫法甚是困惑，尤其在使用Prototype的$后，一度不能理解jQuery的$。對(duì)于現(xiàn)在前端同學(xué)來(lái)說(shuō)，可能第一個(gè)接觸的就是jQuery了，他們會(huì)覺(jué)得很習(xí)慣，很自然。

至今電腦里還存放著當(dāng)時(shí)的API文檔，發(fā)個(gè)圖感嘆下

在這段時(shí)間內(nèi)，我的入門老師是墨墨，其實(shí)至今他仍然是我敬仰的同事之一。他的編程造詣很高，相信早已突破了編程語(yǔ)言的限制。在大家都在使用Prototype.js的時(shí)候，在jQuery尚未在國(guó)內(nèi)流行的時(shí)候，他就已經(jīng)把jQuery引入到項(xiàng)目中了。

言歸正傳吧，目前的jQuery版本已經(jīng)到了1.6.1。從當(dāng)時(shí)的2000行左右膨脹到了9000行。相信不久就會(huì)突破1w行。對(duì)于一些簡(jiǎn)單網(wǎng)頁(yè)來(lái)說(shuō)引入一個(gè)jQuery已經(jīng)不再那么輕量了。這里的研讀的是1.6.1這個(gè)版本，我會(huì)邊讀邊寫，最后會(huì)寫出一個(gè)1000行左右的“迷你jQuery”。

以下是jQuery 1.6.1 代碼片段

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

 
var jQuery = function( selector, context ) { 
// The jQuery object is actually just the init constructor 'enhanced' 
return new jQuery.fn.init( selector, context, rootjQuery ); 
}, 
... 
class2type = {}; 

jQuery.fn = jQuery.prototype = { 
constructor: jQuery, 
init: function(selector, context, rootjQuery){ 
} 
} 

// Give the init function the jQuery prototype for later instantiation 
jQuery.fn.init.prototype = jQuery.fn; 

初看上去像是在用原型方式在寫一個(gè)類jQuery(別名$)，但實(shí)際我們使用時(shí)是函數(shù)調(diào)用$("#id")，卻不是new $("#id")。
標(biāo)識(shí)符 jQuery是一個(gè)function，其內(nèi)new了一個(gè)function init的實(shí)例，然后返回。至此我們知道其真正的構(gòu)造器是jQuery.fn.init。jQuery寫的實(shí)在詭異，它把init又掛在了jQuery的prototype上，閱讀起來(lái)有些繞人。

jQuery.fn.init.prototype = jQuery.fn; 是關(guān)鍵的一句。該句把function jQuery的原型賦值給了function init的原型。當(dāng)調(diào)用$("#id")時(shí)返回的對(duì)象組成包括兩個(gè)部分。
1，由function init中this帶的(如this.context)；
2，由function jQuery的prototype帶的(如this.size/this.toArray)；

模仿jQuery寫一個(gè)

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

 
// zchain-0.1.js 
function $(selector){ 
return new $.prototype.init(selector); 
} 
$.prototype={ 
init:function(selector){ 
if(selector === undefined){ 
this.length = 0; 
return this; 
} 
if(selector.nodeType==1){ 
this[0] = selector; 
}else{ 
this[0]=document.getElementById(selector); 
} 
this.length=1; 
}, 
css:function(name,value){ 
this[0].style[name] = value; 
return this;//鏈?zhǔn)秸{(diào)用 
}, 
hide:function(){ 
var self=this; 
setTimeout(function(){ 
self[0].style.display="none"; 
},3000); 
return this;//鏈?zhǔn)秸{(diào)用 
} 
} 
$.prototype.init.prototype=$.prototype; 

簡(jiǎn)單起見(jiàn)，這里選擇器只傳html element或元素id（后續(xù)會(huì)增強(qiáng)，但不實(shí)現(xiàn)全部css selector），this上掛了length屬性，賦值為1。
當(dāng)我們調(diào)用時(shí)

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

 
var obj = $(); 
console.dir(obj); 

$()實(shí)際沒(méi)有什么意義，只是為了測(cè)試調(diào)用后obj的組成。firebug控制臺(tái)輸出如下：
length:0;
init:function
attr:function
hide:function

即obj對(duì)象是由function init中this及function $.prototype組成的。
再看下$.prototype上的方法，我只添加了css和hide方法，這兩個(gè)方法的實(shí)現(xiàn)也是極其簡(jiǎn)陋的。

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

 
<script src="http://files.cnblogs.com/snandy/zchain-0.1.js"></script> 
<div id='content'>3 seconds later I will hide.</div> 
<script type="text/javascript"> 
$("content").css("color","red").hide(); 
</script> 

先調(diào)用css設(shè)置了字體顏色為紅色，3秒后隱藏了。
總結(jié)下：
jQuery對(duì)象指的是jQuery.prototype.init的實(shí)例，簡(jiǎn)單的說(shuō)就是new jQuery.prototype.init。這里jQuery.prototype.init的類型是function，可以看成是一個(gè)類。

jQuery對(duì)象由以下部分組成：
1，掛在jQuery.prototype.init中的this上的屬性或方法。
2，掛在jQuery.prototype.init.prototype上的屬性或方法。
3，因?yàn)榘裫Query.prototype賦值給了jQuery.prototype.init.prototype，所以掛在jQuery.prototype上的屬性和方法也是jQuery對(duì)象的一部分。
4，通過(guò)jQuery.fn.extend({...})方式擴(kuò)展的屬性或方法（后續(xù)提到）。
/201106/yuanma/zchain.rar

您可能感興趣的文章: