在添加之前检查班级是否已经分配

在jQuery中，建议在添加该类之前检查是否已将一个类分配给元素吗？会不会有任何效果？

例如：

<label class='foo'>bar</label>

如果不确定是否baz已经label将class 分配给，这是最好的方法：

var class = 'baz';
if (!$('label').hasClass(class)) {
  $('label').addClass(class);
}

还是就足够了：

$('label').addClass('baz');

只是打电话addClass()。jQuery将为您进行检查。如果您自己进行检查，那么您的工作量就会加倍，因为jQuery 仍会为您运行检查。

在控制台中进行简单的检查将告诉您，addClass使用相同的类多次调用是安全的。

具体来说，您可以在源代码中找到支票

if ( !~setClass.indexOf( " " + classNames[ c ] + " " ) ) {
  setClass += classNames[ c ] + " ";
}

这个问题引起了我的注意，另一个问题被标记为该问题的重复。

该答案总结了接受的答案，并增加了一些细节。

您正在尝试通过避免不必要的检查来进行优化，在这方面，您必须意识到以下因素：

1. 通过JavaScript操纵DOM元素，就不可能在class属性中有重复的类名。如果您使用class="collapse"HTML，则调用Element.classList.add("collapse");不会添加其他折叠类。我不知道底层的实现，但是我想它应该足够好。
2. JQuery在其addClass和removeClass实现中进行了一些必要的检查（我检查了源代码）。对于addClass，在进行了一些检查之后，如果一个类存在，则JQuery不会尝试再次添加它。与相似removeClass，JQuery会执行某些操作，cur.replace( " " + clazz + " ", " " );仅在类存在时才会删除该类。

值得注意的是，JQuery对其removeClass实现进行了一些优化，以避免无意义的重新渲染。像这样

...
// only assign if different to avoid unneeded rendering.
finalValue = value ? jQuery.trim( cur ) : "";
if ( elem.className !== finalValue ) {
    elem.className = finalValue;
}
...

因此，您可能会进行的最佳微优化是为了避免函数调用开销和相关的实现检查。

假设您要切换一个名为的类collapse，如果您完全控制何时添加或删除collapse该类，并且如果该类最初不存在，则可以按以下方式进行优化：

$(document).on("scroll", (function () {
    // hold state with this field
    var collapsed = false;

    return function () {
        var scrollTop, shouldCollapse;

        scrollTop = $(this).scrollTop();
        shouldCollapse = scrollTop > 50;

        if (shouldCollapse && !collapsed) {
            $("nav .branding").addClass("collapse");
            collapsed = true;

            return;
        }

        if (!shouldCollapse && collapsed) {
            $("nav .branding").removeClass("collapse");
            collapsed = false;
        }
    };
})());

顺便说一句，如果由于滚动位置的变化而切换班级，强烈建议您限制滚动事件的处理。

$("label")
  .not(".foo")
  .addClass("foo");