jQuery技术

jquery源码分析(二)——架构设计(3)

字号+ 作者:H5之家 来源:H5之家 2017-09-07 10:16 我要评论( )

3、重点来了:pushStack在jQuery中使用频率特别高,它是干嘛的?只看这段代码。只能知道 它调用了jQuery.merge,合并了类数组。 jQuery.extend = jQuery.fn.extend = function () { var src, copyIsArray, copy, na

3、重点来了:pushStack在jQuery中使用频率特别高,它是干嘛的?只看这段代码。只能知道 它调用了jQuery.merge,合并了类数组。

jQuery.extend = jQuery.fn.extend = function() { var src, copyIsArray, copy, name, options, clone, target = arguments[0] || {}, i = 1, length = arguments.length, deep = false; if ( typeof target === "boolean" ) { deep = target; target = arguments[ i ] || {}; i++; } if ( typeof target !== "object" && !jQuery.isFunction(target) ) { target = {}; } if ( i === length ) { target = this; i--; } ( name in options ) { src = target[ name ]; copy = options[ name ]; if ( target === copy ) { continue; } if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) { if ( copyIsArray ) { copyIsArray = false; clone = src && jQuery.isArray(src) ? src : []; } else { clone = src && jQuery.isPlainObject(src) ? src : {}; } target[ name ] = jQuery.extend( deep, clone, copy ); } else if ( copy !== undefined ) { target[ name ] = copy; } } } } return target; };

1、功能:jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。jQuery.fn.extend(object);给jQuery实例对象添加方法。

2、结合$.extend使用方法来分析:

(1)、var newSrc=$.extend({},src1,src2,src3...) (2)、var newSrc=$.extend(false,{},src1,src2,src3...)//嵌套子对象不拷贝 (3)、var newSrc=$.extend(true,{},src1,src2,src3...)

从arguments可以看出,extend是为了合并两个或更多对象的属性到第一个对象中。

3、再来分析代码:

看第一个逻辑意思是:如果第一个参数是布尔型的话,要实现扩展的对象target就是第二个参数,接下来再判断此时target是否对象或函数,都不是则默认扩展到{}。

接下来两个for循环,第一个循环遍历后续所有对象,第二个循环 实现将每个对象属性的copy到第一个对象。看似很简单,问题来了,target的属性与需要copy对象属性一样时,怎么处理?是直接覆盖/重写,还是合并?这就涉及到了浅拷贝与深拷贝,那浅拷贝与深拷贝又是什么。

(1)、js对象浅拷贝简单的赋值就是浅拷贝。因为对象和数组在赋值的时候都是引用传递。赋值的时候只是传递一个指针。也就是说遇到同名属性时直接覆盖/重写。

(2)、因为对象相对较为复杂,所以我们先来看对数组的深拷贝的问题

来看个例子,说明一下

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"}} ////浅拷贝,对copy对象同名属性值类型为数组或对象的属性进行合并

也就是说它会将src中的嵌套子对象也进行合并,

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • JQuery知识点

    JQuery知识点

    2017-09-07 12:05

  • jQuery LigerUI 使用教程表格篇(1)

    jQuery LigerUI 使用教程表格篇(1)

    2017-09-06 16:01

  • 9.1 技巧:搭建jQuery Mobile基础页面

    9.1 技巧:搭建jQuery Mobile基础页面

    2017-09-06 14:50

  • JQuery之事件

    JQuery之事件

    2017-09-05 17:14

网友点评
s