(轉)總體把握jQuery -jQuery 的原型關係圖

總體把握jQuery -jQuery 的原型關係圖

（原）http://www.html5cn.org/article-6529-1.html

2014-7-2 17:12| 發佈者: html5cn |來自: 博客園| 評論: 0

 

摘要: 一幅圖展現 jQuery 中各對象之間的關係，這就是不少人想要的最直觀的總結 jQuery 的方式。在這篇文章中，一幅畫展現整個 jQuery 的核心內容，並逐一解釋。 ...

 

 

若干個月前，看到一篇文章，內容很簡單，就是一幅圖，展現的是 jQuery 中各對象之間的關係，當時就以爲，這就是我想要的最直觀的總結 jQuery 的方式。在那篇文章中，也有不少人表示不解，說看不明白。這裏我也重畫了一幅，並逐一解釋。附件提供了 visio 格式的文件。         下面將結合 jQuery 源碼，對上圖的各個部分逐一解釋。在圖中，圓圈數字表明的是 jQuery 源碼的位置，圓圈數字同樣的位置代表這幾個地方出自同塊(block)代碼。 /**  * ① 何爲 jQuery？  *  * window 是對象，它有兩個屬性，分別爲 jQuery 和 $，其值是一函數，此函數的名字是 jQuery。在函數  * 的定義實體中，實際上是經過 jQuery.fn.init 函數來構造對象的，init 函數纔是真正的構造函數。也就是說，  * 咱們經過 ${ ... ) 獲得的其實就是 jQuery.fn.init 的實例。  */   var jQuery = window.jQuery = window.$ = function( selector, context ) {       // The jQuery object is actually just the init constructor 'enhanced'       return new jQuery.fn.init( selector, context );   }; 複製代碼 /**  * ② 所謂的 jQuery 的體魄   *  * jQuery 函數有兩個屬性，分別爲 fn 和 prototype，其值是一匿名對象(json 對象)。  */   jQuery.fn = jQuery.prototype = {       init: function( selector, context ) {           ...       },              jquery: "1.2.6",              get: function( num ) {           ...       },            ...   }   複製代碼 /**  * ③ 賦予 jQuery 力量吧  *  * 這段代碼別看就一句話，很短，不是嗎？但這段代碼是很是重要的。  *  * 首先，init 只是一個函數，經過 jQuery.fn.init 構造出來的對象，只是 jQuery.fn.init 的實例而已，  * jQuery.fn 以前也說了，它是一匿名的 json 對象，包含 init 等等函數，咱們想讓 jQuery.fn.init 構造  * 出來的對象具有不少行爲的話，prototype 就是最好的手段之一。假設咱們定義一個 function，名字叫作 Car  * 吧，使用 prototype 爲其添加行爲的方式咱們很熟悉吧：  * function Car(owner) {  *   this.owner = owner;  * }  * Car.prototype = {  *   go: function() { ... }  *   brake: function() { ... }  * }  * 這樣，經過 new Car() 構造出來的對象就具有了 go 和 brake 行爲。  *  * 所以，就由於下面的一句話，被 init 構造出來的對象就具有了 jQuery.fn 所定義的全部行爲了，很帥吧！  */   // Give the init function the jQuery prototype for later instantiation   jQuery.fn.init.prototype = jQuery.fn;   複製代碼 /**  * ④ 給我擴展的自由好嗎  *  * 誠然，jQuery 或 jQuery.fn 定義的 function 你有可能會以爲不夠用，不要緊，John Resig 爲咱們提供了  * 擴展的空間。jQuery 和 jQuery.fn 都有一個名字爲 extend 的屬性，該屬性的類型就是一個 function，  * 這個 function 自己就已經爲咱們提供了擴展功能。  *  * extend 屬性所表明的 function，不過 50 行代碼，寫的太精闢了，有時間的話，你們能夠一步一步的調試下，  * 見識下 John Resig 的神功～  */   jQuery.extend = jQuery.fn.extend = function() {       ......   }   複製代碼        整個 jQuery 的核心內容就是以上四塊代碼，諸如事件處理的代碼，你均可以從以上四塊代碼找到影子。Enjoy jQuery～