作者：nuysoft/高雲 QQ：47214707 EMail：
[email protected] 畢竟是邊讀邊寫，不對的地方請告訴我，多多交流共同進步。本章還未寫完，完了會提交PDF。
前記：
想系統的好好寫寫，但是會先從感興趣的部分開始。
近期有讀者把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（優化）
// 字符串：HTML標簽、HTML字符串、#id、選擇器表達式
// 函數（作為ready回調函數）
// 最後返回偽數組
}
};
// Give the init function the jQuery prototype for later instantiation
jQuery.fn.init.prototype = jQuery.fn;
// 合並內容到第一個參數中，後續大部分功能都通過該函數擴展
// 通過jQuery.fn.extend擴展的函數，大部分都會調用通過jQuery.extend擴展的同名函數
jQuery.extend = jQuery.fn.extend = function() {};
// 在jQuery上擴展靜態方法
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 創建的，而是通過 new jQuery.fn.init 創建的
. 代碼如下:
var jQuery = function( selector, context ) {
return new jQuery.fn.init( selector, context, rootjQuery );
}
n jQuery對象就是jQuery.fn.init對象
n 如果執行new jQeury(),生成的jQuery對象會被拋棄，最後返回 jQuery.fn.init對象；因此可以直接調用jQuery( selector, context )，沒有必要使用new關鍵字
l 先執行 jQuery.fn = jQuery.prototype，再執行 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（優化）
從document.body讀取
單獨的HTML標簽
document.createElement
HTML字符串
document.createDocumentFragment
#id
document.getElementById
選擇器表達式
$(…).find
函數
注冊到dom ready的回調函數
3.3 jQuery.extend = jQuery.fn.extend
. 代碼如下:
// 合並兩個或更多對象的屬性到第一個對象中，jQuery後續的大部分功能都通過該函數擴展
// 通過jQuery.fn.extend擴展的函數，大部分都會調用通過jQuery.extend擴展的同名函數
// 如果傳入兩個或多個對象，所有對象的屬性會被添加到第一個對象target
// 如果只傳入一個對象，則將對象的屬性添加到jQuery對象中。
// 用這種方式，我們可以為jQuery命名空間增加新的方法。可以用於編寫jQuery插件。
// 如果不想改變傳入的對象，可以傳入一個空對象：$.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
// 避免循環引用
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;
};
未完待續