Jquery 添加前检查类是否已分配

在jQuery中，是否建议在添加某个类之前检查该类是否已分配给某个元素？它会有任何影响吗

例如：

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

或者这就足够了：

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

---

控制台中的一个简单检查会告诉您，使用同一个类多次调用

addClass

是安全的

具体来说，您可以找到登记处

---

只需调用

addClass（）

。jQuery将为您进行检查。如果您自己检查，您的工作量将加倍，因为jQuery仍将为您运行检查。

这个问题引起了我的注意

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

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

通过JavaScript操作DOM元素，class属性中不可能有重复的类名。如果HTML中有

class=“collapse”

，则调用

Element.classList.add（“collapse”）不会添加额外的折叠类。我不知道底层的实现，但我认为它应该足够好了

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;
        }
    };
})());

---

另外，如果由于滚动位置的变化而切换类，强烈建议您使用滚动事件处理。

我只在需要检查类是否存在时使用

.hasClass

，如果我只需要分配类，则使用

.addClass

。jQuery不复制类，只需添加类而不进行测试。如果它已经存在，则不会再添加。请重新阅读我的问题，您会注意到它不是关于Being safe，而是关于最佳实践。从您编辑的答案中，我看到jQuery实际上在添加之前检查类allready是否已分配，也就是说，亲自检查是不好的做法/thanks@Muleskinner这就是我的意思。@Raynos：控制台中的一个简单检查就会告诉您，使用同一个类多次调用addClass是安全的。尽管如此，当我在谷歌上搜索答案时，这个问题还是热门话题之一。。。即使是在其他地方被很好地记录的琐碎的东西也在堆栈溢出上占有一席之地。在这个答案中有太多的态度。本来可以机智地回答的。

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

$(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");