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

redmaomail 2024-07-24 21:53 阅读数 64 #wordpress

新标题：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() 方法将列表项的集合减少到仅单击的项.