在添加之前检查类是否已分配

Question

在jQuery中,是否建议在添加该类之前检查是否已将类分配给元素？它甚至会产生任何影响吗？

例如:

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

如果对类baz已经被分配有疑问label,这将是最好的方法:

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

或者这就足够了:

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

Answer 1

打电话吧addClass().jQuery会为你做检查.如果您自己检查,那么您的工作量会增加一倍,因为jQuery 仍会为您运行检查.

Answer 2

在控制台中进行简单的检查会告诉您,addClass使用同一个类多次调用是安全的.

具体来说,您可以在源中找到支票

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

Answer 3

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

这个答案总结了已接受的答案，并添加了一些细节。

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

1. 通过 JavaScript 操作 DOM 元素，类属性中不可能出现重复的类名。如果您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;
        }
    };
})());

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