jquery 的 api 手冊中,extend 方法掛載在 jquery 和 jquery.fn 兩個不同的物件上,但在 jquery 內部**實現的是相同的,只是功能各不相同。
先看看官方給出的解釋:
雖然官方對 jquery.extend 的擴充套件方法功能隻字未提,但是它也同樣具有擴充套件 jquery 類方法 的功能。
首先,我先來介紹一下 extend 函式在 合併物件 方面的用法。
jquery
.extend(target
[, object1]
[, objectn])
合併 object1 ... objectn 到 target 物件,如果只有乙個引數,則該 target 物件會被合併到 jquery 物件中。
var obj1 =
var obj2 =
$.extend(obj1, obj2); //
obj1 //
obj2 //
上述**展示的是將 obj2 物件合併到 obj1 物件中,這種方法會 改變 obj1 物件的結構。如果你 不想改變 合併目標物件的結構,你可以這麼做。
var obj1 =
var obj2 =
$.extend({}, obj1, obj2); //
obj1 //
obj2 //
jquery
.extend([deep], target, object1
[, objectn])
和上面的講述的不同的是,該方法多了乙個型別為 boolean 的 [deep] 傳參,當其為 true 時,將 object1 , objectn 深度複製 後合併到 target 中。
首先,我們理解一下什麼叫做 深度複製 。看看其和 淺度複製 有什麼區別。
var obj1 =
}var obj2 =
}$.extend(false, {}, obj1, obj2); // }
$.extend(true, {}, obj1, obj2); // }
由此可見,執行 深度複製 會遞迴遍歷每個物件中含有複雜物件(如:陣列、函式、json物件等)的屬性值進行複製,而且 淺度複製便不會這麼做。
上述的 extend 方法中的 target 引數是可以省略的。如果省略了,則該方法就只能傳入乙個 object 引數,該方法功能是將該 object 合併到呼叫 extend 方法的物件中。
我們通常會使用這種方式來對 jquer進行一些方法上的擴充套件。
jqurey 提供了兩種方法擴張方式,分別為jquery.fn.extend(object)
和jquery.extend(object)
.
想要搞清楚兩種擴充套件方式之間的區別的話,先要了解什麼是jquery.fn
.
本猿參考了 jquery 的原始碼,發現其中玄機:
jquery.fn = jquery.prototype = ;
}
jquery.fn = jquery.prototype
這句**明確指出jquery.fn
指代的就是 jquery 的原型。
其次,我們要引入兩個概念 類方法 和 例項方法 。
jquery
可以看做是這個封裝得非常好的類,而我們可以使用jquery選擇器
來建立 jquery 的例項。比如:使 id 選擇器$('#btn')
來建立乙個例項。
jquery.extend(object)
相當於對 類方法 的擴充套件。
jquery.extend(,
/* 返回兩個元素中較大的值 */
max: function(a, b)
});jquery.min(2,
3); // 2
jquery.max(4,
5); // 5
jquery.fn.extend(object)
是對jquery.prototype
上的擴充套件。
jquery.fn
.extend = jquery.prototype
.extend
這種方式相當對 例項方法 的擴充套件。
舉個栗子:開發乙個簡單的小功能,使用該方法可以使選定元素內的文字變紅。
$.fn.extend(
});$('.tip').setred();
$(".tip")
建立了乙個jquery例項
,通過它可以呼叫成員方法setred
.
上述**可以實現預想的擴充套件,但最好返回this
以滿足 jquery 鏈式操作 的需要。
改良之後,**如下:
$.fn.extend(
});
JQuery的extend擴充套件方法
一 jquery的擴充套件方法原型是 extend dest,src1,src2,src3.它的含義是將src1,src2,src3.合併到dest中,返回值為合併後的dest,由此可以看出該方法合併後,是修改了dest的結構的。如果想要得到合併的結果卻又不想修改dest的結構,可以如下使用 var...
JQuery的extend方法詳解
jquery的extend擴充套件方法 jquery的擴充套件方法extend是我們在寫外掛程式的過程中常用的方法,該方法有一些過載原型,在此,我們一起去了解了解。一 jquery的擴充套件方法原型是 extend dest,src1,src2,src3.它的含義是將src1,src2,src3.合...
jQuery中的extend方法
jquery 中的extend方法jquery中的extend方法通過不同的引數實現了幾種不同的繼承方法 1.extend src 將src物件的屬性和方法逐一複製給jquery或jquery物件 2.extend dest,src1,src2,src3.srcn 將 src1 src2.物件的屬性...