GBin1分享：jQuery新手技巧之“避免过多使用$(.someclass)”_H5之家

GBin1分享：jQuery新手技巧之“避免过多使用$('.someclass')”

日期：2011/10/08 原文：翻译：GBin1.com

作为nettus+的编辑，我需要检阅很多的教程。尽管jQuery已经流行了很多年了。但是这里任然有一个经常能够看到的非常容易犯得错误。

样例 1

首先我们看看如下代码：

$('.nav a').click(function() {
$(this).hide();
$(this).css('color', 'red');
$(this).show();
alert('something else');
$(this).hide();
return false;
});

以上代码因为各种原因有些过度复杂。我们这里不关心代码具体执行的功能。相反，我们关注一下所有的$(this)参考。

现在我们把DOM想象为一个水池。记得你还是个孩子的时候，你肯定会跳进池子里抓鱼。而你的父母肯定只是在旁边观看。这是一个非常好的现实中的比较。

每一次当你使用$(‘.someclass')的时候，jQuery都会跳到池子（DOM）里寻找鱼(Nodes)。因此，当你在一个函数中多次参考的时候，会造成大量的跳水动作。这样会带来大量的浪费。为什么在不需要的时候还调用jQuery呢？你应该执行所谓的“缓存”。

$('.nav a').click(function(e) {
   var anchor = $(this);
   anchor
      .hide()
     .css('color', 'red')
     .show();
   alert('something else');
   anchor.hide();
   e.preventDefault();
});

以上代码更加简洁。虽然现代的浏览器运行的不可思议的迅速，能够最大程度的弥补你代码上的瑕疵，但是你还是应该写出更加有效的代码，避免无效的重复和浪费。现在，技术上来说，你传递给jQuery一个DOM节点，像this，他不重新查询DOM。它只是简单的返回一个jQuery对象。

样例 2

下面我们再看看稍微更复杂一些的例子：tabs

$('.tabs li').css('position', 'relative');

$('.tabs li').click(function() {
   $('.tabs li').removeClass('active');
   $(this).addClass('active');
   $(this).load('someHref', function() {} ); // example
   $(this).css('top', '1px');
});

代码到处都是。丑陋并且低效。第一个处理的方式就是去掉所有的CSS。你只在javascript里处理动态的CSS。例如，你需要动态得到精确的元素屏幕位置，你应该用.css('left', calculatedValue)。在上面例子中，你可以将其它的CSS都放到一个外部的CSS文件中。如下：

$('.tabs li').click(function() {
   $('.tabs li').removeClass('active');
   $(this).load('someHref', function() {} ); // example
   $(this).addClass('active);
});

下一步，为.tabs li和$(this)去掉冗余的DOM查询。我们应该使用缓存，如下：

var tabs = $('.tabs li');

tabs.click(function() {
   tabs.removeClass('active');
   $(this).load('someHref', function() {} ); // example
   $(this).addClass('active);
});

但是上面我们仍旧调用了$(this)俩次，虽然不是什么大问题。但是如果你不及早解决类似问题，这样的情况最后就无法解决了。

var tabs = $('.tabs li');

tabs.click(function() {
   var tab = $(this);
   tabs.removeClass('active');
   tab.addClass('active')
     .load('someHref', function() {} ); // example
});Filtering

另外一个方式可以使用filtering，效率会低些。

var tabs = $('.tabs li');

tabs.click(function() {
   tabs.removeClass('active')
       .filter(this)
       .addClass('active)
       .load('someHref', function() {} ); // example
});

这个例子稍微不同，我们不使用$(this)，而使用filter()来减少列表项目到一个用来点击。

你应该学到的

没错，世界末日不会来到如果你在一个方法使用多次参考。 Javascript引擎异常快速。如果你这样做后测试性能几千次的话，执行的区别可能会到几百毫秒。但是问题在于，为什么你呢？

有时候，当我们使用很多的jQuery的功能时，我们都会忘记$('.tabs')是一个实际的方法调用了很多代码。要知道这些概念都是应用于javascript的，不是jQuery

原文来自：GBin1分享：jQuery新手技巧之“避免过多使用$('.someclass')”