上次学习到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上。(暂时这些)