jQuery中extends详解.doc

jQuery.extend 函数详解JQuery的extend扩展方法： Jquery的扩展方法extend是我们在写插件的过程中常用的方法，该方法有一些重载原型，在此，我们一起去了解了解。一、Jquery的扩展方法原型是: extend(dest,src1,src2,src3.); 它的含义是将src1,src2,src3.合并到dest中,返回值为合并后的dest,由此可以看出该方法合并后，是修改了dest的结构的。如果想要得到合并的结果却又不想修改dest的结构，可以如下使用： var newSrc=$.extend(,src1,src2,src3.)/也就是将作为dest参数。 这样就可以将src1,src2,src3.进行合并，然后将合并结果返回给newSrc了。如下例：var result=$.extend(,name:Tom,age:21,name:Jerry,sex:Boy) 那么合并后的结果 result=name:Jerry,age:21,sex:Boy 也就是说后面的参数如果和前面的参数存在相同的名称，那么后面的会覆盖前面的参数值。二、省略dest参数上述的extend方法原型中的dest参数是可以省略的，如果省略了，则该方法就只能有一个src参数，而且是将该src合并到调用extend方法的对象中去，如：1、$.extend(src)该方法就是将src合并到jquery的全局对象中去，如： $.extend( hello:function()alert(hello); );就是将hello方法合并到jquery的全局对象中。2、$.fn.extend(src)该方法将src合并到jquery的实例对象中去，如: $.fn.extend( hello:function()alert(hello); );就是将hello方法合并到jquery的实例对象中。下面例举几个常用的扩展实例：$.extend(net:); 这是在jquery全局对象中扩展一个net命名空间。 $.extend($.net, hello:function()alert(hello); ) 这是将hello方法扩展到之前扩展的Jquery的net命名空间中去。三、Jquery的extend方法还有一个重载原型：extend(boolean,dest,src1,src2,src3.) 第一个参数boolean代表是否进行深度拷贝，其余参数和前面介绍的一致，什么叫深层拷贝，我们看一个例子：var result=$.extend( true, , name: John, location: city: Boston,county:USA , last: Resig, location: state: MA,county:China ); 我们可以看出src1中嵌套子对象location:city:Boston,src2中也嵌套子对象location:state:MA,第一个深度拷贝参数为true，那么合并后的结果就是：result=name:John,last:Resig, location:city:Boston,state:MA,county:China也就是说它会将src中的嵌套子对象也进行合并，而如果第一个参数boolean为false，我们看看合并的结果是什么，如下：var result=$.extend( false, , name: John, location:city: Boston,county:USA , last: Resig, location: state: MA,county:China ); 那么合并后的结果就是: result=name:John,last:Resig,location:state:MA,county:ChinajQuery.extend()的实现方式jQuery中的extend()extend()函数是jQuery的基础函数之一，作用是扩展现有的对象。例如下面的代码：Html代码obj1 = a : a, b : b ;obj2 = x : xxx : xxx, yyy : yyy , y : y ;$.extend(true, obj1, obj2);alert(obj1.x.xxx); / 得到xxxobj2.x.xxx = zzz;alert(obj2.x.xxx); / 得到zzzalert(obj1.x.xxx); / 得带xxx$.extend(true, obj1, obj2)表示以obj2中的属性扩展对象obj1，第一个参数设为true表示深复制。虽然obj1中原来没有x属性，但经过扩展后，obj1不但具有了x属性，而且对obj2中的x属性的修改也不会影响到obj1中x属性的值，这就是所谓的“深复制”了。浅复制的实现如果仅仅需要实现浅复制，可以采用类似下面的写法：Javascript代码$ = extend : function(target, options) for (name in options) targetname = optionsname; return target; ;也就是简单地将options中的属性复制到target中。我们仍然可以用类似的代码进行测试，但得到的结果有所不同(假设我们的js命名为“jquery-extend.js”)：Html代码obj1 = a : a, b : b ;obj2 = x : xxx : xxx, yyy : yyy , y : y ;$.extend(obj1, obj2);alert(obj1.x.xxx); / 得到xxxobj2.x.xxx = zzz;alert(obj2.x.xxx); / 得到zzzalert(obj1.x.xxx); / 得带zzzobj1中具有了x属性，但这个属性是一个对象，对obj2中的x的修改也会影响到obj1，这可能会带来难以发现的错误。深复制的实现如果我们希望实现“深复制”，当所复制的对象是数组或者对象时，就应该递归调用extend。如下代码是“深复制”的简单实现：Javascript代码$ = extend : function(deep, target, options) for (name in options) copy = optionsname; if (deep & copy instanceof Array) targetname = $.extend(deep, , copy); else if (deep & copy instanceof Object) targetname = $.extend(deep, , copy); else targetname = optionsname; return target; ;具体分为三种情况：1. 属性是数组时，则将targetname初始化为空数组，然后递归调用extend；2. 属性是对象时，则将targetname初始化为空对象，然后递归调用extend；3. 否则，直接复制属性。测试代码如下：Html代码obj1 = a : a, b : b ;obj2 = x : xxx : xxx, yyy : yyy , y : y ;$.extend(true, obj1, obj2);alert(obj1.x.xxx); / 得到xxxobj2.x.xxx = zzz;alert(obj2.x.xxx); / 得到zzzalert(obj1.x.xxx); / 得到xxx现在如果指定为深复制的话，对obj2的修改将不会对obj1产生影响了；不过这个代码还存在一些问题，比如“instanceof Array”在IE5中可能存在不兼容的情况。jQuery中的实现实际上会更复杂一些。更完整的实现下面的实现与jQuery中的extend()会更接近一些：Javascript代码$ = function() var copyIsArray, toString = Ototype.toString, hasOwn = Ototype.hasOwnProperty; class2type = object Boolean : boolean, object Number : number, object String : string, object Function : function, object Array : array, object Date : date, object RegExp : regExp, object Object : object , type = function(obj) return obj = null ? String(obj) : class2typetoString.call(obj) | object; , isWindow = function(obj) return obj & typeof obj = object & setInterval in obj; , isArray = Array.isArray | function(obj) return type(obj) = array; , isPlainObject = function(obj) if (!obj | type(obj) != object | obj.nodeType | isWindow(obj) return false; if (obj.constructor & !hasOwn.call(obj, constructor) & !hasOwn.call(totype, isPrototypeOf) return false; var key; for (key in obj) return key = undefined | hasOwn.call(obj, key); , extend = function(deep, target, options) for (name in options) src = targetname; copy = optionsname; if (target = copy) continue; if (deep & copy & (isPlainObject(copy) | (copyIsArray = isArray(copy) if (copyIsArray) copyIsArray = false; clone = src & isArray(src) ? src : ; else clone = src & isPlainObject(src) ? src : ; targetname = extend(deep, clone, copy); else if (copy != undefined) targetname = copy; return target; ; return extend : extend ;();首先是 $ = function().();这种写法，可以理解为与下面的写法类似：Java代码func = function().;$ = func();也就是立即执行函数，并将结果赋给$。这种写法可以利用function来管理作用域，避免局部变量或局部函数影响全局域。另外，我们只希望使用者调用$.extend()，而将内部实现的函数隐藏，因此最终返回的对象中只包含extend:Java代码return extend : extend ;接下来，我们看看extend函数与之前的区别，首先是多了这句话：Java代码if (target = copy) continue; 这是为了避免无限循环，要复制的属性copy与target相同的话，也就是将“自己”复制为“自己的属性”，可能导致不可预料的循环。然后是判断对象是否为数组的方式：Java代码type = function(obj) return obj = null ? String(obj) : class2typetoString.call(obj) | object;,isArray = Array.isArray | function(obj) return type(obj) = array; 如果浏览器有内置的Array.isArray 实现，就使用浏览器自身的实现方式，否则将对象转为String，看是否为object Array。 最后逐句地看看isPlainObject的实现：Java代码if (!obj | type(obj) != object | obj.nodeType | isWindow(obj) return false;如果定义了obj.nodeType，表示这是一个DOM元素；这句代码表示以下四种情况不进行深复制：1. 对象为undefined；2. 转为String时不是object Object；3. obj是一个DOM元素；4. obj是window。之所以不对DOM元素和window进行深复制，可能是因为它们包含的属性太多了；尤其是window对象，所有在全局域声明的变量都会是其属性，更不用说内置的属性了。接下来是与构造函数相关的测试：Javascript代码if (obj.constructor & !hasOwn.call(obj, constructor) & !hasOwn.call(totype, isPrototypeOf) return false; 如果对象具有构造函数，但却不是自身的属性，说明这个构造函数是通过prototye继承来的，这