使用JavaScript添加删除类的最有效方法

Question

我很好奇,如果有人知道哪些更有效,我只关心Firefox作为浏览器,并不需要知道这个代码在IE等不起作用...

基本上我是根据输入字段的值显示和隐藏DOM元素,如果你愿意,我会立即搜索.如果没有显示搜索结果,我需要显示或隐藏"找不到"元素.我很好奇在修改其class属性之前检查"找不到"元素是否处于正确状态更便宜(更有效),或者只是修改class属性.

问题:我是否应该在每次运行函数时删除/添加隐藏类,即使元素的class属性没有变化？

if (shown_count > 0) {
    element.classList.add('hidden');
}
else {
    element.classList.remove('hidden');
}

或者我应该在实际更新之前检查元素是否需要更新其类属性？

if (shown_count > 0) {
    if (element.classList.contains('hidden') == false) {
         element.classList.add('hidden');
    }
}
else {
    if (element.classList.contains('hidden')) {
         element.classList.remove('hidden');
    }
}

Answer 1

我认为存在检查已经由本机代码完成,因此您无需再次检查它.

那么让我们来看看源代码(注意:classList是DOMTokenList对象)

String DOMTokenList::addToken(const AtomicString& input, const AtomicString& token)
{
    if (input.isEmpty())
        return token;

    StringBuilder builder;
    builder.append(input);
    if (input[input.length()-1] != ' ')   // <--- check happens here
        builder.append(' ');
    builder.append(token);
    return builder.toString();
}

source来自WebKit的WebCore