這段時(shí)間在學(xué)習(xí)研究jQuery源碼，受益于jQuery日益發(fā)展強(qiáng)大，研究jQuery的大牛越來越多，學(xué)習(xí)的資料也比前兩年好找了，有很多非常不錯(cuò)的資源，如高云的jQuery1.6.1源碼分析系列。這些教程非常細(xì)致的分析了jQuery內(nèi)部原理和實(shí)現(xiàn)方式，對(duì)學(xué)習(xí)和理解jQuery有非常大的幫助。但是個(gè)人認(rèn)為很多教程對(duì)jQuery的整體結(jié)果把握不足，本人試圖從整體來闡述一下jQuery的內(nèi)部實(shí)現(xiàn)。

大家知道，調(diào)用jQuery有兩種方式，一種是高級(jí)的實(shí)現(xiàn)，通過傳遞一個(gè)參數(shù)實(shí)現(xiàn)DOM選擇，如通過$(“h1″)選擇所有的h1元素，第二種是較為低級(jí)的實(shí)現(xiàn)，如果通過$.ajax實(shí)現(xiàn)ajax的操作。那么，這兩種方式到底有何不同？用typeof函數(shù)檢測(cè)$(‘h1′)和$.ajax,類型分別為object和function，稍微學(xué)過jQuery的都知道或者聽過過，前者返回的是一個(gè)jQuery對(duì)象，那么jQuery對(duì)象是什么，它和jQuery是什么關(guān)系呢？我們先來通過for(var i in $(”)) document.write(i+” :::”+$(“”)[i]+””);打印一下jQuery對(duì)象的屬性和對(duì)應(yīng)的值,可以看到它有100多個(gè)屬性，通過console輸入$(“*”)可以看到大部分屬性是繼承自jQuery原型的屬性，jQuery對(duì)象實(shí)際上是這樣一個(gè)對(duì)象:

所以我們來推測(cè)，jQuery的實(shí)現(xiàn)可能是類似這樣的：

function jQuery(){
 this[0]="Some DOM Element";
 this[1]="Some DOM Element";
 this[2]="Some DOM Element";
 this.length=3;
 this.prevObject="Some Object";
 this.context="Some Object";
 this.selector="Some selector";
}
jQuery.prototype={
get:function(){},
each:function(){},
......
}

這些代碼通過new操作符就就能創(chuàng)建出擁有上述屬性的jQuery對(duì)象,但是實(shí)際上我們調(diào)用jQuery創(chuàng)建jQuery對(duì)象時(shí)并沒有使用new操作符，這是如何實(shí)現(xiàn)的呢？來看jQuery的實(shí)現(xiàn):

var jQuery = function( selector, context ) {
 // The jQuery object is actually just the init constructor 'enhanced'
 return new jQuery.fn.init( selector, context, rootjQuery );
}
jQuery.fn=jQuery.prototype={
 jquery: core_version,
 init:function(selector,context){
 //some code
 return this;
 }
 //some code there
 //......
}
jQuery.fn.init.prototype=jQuery.fn;

這里有幾點(diǎn)做得非常巧妙的地方,第一點(diǎn)是通過jQuery原型屬性的init方法來創(chuàng)建對(duì)象來達(dá)到不用new創(chuàng)建對(duì)象的目的，第二點(diǎn)是對(duì)init方法內(nèi)this指向的處理。我們知道，通過調(diào)用init返回一個(gè)jQuery的實(shí)例，那么這個(gè)實(shí)例就必須要繼承jQuery.prototype的屬性，那么init里面這個(gè)this, 就繼承jQuery.prototype的屬性。但是init里面的this，受制于作用域的限制，并不能訪問jQuery.prototype其它的屬性，jQuery通過一句'jQuery.fn.init.prototype=jQuery.fn'把它的原型指向jQuery.fn,這樣以來，init產(chǎn)生的jQuery對(duì)象就擁有了jQuery.fn的屬性。

到這里，一個(gè)jQuery的基本原型就浮出水面了。這里有兩個(gè)對(duì)象，一個(gè)是jQuery這個(gè)構(gòu)造函數(shù)，另外一個(gè)是這個(gè)構(gòu)造函數(shù)產(chǎn)生的對(duì)象(我們稱之為jQuery對(duì)象，它和普通對(duì)象沒有什么區(qū)別), 如下關(guān)系圖:

可以看到j(luò)Query構(gòu)造函數(shù)和jQuery.prototype均有各自的屬性和方法，兩者的調(diào)用方法各不一樣,這兩個(gè)對(duì)象都有一個(gè)extend方法，都是用來擴(kuò)展自身的屬性和方法，在jQuery內(nèi)部，extend的實(shí)現(xiàn)實(shí)際是靠一樣的代碼, 將在后面的源碼分析中做以詳細(xì)的分析。

最新評(píng)論