重构jQuery代码块？答案

【问题标题】：Refactoring block of jQuery code?重构jQuery代码块？
【发布时间】：2013-10-15 14:43:24
【问题描述】：

我有一段 jQuery 代码，我必须一遍又一遍地重复，每次迭代只需要做一点小改动。这是我所拥有的示例：

  if($('.smm').hasClass('vendor-icon-active')) {
      total = total + 1200;
  } else {
    total = total;
  }

  if($('.repman').hasClass('vendor-icon-active')) {
      total = total + 495;
  } else {
    total = total;
  }

  if($('.blog-management').hasClass('vendor-icon-active')) {
      total = total + 395;
  } else {
    total = total;
  }

  if($('.press-release').hasClass('vendor-icon-active')) {
      total = total + 195;
  } else {
    total = total;
  }

在我的代码中，我有大约 30 个这样的部分。有没有办法可以简化该过程并清理我的代码？

【问题讨论】：

else 是不需要的，这会立即大大减少你的代码大小。
哦，真的吗？那么，如果我只保留 if 语句，它会起作用吗？
是的。在这种情况下，else 实际上什么都不做。
是的，因为在 else 中你只是在设置 total = total;

标签： jquery refactoring

【解决方案1】：

您可以使用通用类对元素进行分组，并使用data-* 属性来保存与它们关联的值。试试这个：

var total = 0;
$('.item').each(function(i, el) {
  var $item = $(el);
  if ($item.hasClass('vendor-icon-active')) {
    total += +$item.data('value');
  }
});
console.log(total);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="smm vendor-icon-active item" data-value="1200">Foo</div>
<div class="repman vendor-icon-active item" data-value="495">Foo</div>
<div class="blog-management vendor-icon-active item" data-value="395">Foo</div>
<div class="press-release vendor-icon-active item" data-value="195">Foo</div>

【讨论】：

哦，是的，实际上看起来很棒！旧版本的 IE 支持 data-value 吗？
你可以使用'vendor-icon-active'作为通用类，这样你就不需要if hasClass
@user715564 没问题，很高兴为您提供帮助。
@AbrahamUribe 对于我的示例来说确实如此，尽管它取决于 OPs DOM 结构。

【解决方案2】：

这应该可以解决问题...

function updateTotal(className, value) {
    if ($('.' + className).hasClass('vendor-icon-active')) {
        total += value;
    }
}

updateTotal("ssm", 1200);
updateTotal("repman", 495);
updateTotal("blog-management", 395);
updateTotal("press-release", 195);

我只是将主要功能移到了那个功能中。之后您可以根据需要添加任意数量的函数调用 :)

【讨论】：

我更喜欢@RoryMcCrossan 的回答，但这为您提供了选择和两种截然不同的风格来获得相同的结果。