新标题：jQuery新手小贴士：停止在泳池中跳跃

作为 Nettuts+ 的编辑，我可以审查提交的教程中的大量代码。尽管 jQuery 已经推出多年，但我仍然最常看到一个常见的错误。

示例#1

考虑以下代码：

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

由于多种原因，上面的代码过于复杂。不要担心代码实际上做了什么（它是胡言乱语）。相反，我希望您查看所有对 $(this) 的引用。

将 DOM 视为一个池。

将 DOM 视为一个池。还记得小时候，你会跳进水池里寻找硬币，而你的父母却表现得好像在旁边看着吗？这将是我们在现实世界中的比较。

每次使用 $('.someClass') 时，jQuery 都会跳转到池 (DOM) 中，并搜索该硬币（或节点）。因此，当您在一个函数中多次引用它时，就会需要大量的潜水。或者，从现实世界的比较来看，这是浪费且不必要的。如果不需要，为什么要调用 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 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('left',calculatedValue)。在这种情况下，可以将其全部导出到外部样式表。这给我们留下了：

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

接下来，我们为什么要继续在 DOM 中查询 .tabs li 和 $(this)？别再在泳池里跳了。让我们“缓存” .tabs li 的位置。

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 }); 过滤

另一个（优化程度稍差）选项是使用过滤。

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

本例的不同之处在于，我们不是引用 $(this)，而是使用 filter() 方法将列表项的集合减少到仅单击的项.

你应该拿走什么

是的，如果您在函数中多次引用 $('.tabs) ，世界不会终结。如今 JavaScript 引擎速度非常快。如果您要测试数千次这样做的性能，执行的差异可能是几百毫秒。但问题仍然存在：你为什么要这么做？

有时，当我们使用像 jQuery 这样的大量抽象时，很容易忘记 $('.tabs') 是一个运行大量代码的实际函数。还应该注意的是，这些概念通常适用于 JavaScript，而不仅仅是 jQuery。

使用上述 caching 技术为自己编写更清晰的代码。

以上就是新标题：jQuery新手小贴士：停止在泳池中跳跃的详细内容，更多请关注知识资源分享宝库其它相关文章！