讀jQuery之一(對象的組成)

對於jQuery的寫法甚是困惑，尤其在使用Prototype的$後，一度不能理解jQuery的$。對於現在前端同學來說，可能第一個接觸的就是jQuery了，他們會覺得很習慣，很自然。

至今電腦裡還存放著當時的API文檔，發個圖感歎下

在這段時間內，我的入門老師是墨墨，其實至今他仍然是我敬仰的同事之一。他的編程造詣很高，相信早已突破了程式設計語言的限制。在大家都在使用Prototype.js的時候，在jQuery尚未在國內流行的時候，他就已經把jQuery引入到項目中了。

言歸正傳吧，目前的jQuery版本已經到了1.6.1。從當時的2000行左右膨脹到了9000行。相信不久就會突破1w行。對於一些簡單網頁來說引入一個jQuery已經不再那麼輕量了。這裡的研讀的是1.6.1這個版本，我會邊讀邊寫，最後會寫出一個1000行左右的“迷你jQuery”。

以下是jQuery 1.6.1 程式碼片段
複製代碼 代碼如下:
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;


初看上去像是在用 原型方式 在寫一個類jQuery(別名$)，但實際我們使用時是函數調用$("#id")，卻不是new $("#id")。
標識符 jQuery是一個function，其內new了一個function init的執行個體，然後返回。至此我們知道其真正的構造器是jQuery.fn.init。jQuery寫的實在詭異，它把init又掛在了jQuery的prototype上，閱讀起來有些繞人。

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

模仿jQuery寫一個
複製代碼 代碼如下:
// 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;//鏈式調用
},
hide:function(){
var self=this;
setTimeout(function(){
self[0].style.display="none";
},3000);
return this;//鏈式調用
}
}
$.prototype.init.prototype=$.prototype;

簡單起見，這裡選取器只傳html element或元素id（後續會增強，但不實現全部css selector），this上掛了length屬性，賦值為1。
當我們調用時
複製代碼 代碼如下:
var obj = $();
console.dir(obj);

$()實際沒有什麼意義，只是為了測試調用後obj的組成。firebug控制台輸出如下：
length:0;
init:function
attr:function
hide:function

即obj對象是由function init中this及function $.prototype組成的。
再看下$.prototype上的方法，我只添加了css和hide方法，這兩個方法的實現也是極其簡陋的。
複製代碼 代碼如下:
<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>

先調用css設定了字型顏色為紅色，3秒後隱藏了。
總結下：
jQuery對象指的是jQuery.prototype.init的執行個體，簡單的說就是new jQuery.prototype.init。這裡jQuery.prototype.init的類型是function，可以看成是一個類。

jQuery對象由以下部分組成：
1，掛在jQuery.prototype.init中的this上的屬性或方法。
2，掛在jQuery.prototype.init.prototype上的屬性或方法。
3，因為把jQuery.prototype賦值給了jQuery.prototype.init.prototype，所以掛在jQuery.prototype上的屬性和方法也是jQuery對象的一部分。
4，通過jQuery.fn.extend({...})方式擴充的屬性或方法（後續提到）。
/201106/yuanma/zchain.rar