jQuery源码解析（架构与依赖模块）

Posted 2020-09-17

回溯处理

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             })