jquery1.2.6 源碼分析

 

jQuery是一個非常優秀的JS庫,與Prototype,YUI,Mootools等衆多的Js類庫相比,它劍走偏鋒,從web開發的實用角度出發,拋除了其它Lib中一些中看但不實用的東西,爲開發者提供了優美短小而精悍的類庫。其使用簡單,文檔豐富,而且性能高效,能極大地提高web系統的開發效率。因此可以說是web應用開發中最佳的Js輔助類庫之一。大部分開發者正在拋棄Prototype,而選擇Jquery做爲他們進行web開發的JS庫。

如是開發人員僅僅只知道文檔中的簡單的使用方法,卻不明白Jquery的運行原理和內部機制,在使用jquery時,肯定會碰到許多的問題。這些問題有一部分是Jquery的Bug。大部分是自身的使用不當而造成的。而文檔的簡單的使用說明很難解決問題。在調試基於jQuery的web應用時,很多時候都要跟蹤進入jQuery對象分析其運行狀態以瞭解出錯的原因。

如果對於web的應用的頁面運行性能和效率有所要求的話,那麼我們更應該去明白其運行機理和核心源碼。但是jQuery源碼不像其它的類庫那樣,它有點晦澀,難懂。這就是本源碼分析的原因,讓所有使用jQuery的讀者,能快速上手jQuery的源碼,並在開發中得心應用。

Jquery的網絡資源豐富,但Baidu了很久,很難找到那種完全深入地分析Jquery源碼的文稿。倒是Jquery的開發者,John Resi的《Pro Javascript Techniques》涉及到Jquery的源碼的分析,但是其主指還是在於JavaScript的使用。那本書並不能使我們完全細緻地瞭解Jquery的源碼。

 

寫個這個源碼分析的理由其實很簡單,在工作中使用jquery經常出問題,不得不分析其源碼,我把分析的源碼放在blog。其標題是jquery core 源碼分析。結果有一網友竟評論說打到標題黨,可見還是有很多人像我這樣想完全瞭解jquery的core代碼。

 

從自己能看懂,到自己寫出來。發現自己有一個質的提高。但是由於水平有限,分析過程的難免有錯誤。請大家多多指教。不過嘴下能留情就最好了。有什麼問題可以到blog:jljlpch.javaeye.com去訪問和評論。附件附有打包的源碼。

 

 

 

分析源碼,最難的地方不是你能理解,你能分析得出來。如果把所有的分析都寫在源文件中,我想很多人看不了多少行就會中止的。很難有人有興趣對得源碼一行行地去分析。何把源碼有機地組合起來,串成一條線是本教程的最爲頭疼的地方。

 
讀書的最高境界是厚積薄發。分析源碼也是一樣。對於4,5千行的jquery源碼,我們如何做到心中有數,知道什麼功能在什麼函數裏內呢? 什麼函數用在什麼地方呢?這樣就得把所有的函數有機分類地重組起來,想着Jquery的主要目的和自己對於js方面的理解。我把整個Jquery薄發成三個單詞 query-->manipulate-->expand。

 

jquery一個很緊縮的lib,它的主要目的就是對dom元素進行操作。那麼dom元素的從哪裏?
到dom樹中去找。這就是query。$(),Jquery的構建就是一個query的過程。我們可以把這個query範圍放大一點,它不光是從dom中查找的CSS selector,還有可能是從html的片斷中去尋找的dom元素生成,更進一步就是直接的dom元素(集)。$()的構建就是從這裏出發的。
query到元素集,這個query的過程還沒有最終完成。因爲這些結果集不一定滿足我們的要求,那麼就要篩選,要過濾。要進行數組方面的相關的操作。這就涉及到jquery對象的類數組的特徵。我們就可以把這些類數組的相關的函數放在一起來分析。

當最終的需求的集合形成,我們要的完成我們真正要做的,對集合中的dom元素進行操作。
怎麼操作?操作什麼呢?不就是對dom元素的attribute,class, style,css,event等進行操作嗎?
細化一下:
1、我們可以把attribute,class,style都看作是是屬性的操作,還有expando的自定義的屬性。這就涉及到jquery.data。
2、對dom元素的內容。什麼是內容。innerHtml是。all childNodes也是,value也可以算。對於內容的操作就有追加,插入,前插,後插,內部前插和內部後插。那當然不能少了clone,remove這些操作。
3、CSS是可以在dom元素中單獨出來分成一塊來做分析的。對於css的操作,不就是height,width,innerHeight,innerWidth,out(height,widith)的操作,還有元素的位置(position,offset),display or not。這就是對於CSS的操作。
4、Event也是元素的操作中的一部分。這一部分除了addEvent,fireEvent,removeEvent,和domready就沒有別的啦。
5、Ajax是給元素從服務器中找內容填充的。真正用到最多不還是load嗎,對於getScript,getJson之類全都是在jQuery.ajax的函數的基礎而出來。
6、Fx可以看做是CSS的操作。但是其又高於CSS。對於FX,最基本不就show,hide,slide(down,up),fade(in,out)這幾種用法。無論什麼用法,都基於時間的長短映射到元素CSS的屬性值的對對應比率的大小。採用setInterval間隔來運行就形成了動畫。這就animate()函數。所有效果的發源地。

想想整個jquery就是這麼簡單。當然如果沒有去身體力行去自己分析,無論什麼教程都是沒有用的。

其實query-->manipulate是表層的東西。還有一個高層的就是expand。這涉及到一個lib的架構與設計。

這部分我們可以從源碼的角度去解讀對於js lib的架構。
除了擴展性(extend)之後,一個lib肯定是要花大力氣去考慮它的性能。
考慮它的內存使用。
這是站在設計Jquery的角度去分析。

想了很久,但是這一部分還沒有寫入目前的源碼分析中。

轉載地址:http://jljlpch.javaeye.com/blog/234218

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章