深入了解jQuery之整體架構

本文是在閱讀了Aaron艾倫的jQuery源碼解析(位址：http://www.imooc.com/learn/172)後的個人體會以及筆記。在這裡感謝艾倫老師深入淺出的講解！！

先來看看如何生成一個jQuery對象，源碼：

var  jQuery = function( selector, context ) {
        
        return new jQuery.fn.init( selector, context );
    };      

當我們使用jQuery('something')或者$('something')時，我們得到的是一個 jQuery.fn.init()對象。那麼jQuery.fn是什麼鬼？

jQuery.fn = jQuery.prototype = {
    // jQuery版本
    jquery: version,
    constructor: jQuery, // 構造函數
    // Start with an empty selector
    selector: "",
    // The default length of a jQuery object is 0
    length: 0,
    // 省略.....
}      

jQuery.fn 實際上是jQuery構造函數的原型對象的引用！！ 是以我們以後看到 jQuery.fn時，把他當成jQuery構造函數的原型對象就可以了。

知道了jQuery.fn ， 接下來看看jQuery.fn.init()函數

jQuery.fn.init = function( selector, context ) {
      //  省略....
      return this;
    };
jQuery.fn.init.prototype = jQuery.prototype;  // 注意這裡！ 這句代碼讓init對象可以使用jQuery的原型方法。      

這樣，我們在建立jQuery對象時就不用使用new關鍵字了。

整體看一下源碼架構:

var $ = jQuery = function(selector,context){
    return new jQuery.fn.init(selector,context)  // 傳回一個jQuery.fn.init()對象
}

jQuery.fn = jQuery.prototype = {
    constructor:jQuery,
    init:function(){
        // 省略.....
        return  this;
    }
}
jQuery.fn.init.prototype = jQuery.fn      

直覺的感受一下互相之間的關系：

調用jQuery函數，我們得到的是一個jQuery.fn.init執行個體，這個執行個體的原型對象被重新指向到了jQuery函數的原型對象，是以這個執行個體可以使用jQuery原型對象的屬性和方法，而如果我們給jQuery函數附加方法，那麼這個方法就變成了靜态方法。

然後來看一下jQuery.fn.init函數的源碼：

 View Code

 配張思路圖：