首页 > 代码库 > 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源码解析(架构与依赖模块)
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。