继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

jquery源码-extend

会当凌绝顶聪明
关注TA
已关注
手记 240
粉丝 36
获赞 122

上次学习到jQuery的构成,接下来学习jQuery核心部分的extend。它是制作插件的一种方式。

上次说到了jQuery.fn也就是jQuery的原型,而jQuery的extend是jQuery.fn的属性。

extend是一个函数,它的返回值有两种情况,对象或是jQuery构造函数的引用。

现在要说的是返回值是jQuery构造函数的情况。 



在代码(26行)jQuery.fn上增加了extend方法,同时又赋值给了另外一个引用

jQuery.extend,这样在以后就可以使用jQuery.fn.extend或者jQuery.extend。

 

接下来看代码的(70行),这是对jQuery.extend的调用参数是一个对象,对象里面有

两个方法isWindow,isNumeric。

 

在回到代码的第(27行),声明了一堆的参数。首先看target,它的值为jQuery.extend

函数的第一个参数或者为一个对象。length为arguments的长度,i的默认值为1。

 

接下来是对target类型的判断,这里先忽略掉直接看代码的第(41行)。

还记得代码(70行)对jQuery.extend的调用吗?值传递了一个参数是一个对象,也就是说

到现在代码(41行)的判断是成立的,所以代码(42行)对target进行了重新赋值,这里的this就是jQuery构造函数的引用。

 

接下来代码(46行)开始是一个双层的循环,第一成遍历的是jQuery.extend实参,这里

只有一个参数所以length为1。代码(47行)对options赋值为jQuery.extend的参数。

代码(48行)对options进行了遍历这里遍历的也就是传递的实参对象。

代码(49行)jQuery构造函数上的name属性的值赋值给变量src。

代码(50行)实参的name属性的值赋值给copy。

代码(52行)判断如果实参传递进来的值是jQuery构造函数引用则跳过,因为这样没有任何意义。

代码(56行)的判断不成立,所以直接看(61行),这里在jQuery构造函数上增加name属性其值为copy(实参name属性的值)。

 

到此,就将传递进来的对象依次添加到jQuery的构造函数上了。这里有一点需要注意:

使用这样的方式进行扩展的属性或者方法只能通过$.xxx或者jQuery.xxx来使用,

不能通过$('#demo').xxx来使用,因为xxx根本没在jQuery的原型上。

 

使用$('#demo')的方式都会经过构造方法,返回的对象能使用的方法都在原型上,

所以这样的方式是访问不到通过jQuery.extend进行扩展的方法和属性。因为通过

jQuery.extend扩展的属性或者方法都添加在了jQuery的构造函数上。

之所以这样做的原因是,使用相关方法或者属性不需要经过jQuey的构造方法。因为有些方法根本不需要查找DOM元素。

 

总结:

jQuery.extend是jQuery.prototype上的一个属性,每个jQuery对象都会有extend方法。

但是通过jQuery.extend扩展的方法和属性都添加到了jQuery的构造函数上,

并不在jQuery.prototype上。(暂时这些)


打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP