新标题：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 技术为自己编写更清晰的代码。

本文来源于 网络，由本站搜集发布，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系本站核实处理。如需转载，请注明文章来源。