jQuery为开发插件提拱了两个方法,分别是:
- jQuery.fn.extend(object):给jQuery对象添加方法
- jQuery.extend(object):为扩展jQuery类本身.为类添加新的方法
那么fn究竟是什么呢?
jQuery.fn = jQuery.prototype
jQuery.fn指的就是jQuery的原型对象,也就是指jQuery的命名空间,因此在$.fn上定义的方法和属性,是所有jQuery对象共享的。
由此可以扩展jQuery方法,自己添加jQuery插件:
$.fn.resourceFilterMenu = function(){
……
}
$("div").resourceFliterMenu();
因此jQuery.fn.extend就是对jQuery.prototype的扩展,添加原型方法,也就是为jQuery对象添加方法。
$.fn.extend({
xyz:function(){
alert("test");
}
});
这样定义的是jQuery对象的方法:
$("#id").xyz();
而jQuery.extend则是为jQuery整体添加方法,可以理解为全局方法、静态方法.
$.extend({
xyz:function(){
alert("test");
}
})
需要像下面这样使用:
$.xyz();
除了为jQuery添加静态方法之外,$.extend()方法还用于合并对象。
jQuery.extend( [deep ], target, object1 [, objectN ] )
- deep:Boolean,如果为true,则表示深拷贝,即递归式合并
- target:Object,一个对象,如果附加的对象被传递给这个方法将那么它将接收新的属性,如果它是唯一的参数将扩展jQuery的命名空间。
- object1:Object,一个对象,它包含额外的属性合并到第一个参数
- objectN:Object,包含额外的属性合并到第一个参数
当我们提供两个或多个对象给$.extend(),对象的所有属性都添加到目标对象(target参数)。
如果只有一个参数提供给$.extend(),这意味着目标参数被省略。在这种情况下,jQuery对象本身被默认为目标对象。这样,我们可以在jQuery的命名空间下添加新的功能。这对于插件开发者希望向 jQuery 中添加新函数时是很有用的。
请记住,目标对象(第一个参数)将被修改,并且将通过$.extend()返回。然而,如果我们想保留原对象,我们可以通过传递一个空对象作为目标对象:
var object = $.extend({}, object1, object2);
有关深拷贝:
在默认情况下,通过$.extend()合并操作不是递归的;如果第一个对象的属性本身是一个对象或数组,那么它将完全用第二个对象相同的key重写一个属性:
var object1 = {
apple: 0,
banana: { weight: 52, price: 100 },
cherry: 97
};
var object2 = {
banana: { price: 200 },
durian: 100
};
// Merge object2 into object1
$.extend( object1, object2 );
object1; //{"apple":0,"banana":{"price":200},"cherry":97,"durian":100}
此时并没有采用深拷贝,因此banana是会简单指向object2的属性的。
然而,如果将 true 作为该函数的第一个参数,那么会在对象上进行递归的合并。
警告:不支持第一个参数传递 false 。
$.extend(true,object1,object2);
object1; //{"apple":0,"banana":{"weight":52,"price":200},"cherry":97,"durian":100}