欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery源碼分析-03構(gòu)造jQuery對象-源碼結(jié)構(gòu)和核心函數(shù)

 更新時(shí)間:2011年11月14日 23:40:23   作者:  
jQuery源碼分析-03構(gòu)造jQuery對象-源碼結(jié)構(gòu)和核心函數(shù),需要的朋友可以參考下。
作者:nuysoft/高云 QQ:47214707 EMail:nuysoft@gmail.com
畢竟是邊讀邊寫,不對的地方請告訴我,多多交流共同進(jìn)步。本章還未寫完,完了會提交PDF。
前記:
想系統(tǒng)的好好寫寫,但是會先從感興趣的部分開始。
近期有讀者把PDF傳到了百度文庫上,首先感謝轉(zhuǎn)載和傳播,但是據(jù)為已有并設(shè)置了挺高的財(cái)富值才能下載就不好了,以后我整理好了會傳到文庫上。請?bào)w諒一下。
3. 構(gòu)造jQuery對象
3.1 源碼結(jié)構(gòu)
先看看總體結(jié)構(gòu),再做分解:
復(fù)制代碼 代碼如下:

(function( window, undefined ) {
var jQuery = (function() {
// 構(gòu)建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標(biāo)簽、HTML字符串、#id、選擇器表達(dá)式
// 函數(shù)(作為ready回調(diào)函數(shù))
// 最后返回偽數(shù)組
}
};
// Give the init function the jQuery prototype for later instantiation
jQuery.fn.init.prototype = jQuery.fn;
// 合并內(nèi)容到第一個(gè)參數(shù)中,后續(xù)大部分功能都通過該函數(shù)擴(kuò)展
// 通過jQuery.fn.extend擴(kuò)展的函數(shù),大部分都會調(diào)用通過jQuery.extend擴(kuò)展的同名函數(shù)
jQuery.extend = jQuery.fn.extend = function() {};
// 在jQuery上擴(kuò)展靜態(tài)方法
jQuery.extend({
// ready bindReady
// isPlainObject isEmptyObject
// parseJSON parseXML
// globalEval
// each makeArray inArray merge grep map
// proxy
// access
// uaMatch
// sub
// browser
});
// 到這里,jQuery對象構(gòu)造完成,后邊的代碼都是對jQuery或jQuery對象的擴(kuò)展
return jQuery;
})();
window.jQuery = window.$ = jQuery;
})(window);

l jQuery對象不是通過 new jQuery 創(chuàng)建的,而是通過 new jQuery.fn.init 創(chuàng)建的
復(fù)制代碼 代碼如下:

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對象;因此可以直接調(diào)用jQuery( selector, context ),沒有必要使用new關(guān)鍵字
l 先執(zhí)行 jQuery.fn = jQuery.prototype,再執(zhí)行 jQuery.fn.init.prototype = jQuery.fn,合并后的代碼如下:
jQuery.fn.init.prototype = jQuery.fn = jQuery.prototype
所有掛載到j(luò)Query.fn的方法,相當(dāng)于掛載到了jQuery.prototype,即掛載到了jQuery 函數(shù)上(一開始的 jQuery = function( selector, context ) ),但是最后都相當(dāng)于掛載到了 jQuery.fn.init.prototype,即相當(dāng)于掛載到了一開始的jQuery 函數(shù)返回的對象上,即掛載到了我們最終使用的jQuery對象上。
這個(gè)過程非常的繞,金玉其外“敗絮”其中?。?
3.2 jQuery.fn.init
jQuery.fn.init的功能是對傳進(jìn)來的selector參數(shù)進(jìn)行分析,進(jìn)行各種不同的處理,然后生成jQuery對象。
類型(selector)
處理方式
DOM元素
包裝成jQuery對象,直接返回
body(優(yōu)化)
從document.body讀取
單獨(dú)的HTML標(biāo)簽
document.createElement
HTML字符串
document.createDocumentFragment
#id
document.getElementById
選擇器表達(dá)式
$(…).find
函數(shù)
注冊到dom ready的回調(diào)函數(shù)
3.3 jQuery.extend = jQuery.fn.extend
復(fù)制代碼 代碼如下:

// 合并兩個(gè)或更多對象的屬性到第一個(gè)對象中,jQuery后續(xù)的大部分功能都通過該函數(shù)擴(kuò)展
// 通過jQuery.fn.extend擴(kuò)展的函數(shù),大部分都會調(diào)用通過jQuery.extend擴(kuò)展的同名函數(shù)
// 如果傳入兩個(gè)或多個(gè)對象,所有對象的屬性會被添加到第一個(gè)對象target
// 如果只傳入一個(gè)對象,則將對象的屬性添加到j(luò)Query對象中。
// 用這種方式,我們可以為jQuery命名空間增加新的方法??梢杂糜诰帉慾Query插件。
// 如果不想改變傳入的對象,可以傳入一個(gè)空對象:$.extend({}, object1, object2);
// 默認(rèn)合并操作是不迭代的,即便target的某個(gè)屬性是對象或?qū)傩裕矔煌耆采w而不是合并
// 第一個(gè)參數(shù)是true,則會迭代合并
// 從object原型繼承的屬性會被拷貝
// undefined值不會被拷貝
// 因?yàn)樾阅茉颍琂avaScript自帶類型的屬性不會合并
// 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
// 如果第一個(gè)參數(shù)是boolean型,可能是深度拷貝
if ( typeof target === "boolean" ) {
deep = target;
target = arguments[1] || {};
// skip the boolean and the target
// 跳過boolean和target,從第3個(gè)開始
i = 2;
}
// Handle case when target is a string or something (possible in deep copy)
// target不是對象也不是函數(shù),則強(qiáng)制設(shè)置為空對象
if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
target = {};
}
// extend jQuery itself if only one argument is passed
// 如果只傳入一個(gè)參數(shù),則認(rèn)為是對jQuery擴(kuò)展
if ( length === i ) {
target = this;
--i;
}
for ( ; i < length; i++ ) {
// Only deal with non-null/undefined values
// 只處理非空參數(shù)
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
// 深度拷貝且值是純對象或數(shù)組,則遞歸
if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {
// 如果copy是數(shù)組
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
// 遞歸調(diào)用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;
};

未完待續(xù)

相關(guān)文章

最新評論