从jquery的end()如何实现到pushStack()的延伸思想

问题:
从jquery的end()如何实现到pushStack()的延伸思想

查询jquery源码:
从jquery的end()如何实现到pushStack()的延伸思想
そうですね
看代码:
从jquery的end()如何实现到pushStack()的延伸思想
输出结果:

从jquery的end()如何实现到pushStack()的延伸思想
在jQuery对象中,每个对象都有一个prevObject属性。

问题1:这个属性什么时候创建??----->>> 只要你创建了jQuery对象就会产生
问题2:在哪里创建??------>>>> 在一个pushStack()方法里产生
问题3:作用??? ----->>>>指向操作前的jQuery对象引用
问题4:如何创建?? ------>>>> 看源码:
从jquery的end()如何实现到pushStack()的延伸思想
步骤:

1. 创建一个jQuery对象,this.constructor()返回引用this
2. jQuery.merge 把elems节点,合并到新的jQuery对象
3. 给返回的新jQuery对象添加属性prevObject

现在是不是还有点不懂??没关系,继续看图.....
从jquery的end()如何实现到pushStack()的延伸思想
从jquery的end()如何实现到pushStack()的延伸思想

先查找$('.warp')的子元素,然后调用prevObject属性,对比一看,他们俩都是class=warp的最外层div,证明prevObject确实是指向前一个操作,如果不进行任何破坏源对象的情况下(就是不进行查询过滤操作),该对象的prevObject对象就指向一个jQuery自己定义的空间,而且任何对象的prevObject都指向它,如图:
从jquery的end()如何实现到pushStack()的延伸思想
总结:
从jquery的end()如何实现到pushStack()的延伸思想
备注:其实这个图略微有些瑕疵,$('.warp').children()其实指向的是一个$('.warp')的一个副本

$('.warp').children().prevObject != $('.warp')
$('.warp').children().prevObject !== $('.warp')

优点
1.很适合链式操作,比如我需要在一个父元素内寻找几个毫无规律的子元素设置属性或者搞其他事情,在javascript中,你需要:

$('.father').find('.son1').prop()....
$('.father').find('.son5').prop()....
....

你看这代码,不停的创建这个父元素对象(当然你可以缓存这个父对象),而且必须写多行,俩者之间没有任何关联。而jquery利用了他们的共有规律(都是调用父元素去查找子元素进行操作,那我何不直接使用某个方法返回上一级操作的对象??)直接使用一个prevobject属性去返回它,这样就有了:

$('.father').find('.son1').prop().....巴拉巴拉操作  .prevObject.find('.son5').prop()...

直接一行完成操作像一条链子,不仅好看,还一目了然....
2.我们很少使用pushStack方法,然而在jQuery中,好多增删改查操作都会使用这个方法,这使得该方法的封装性和稳定性能都很very good!!

注意:addBack()方法返回的是当前操作对象和上一个操作对象,而且这个组合的新的对象会缓存在pushStack栈中

当我们写脚本的时候,对代码的封装都要很好的完成,把一些最基本的但又是涉及到很多函数操作时的方法封装在一个函数中,然后只提供一个接口给外面,类似于java的接口(高度抽象的方法),外面只能通过这个接口的一些属性或者方法去调用,你可以写在原型上,采用原型模式,或者组合使用构造函数模式和原型模式,如果不适合你也可以采用稳妥构造函数模式.

借鉴:
1.http://www.cnblogs.com/aaronj...
2.http://blog.csdn.net/wulex/ar...
3.https://stackoverflow.com/que...
4.https://www.learningjquery.co...
5.https://www.cnblogs.com/MnCu8...
6.http://jquery.cuishifeng.cn/i...
7.http://www.runoob.com/jquery/...

相关推荐