作为 Nettuts+ 的编辑，我可以审查提交的教程中的大量代码。尽管 jQuery 已经推出多年，但我仍然最常看到一个常见的错误。
示例#1
考虑以下代码：
1
2
3
4
5
6
7
8
9
10
11
$(.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？您应该执行我们所说的“缓存”。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(.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
让我们考虑一个稍微复杂一点的例子：选项卡。
1
2
3
4
5
6
7
8
$(.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)。在这种情况下，可以将其全部导出到外部样式表。这给我们留下了：
1
2
3
4
5
$(.tabs li).click(function() {
$(.tabs li).removeClass(active);
$(this).load(someHref, function() {} ); // example
$(this).addClass(active);
});
接下来，我们为什么要继续在 DOM 中查询 .tabs li 和 $(this)？别再在泳池里跳了。让我们“缓存” .tabs li 的位置。
1
2
3
4
5
6
7
var tabs = $(.tabs li);
tabs.click(function() {
tabs.removeClass(active);
$(this).load(someHref, function() {} ); // example
$(this).addClass(active);
});
更好了，但我们仍然调用 $(this) 两次，这没什么大不了的。但是，根据我的经验，如果不尽早将其消灭在萌芽状态，这个数字很快就会增加。
1
2
3
4
5
6
7
8
var tabs = $(.tabs li);
tabs.click(function() {
var tab = $(this);
tabs.removeClass(active);
tab.addClass(active)
.load(someHref, function() {} ); // example
});
过滤
1
2
3
4
5
6
7
8
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新手小贴士：停止在泳池中跳跃的详细内容，更多请关注php中文网其它相关文章！