JQuery小刨

quasiceo 2012-11-23

展開(kāi)全文

再來(lái)看一下jQuery的擴(kuò)展方法吧，這可是jQuery的核心。
其實(shí)這個(gè)方法并不復(fù)雜，它的功能有以下幾個(gè)
1.對(duì)object jQuery的擴(kuò)展，也就是做成所謂的Utilities方法集，方便大家使用jQuery.functionName()的方式調(diào)用。
2.對(duì)jQuery.fn（也就是jQuery.fn.init.prototype，也就是jQuery.fn.init的實(shí)例，也就是調(diào)用$()方法返回的對(duì)象）的擴(kuò)展，擴(kuò)充jQuery實(shí)例的功能。
3.對(duì)object進(jìn)行屬性或者方法的復(fù)制（包括深度復(fù)制）。

對(duì)jQuery以及jQuery.fn進(jìn)行擴(kuò)充，從source里可以看出，因?yàn)閰?shù)只有一個(gè)，走的是個(gè)很簡(jiǎn)單的路徑，如果把source抽出來(lái)，就如同下面所示：

Js代碼

jQuery.extend = jQuery.fn.extend = function() {
// copy reference to target object
var target = arguments[0] || {}, i = 1, length = arguments.length, deep = false, options, name, src, copy;
// extend jQuery itself if only one argument is passed
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;
}
// Don't bring in undefined values
if ( copy !== undefined ) {
target[ name ] = copy;
}
}
}
}
// Return the modified object
return target;
};

除去雜亂的變量聲明，賦值以及判斷。其實(shí)就是簡(jiǎn)單的對(duì)對(duì)象的屬性方法擴(kuò)充。

如果不是深度復(fù)制，那基本上就是對(duì)對(duì)象方法的clone了，從jQuery的source來(lái)看，就是把對(duì)象object的方法屬性賦值一份。如：5557行（以版本1.4.2的普通版為準(zhǔn)）

Js代碼

var opt = jQuery.extend({}, optall)

就是把object optall里的屬性方法clone給一個(gè)空的object。
剝離出的代碼如下：

Js代碼

jQuery.extend = jQuery.fn.extend = function() {
// copy reference to target object
var target = arguments[0] || {}, i = 1, length = arguments.length, deep = false, options, name, src, copy;
// Handle case when target is a string or something (possible in deep copy)
if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
target = {};
}
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;
}
// Don't bring in undefined values
if ( copy !== undefined ) {
target[ name ] = copy;
}
}
}
}
// Return the modified object
return target;
};

從source的4931行，還可以看出，這個(gè)方法除了clone外，還可以覆蓋掉原有object的默認(rèn)設(shè)置。

Js代碼

jQuery.extend( jQuery.ajaxSettings, settings );

深度復(fù)制其實(shí)就是如果復(fù)制對(duì)象的屬性里有object或者數(shù)組的話，使用遞歸的方式把它們都復(fù)制過(guò)來(lái)。
舉個(gè)例子來(lái)講

Js代碼

var src = {name:"wqf"};
var copy = {info:{company:"macrohard",position:"CEO"}};
var ret =jQuery.extend(true,src,copy);

得到的結(jié)果就是

Js代碼

ret ={name:"wqf"，info:{company:"macrohard",position:"CEO"}}

當(dāng)然，如果出現(xiàn)重復(fù)的屬性或者方法的話，也會(huì)覆蓋掉。

這個(gè)方法并不復(fù)雜，可是卻是jQuery里比較重要的一個(gè)方法，弄清楚它的幾個(gè)作用，有助于快速理清一些方法的實(shí)現(xiàn)。

本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買(mǎi)等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào)。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來(lái)自： quasiceo > 《javascript》

舉報(bào)/認(rèn)領(lǐng)