×

扩展jQuery静态方法:extend(dest,src1,src2,src3...srcN)

作者:Terry2016.09.28来源:Web前端之家浏览:12844评论:0
关键词:html5JQuery

Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型,在此,我们一起去了解了解。

js.png

1. extend(src), 扩展jQuery静态方法.

也就是说,将src对象的属性和方法逐一复制给jQuery

Java代码
  1. $.extend({

  2. test:function(){alert('test函数')}

  3. })

2. extend(dest,src1,src2,src3...srcN) ,合并多个对象.

为jQuery.extend(css1,css2)为例,css1,css2各有一些属性(方法照样会如此处理,这里只讲属性).
extend函数会把css2有而css2没有的属性加到css1中,如果css2的某个属性与css1的某个属性名称享用,就会用css2的属性去覆盖css1的同名属性。css1就是最后的整和对象。或者也可以用:

var newcss = jquery.extend(css1,css2) newcss就是合并的新对象。

var newcss = jquery.extend({},css1,css2) newcss就是合并的新对象.而且没有破坏css1的结构。

Java代码
  1. //用法: jQuery.extend(obj1,obj2,obj3,..)

  2. ar Css1={size: "10px",style: "oblique"}

  3. var Css2={size: "12px",style: "oblique",weight: "bolder"}

  4. $.jQuery.extend(Css1,Css2)

  5. //结果:Css1的size属性被覆盖,而且继承了Css2的weight属性

  6. // Css1 = {size: "12px",style: "oblique",weight: "bolder"}7

3.extend(boolean,dest,src1,src2...),深度镶套对象

新的extend()允许你更深度的合并镶套对象。下面的例子是一个很好的证明。

Java代码
  1. // 以前的 .extend()

  2. jQuery.extend(

  3. { name: “John”, location: { city: “Boston” } },

  4. { last: “Resig”, location: { state: “MA” } }

  5. );

  6. // 结果:

  7. // => { name: “John”, last: “Resig”, location: { state: “MA” } }

  8. // 新的更深入的 .extend()

  9. jQuery.extend( true,

  10. { name: “John”, location: { city: “Boston” } },

  11. { last: “Resig”, location: { state: “MA” } }

  12. );

  13. // 结果

  14. // => { name: “John”, last: “Resig”,

  15. // location: { city: “Boston”, state: “MA” } } 1617

与其他的类库不同的是,jQuery的extend方法提供了“深层拷贝”的功能,如果你传入的第一个参数为boolean型变量,则该变量为深层拷贝的标志,第二个参数为extend方法的目标对象,其余参数为需要进行继承的“父类”。如果第一个参数的值为true(深层拷贝),并且dest和 src元素都包括相同名称的对象属性,则对该对象属性的方法和属性再进行一次复制。

* 最后我们来通过分析源代码,来加深对该继承机制的理解:

jQuery.extend = jQuery.fn.extend = function() {
// copy reference to target object
var target = arguments[0] || {}, i = 1, length = arguments.length, deep = false, options;

// Handle a deep copy situation
if ( target.constructor == Boolean ) {
deep = target;
target = arguments[1] || {};
// skip the boolean and the target
i = 2;
}

// Handle case when target is a string or something (possible in deep copy)

if ( typeof target != "object" && typeof target != "function" )
target = {};

// 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 ( var name in options ) {
var src = target[ name ], copy = options[ name ];

// Prevent never-ending loop
if ( target === copy )
continue;

// Recurse if we're merging object values
if ( deep && copy && typeof copy == "object" && !copy.nodeType )
target[ name ] = jQuery.extend( deep,
// Never move original objects, clone them
src || ( copy.length != null ? [ ] : { } )
, copy );

// Don't bring in undefined values
else if ( copy !== undefined )
target[ name ] = copy;

}

// Return the modified object
return target;
};

* 注意:

在这里还有一个特殊的地方,就是在函数开头的地方有jQuery.extend = jQuery.fn.extend,而在程序的前面已经将jQuery.prototype赋值给jQuery.fn了,所以在后面的调用中会出现 jQuery.extend()和jQuery.fn.extend()的不同调用,这两个方法调用产生的结果也不一样,jQuery.extend() 的调用并不会把方法扩展到对象的实例上,引用它的方法也需要通过jQuery类来实现,如jQuery.init(),而 jQuery.fn.extend()的调用把方法扩展到了对象的prototype上,所以实例化一个jQuery对象的时候,它就具有了这些方法,这是很重要的,在jQuery.js中到处体现这一点

您的支持是我们创作的动力!
温馨提示:本文作者系Terry ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/1474992000873.html

网友评论文明上网理性发言已有0人参与

发表评论: