首页 > 代码库 > jQuery源码解析(架构与依赖模块)

jQuery源码解析(架构与依赖模块)

回溯处理

jQuery对象栈:jQuery内部维护着一个jQuery对象栈。每个遍历方法都会找到一组新元素(一个jQuery对象),然后jQuery会把这组元素推入到栈中。

而每个jQuery对象都有三个属性:context、selector和prevObject,其中的prevObject属性就指向这个对象栈中的前一个对象,而通过这个属性可以回溯到最初的DOM元素集中。

 

jQuery为我们操作这个内部对象栈提供个非常有用的2个方法

.end()  : 就是回溯到上一个Dom合集,因此对于链式操作与优化,这个方法还是很有意义的。

.addBack()

这里需要指出来可能有些API上是andSelf,因为就Query的api是这样写的,andSelf现在是.addBack()的一个别名。在jQuery1.8和更高版本中应使用.addBack()

源码其实也是这样的

jQuery.fn.andSelf = jQuery.fn.addBack;

调用第一个方法只是简单地弹出一个对象(结果就是回到前一个jQuery对象)。第二个方法更有意思,调用它会在栈中回溯一个位置,然后把两个位置上的元素集组合起来,并把这个新的、组合之后的元素集推入栈的上方。

利用这个DOM元素栈可以减少重复的查询和遍历的操作,而减少重复操作也正是优化jQuery代码性能的关键所在。

 1 $("#end").click(function(){
 2               $(‘ul.first‘).find(‘.foo‘).css(‘background-color‘, ‘red‘)
 3                 .end().find(‘.bar‘).css(‘background-color‘, ‘green‘);  
 4             })
 5             //addBack包含了自身的选择器
 6             $("#addBack").click(function(){
 7                 //nextAll()为选择器的所有兄弟节点,addBack指向的是前面所有的选择器
 8               $(‘.foo‘).nextAll().addBack()
 9                 .css(‘background-color‘, ‘red‘);
10                console.log($(‘.foo‘).nextAll());
11             })

 

jQuery源码解析(架构与依赖模块)