首页 > Other > jQuery新手技巧之“避免过多使用$(‘.someclass’)”

jQuery新手技巧之“避免过多使用$(‘.someclass’)”

作为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

分类:Other
  1. 还没有评论。
  1. No trackbacks yet.

发表评论

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 更改 )

Twitter picture

You are commenting using your Twitter account. Log Out / 更改 )

Facebook photo

You are commenting using your Facebook account. Log Out / 更改 )

Google+ photo

You are commenting using your Google+ account. Log Out / 更改 )

Connecting to %s

%d 博主赞过: