對于jQuery只停留在應用是可悲的，在做項目的過程，jquery源碼一度成為了自己開發的瓶頸，利用了近一天的時間對其宏觀上進行了徹底的分析，收獲頗豐，分享于此——

在此說明，所研究的jQuery框架版本為1.7.2。

宏觀而言，jQuery框架可分為3個步驟——

其細節如下——

/**  
  * 1.定義jQuery變量  
  *  var jQuery = (function () {  
  *       
  *        //定義一個局部變量jQuery  
  *        var jQuery = function(selector, context) {  
  *            //這是所有jQuery選擇器的開始  
  *            return new jQuery.fn.init(selector, context, rootjQuery);  
  *        },  
  *          
  *        //接著定義其他變量，最主要的是對jQuery函數原型的改造  
  *         //兩者皆為指針，并指向同一起始位置，但后續對兩個對象的擴充，使得兩者能夠指向的位置域有所不同  
  *        jQuery.fn = jQuery.prototype = {  
  *            constructor: jQuery,  
  *            init: function(){...},//定義了所有jQuery選擇器的開始  
  *            //還定義了其他的基礎方法，如  
  *            size: function(){...},  
  *            toArray: function(){...},  
  *            get: function(){...},  
  *            ......  
  *            port: [].sort,  
  *            splice: [].splice  
  *        };  
  *          
  *        //對上面定義的init函數重置原型  
  *        jQuery.fn.init.prototype = jQuery.fn;  
  *          
  *        //實現了jQuery原型的擴充  
  *        jQuery.extend = jQuery.fn.extend = function() {  
  *            ......  
  *        }  
  *          
  *        //定義完jQuery命名空間下的extend方法，就可以直接擴充jQuery原型了  
  *        jQuery.extend({  
  *            noConflict: function(deep){...},  
  *            //一系列方法...  
  *        })  
  *          
  *        //鑒別構造器語句...  
  *        //鑒別瀏覽器語句...  
  *        //其他...  
  *          
  *        //要返回這個局部變量jQuery對象，賦值給外圍的jQuery變量  
  *        return jQuery;  
  *      
  *    )();  
  *   
  * 2.擴充jQuery變量及jQuery.fn變量(利用jQuery及jQuery.fn命名空間進行方法的填充)  
  *     核心的兩個方法——  
  *     jQuery.extend({...})  
  *     jQuery.fn.extend({...})  
  *   
  * 3.將jQuery置于全局  
  *     在代碼的***——  
  *     window.jQuery = window.$ = jQuery;  
  *   
  */ 

選取3個例子進行深入研究——

(function ($) {  
       
     /**  
      * 測試-jquery選擇器方法(初始化)、測試-append方法，流程解析如下——  
      * 1>$('#test', 'body')調用jQuery函數(var jQuery = function(selector, context) {return new jQuery.fn.init(selector, context, rootjQuery);})  
      *     先對選擇器selector(即#test)，進行初始化，即(jQuery.fn.init('#test', 'body', [#document]))  
      *     發現有context(即body)，那么要對body進行初始化，再調用$(context).find(selector)方法(即$('body').find('body'))  
      * 2>對于append方法：會調用jQuery.fn.domManip方法(這個方法會調用jQuery.buildFragment方法)，最終會調用selector的dom元素的appendChild方法進行dom操作  
      */ 
     $('#test', 'body').append('<div class="c2">implant content<div>');      
       
     /**  
      * 測試-擴展jQuery對象本身，即，用來在jQuery命名空間上增加新函數  
      * 看了源碼就會發現：  
      *     它循環了傳入的對象參數里面的key-value值，并對jQuery這個函數對象做了擴展，其key值正是傳參的key值(min和max)  
      */ 
     $.extend({  
         min: function(a, b) { return a < b ? a : b; },  
         max: function(a, b) { return a > b ? a : b; }  
     });  
     $.min(2,3); //2  
       
     /**  
      * 測試-擴展 jQuery 元素集來提供新的方法（通常用來制作插件）。  
      * 看了源碼就會發現：  
      *     它與jQuery.extend的調用方法是同一個方法，只不過它對jQuery.fn這個命名空間做了功能擴展  
      */ 
     $.fn.extend({  
         check: function() {  
             return this.each(function() {   
                 this.checked = true;   
             });  
         },  
         uncheck: function() {  
             return this.each(function() {   
                 this.checked = false;   
             });  
         }  
     });  
       
 /**  
  * 搜索jQuery變量，只要在這個代碼段之前引入jQuery.js框架即可，在這個框架中，會把jQuery變量放置到window對象中  
  * 源碼如下：  
  *         // Expose jQuery to the global object  
  *         window.jQuery = window.$ = jQuery;  //這句放在了框架中的***一句，  
  *                                             //這句之前，在框架中對jQuery這個局部對象變量(命名空間)，做了方法及屬性的填充  
  */ 
 })(jQuery);