jQuery选择的工作原理和优化2

以前写过一篇优化的文章，是关于书写选择器的，今天写这篇主要是应用的时候通过局部变量而减少jquery的资源消耗。
      由于jquery本身对每次的选择器结果并没有cache，也就是说$('div');$('div');就会重复的从头到尾再选择一次，理想的情况下， 如果页面的结构没有发生变化，应当第二次遇见同样的选择直接返回第一次的结果，这样就会提高效率，但是jquery本身没有提供这样的功能，那我们再应用 jquery的时候就要注意和考虑自己的代码结构，尽量避免重复的选择。现在很多流行的插件在书写的时候也没有注意这个问题，下边先看看例子，之后再说我 们平时书写的时候一般要注意那些问题。
     一般：
$('div').each(function(){
   $(this).click(function(){
      alert('click');
   });
   $(this).find('span').css('color','red');
});
    优化之后：
$('div').each(function(){
   var _self=$(this);
   _self.click(function(){
      alert('click');
   });
   _self.find('span').css('color','red');
});
上边这个例子非常简单，当然你可以说直接连写不就把问题解决了嘛，答案是肯定的，但是我们往往在复杂的应用的时候，我们想保存现在this指针，而不是jquery自己指向的指针，看看下边这个：
$('div').each(function(){
   $(this).click(function(){
      alert('click');
   });
   $(this).find('span').css('color','red');
   $(this).prev().css('color','red');
   $(this).prev().find('span').css('color','red');
});
优化后：
$('div').each(function(){
var _self=$(this);
var _selfP=_self.prev();
   _self.click(function(){
      alert('click');
   });
   _self.find('span').css('color','red');
   _selfP.css('color','red');
   _selfP=_.find('span').css('color','red');
});
     这个例子中，应该很明显了，我们少执行3次jquery的选择器，而是用_self这样的局部变量做了cache，其余的就不多说了，因为我们定义的是局部变量，也不要担心会占有内存，在函数结束的时候内存就会释放出来。
    最后说点平时书写的注意事项：
    1、选择器的开始位置，上篇说过用id定位。
    2、this指针的cache和选择器的cache，就这篇主题。
    3、全部变量尽量减少，这个下篇说明原因和书写方法。

评论

1 楼 lanshunfang 2011-03-25  

改进jquery， 请看：http://www.tvidesign.co.uk/blog/improve-your-jquery-25-excellent-tips.aspx