jQuery源碼分析-03構造jQuery對象-源碼結構和核心函數

更新時間：2011年11月14日 23:40:23 作者：

jQuery源碼分析-03構造jQuery對象-源碼結構和核心函數，需要的朋友可以參考下。

作者：nuysoft/高云　QQ：47214707　EMail：nuysoft@gmail.com
畢竟是邊讀邊寫，不對的地方請告訴我，多多交流共同進步。本章還未寫完，完了會提交PDF。
前記：
想系統(tǒng)的好好寫寫，但是會先從感興趣的部分開始。
近期有讀者把PDF傳到了百度文庫上，首先感謝轉載和傳播，但是據為已有并設置了挺高的財富值才能下載就不好了，以后我整理好了會傳到文庫上。請體諒一下。
3. 構造jQuery對象
3.1 源碼結構
先看看總體結構，再做分解：

復制代碼代碼如下:

 
(function( window, undefined ) { 
var jQuery = (function() { 
// 構建jQuery對象 
var jQuery = function( selector, context ) { 
return new jQuery.fn.init( selector, context, rootjQuery ); 
} 
// jQuery對象原型 
jQuery.fn = jQuery.prototype = { 
constructor: jQuery, 
init: function( selector, context, rootjQuery ) { 
// selector有以下7種分支情況： 
// DOM元素 
// body（優(yōu)化） 
// 字符串：HTML標簽、HTML字符串、#id、選擇器表達式 
// 函數（作為ready回調函數） 
// 最后返回偽數組 
} 
}; 
// Give the init function the jQuery prototype for later instantiation 
jQuery.fn.init.prototype = jQuery.fn; 
// 合并內容到第一個參數中，后續(xù)大部分功能都通過該函數擴展 
// 通過jQuery.fn.extend擴展的函數，大部分都會調用通過jQuery.extend擴展的同名函數 
jQuery.extend = jQuery.fn.extend = function() {}; 
// 在jQuery上擴展靜態(tài)方法 
jQuery.extend({ 
// ready bindReady 
// isPlainObject isEmptyObject 
// parseJSON parseXML 
// globalEval 
// each makeArray inArray merge grep map 
// proxy 
// access 
// uaMatch 
// sub 
// browser 
}); 
// 到這里，jQuery對象構造完成，后邊的代碼都是對jQuery或jQuery對象的擴展 
return jQuery; 
})(); 
window.jQuery = window.$ = jQuery; 
})(window); 

l jQuery對象不是通過 new jQuery 創(chuàng)建的，而是通過 new jQuery.fn.init 創(chuàng)建的

復制代碼代碼如下:

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

n jQuery對象就是jQuery.fn.init對象
n 如果執(zhí)行new jQeury(),生成的jQuery對象會被拋棄，最后返回 jQuery.fn.init對象；因此可以直接調用jQuery( selector, context )，沒有必要使用new關鍵字
l 先執(zhí)行 jQuery.fn = jQuery.prototype，再執(zhí)行 jQuery.fn.init.prototype = jQuery.fn，合并后的代碼如下：
jQuery.fn.init.prototype = jQuery.fn = jQuery.prototype
所有掛載到jQuery.fn的方法，相當于掛載到了jQuery.prototype，即掛載到了jQuery 函數上（一開始的 jQuery = function( selector, context ) ），但是最后都相當于掛載到了 jQuery.fn.init.prototype，即相當于掛載到了一開始的jQuery 函數返回的對象上，即掛載到了我們最終使用的jQuery對象上。
這個過程非常的繞，金玉其外“敗絮”其中??！
3.2 jQuery.fn.init
jQuery.fn.init的功能是對傳進來的selector參數進行分析，進行各種不同的處理，然后生成jQuery對象。
類型（selector）
處理方式
DOM元素
包裝成jQuery對象，直接返回
body（優(yōu)化）
從document.body讀取
單獨的HTML標簽
document.createElement
HTML字符串
document.createDocumentFragment
#id
document.getElementById
選擇器表達式
$(…).find
函數
注冊到dom ready的回調函數
3.3 jQuery.extend = jQuery.fn.extend

復制代碼代碼如下:

 
// 合并兩個或更多對象的屬性到第一個對象中，jQuery后續(xù)的大部分功能都通過該函數擴展 
// 通過jQuery.fn.extend擴展的函數，大部分都會調用通過jQuery.extend擴展的同名函數 
// 如果傳入兩個或多個對象，所有對象的屬性會被添加到第一個對象target 
// 如果只傳入一個對象，則將對象的屬性添加到jQuery對象中。 
// 用這種方式，我們可以為jQuery命名空間增加新的方法?？梢杂糜诰帉慾Query插件。 
// 如果不想改變傳入的對象，可以傳入一個空對象：$.extend({}, object1, object2); 
// 默認合并操作是不迭代的，即便target的某個屬性是對象或屬性，也會被完全覆蓋而不是合并 
// 第一個參數是true，則會迭代合并 
// 從object原型繼承的屬性會被拷貝 
// undefined值不會被拷貝 
// 因為性能原因，JavaScript自帶類型的屬性不會合并 
// jQuery.extend( target, [ object1 ], [ objectN ] ) 
// jQuery.extend( [ deep ], target, object1, [ objectN ] ) 
jQuery.extend = jQuery.fn.extend = function() { 
var options, name, src, copy, copyIsArray, clone, 
target = arguments[0] || {}, 
i = 1, 
length = arguments.length, 
deep = false; 
// Handle a deep copy situation 
// 如果第一個參數是boolean型，可能是深度拷貝 
if ( typeof target === "boolean" ) { 
deep = target; 
target = arguments[1] || {}; 
// skip the boolean and the target 
// 跳過boolean和target，從第3個開始 
i = 2; 
} 
// Handle case when target is a string or something (possible in deep copy) 
// target不是對象也不是函數，則強制設置為空對象 
if ( typeof target !== "object" && !jQuery.isFunction(target) ) { 
target = {}; 
} 
// extend jQuery itself if only one argument is passed 
// 如果只傳入一個參數，則認為是對jQuery擴展 
if ( length === i ) { 
target = this; 
--i; 
} 
for ( ; i < length; i++ ) { 
// Only deal with non-null/undefined values 
// 只處理非空參數 
if ( (options = arguments[ i ]) != null ) { 
// Extend the base object 
for ( name in options ) { 
src = target[ name ]; 
copy = options[ name ]; 
// Prevent never-ending loop 
// 避免循環(huán)引用 
if ( target === copy ) { 
continue; 
} 
// Recurse if we're merging plain objects or arrays 
// 深度拷貝且值是純對象或數組，則遞歸 
if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) { 
// 如果copy是數組 
if ( copyIsArray ) { 
copyIsArray = false; 
// clone為src的修正值 
clone = src && jQuery.isArray(src) ? src : []; 
// 如果copy的是對象 
} else { 
// clone為src的修正值 
clone = src && jQuery.isPlainObject(src) ? src : {}; 
} 
// Never move original objects, clone them 
// 遞歸調用jQuery.extend 
target[ name ] = jQuery.extend( deep, clone, copy ); 
// Don't bring in undefined values 
// 不能拷貝空值 
} else if ( copy !== undefined ) { 
target[ name ] = copy; 
} 
} 
} 
} 
// Return the modified object 
// 返回更改后的對象 
return target; 
}; 