javascript - 使用 .classList 向已经具有该类的元素添加类是否有任何危害

Question

这个问题的答案 ( addClass to an element with that class already? ) 表明在使用 jQuery 时，如果您 .addClass('foo') 已经具有类 的元素，则不会出现问题foo.

我很好奇 .add 的 element.classList 方法也是如此。

特别是我有一个名为 update() 的函数，每当更新范围 slider 时都会调用该函数。这可能每秒发生多次。根据传递给 update() 的值，我向元素添加和删除某些类。

如果该值连续落在某个范围内，我最终会一遍又一遍地添加相同的类。

我的问题是，我能否允许 elem.classList.add('foo') 在一秒内运行 50 次而不会对用户体验、内存、处理器使用产生任何负面影响等。这是一种可接受的做法吗？

谢谢。

Answer 1

不要这样做:

if (!el.classList.contains("foo")) {
    el.classList.add("foo");
}

这样做:

el.classList.add("foo");

原因:

• .classList 属性是一个 DOMTokenList对象。
• 它表示一组 以空格分隔的标记。
• 标记(即类名)区分大小写。
• 编程中的术语“集合”指的是一个容器，该容器以未指定的顺序保存唯一的元素集合。
• 换句话说，一个集合不能包含重复项。
• 定义 DOMTokenList 的 DOM 规范将其定义为包含区分大小写、空白 trim 、唯一项的容器。
• 所有读取或修改DOMTokenList的方法(例如DOMTokenList.add())都会自动 trim 任何周围的空白并从集合中删除重复项。
• 这意味着如果您尝试 add() 相同的类名两次，它不会添加重复项。

这是一个例子:

<span class="    d   d e f"></span>

// Output: DOMTokenList(3) ["d", "e", "f", value: "    d   d e f"]
// As you can see, it only contains the unique values.
console.log(document.querySelector("span").classList);

// Try to add a duplicate value.
document.querySelector("span").classList.add("e");

// Output: DOMTokenList(3) ["d", "e", "f", value: "d e f"]  
// As you can see again, it only contains the unique values.
console.log(document.querySelector("span").classList);

// In fact, the act of duplicates being detected while trying
// to add more classes, results in the "class" attribute itself
// being cleaned up and trimmed:
// Output: "d e f"
console.log(document.querySelector("span").getAttribute("class"));

好吧，那么为什么不应该使用 .contains() 来“避免在不必要时调用 .add()”？因为:

• .contains() 函数和.add() 函数使用完全相同的 native 代码来搜索唯一集以查看它是否包含类。
• 因此，他们检测类名是否存在的技术在速度上没有差异。
• 换句话说，调用.add() 将搜索整个集合，如果它已经包含类名，则函数简单地中止。是的，它有时还会在必要时清理“class”HTML 属性，但只有在必要时才这样做。
• 另一方面，如果您在 .add() 之前调用 .contains() 并且最终添加了类名，那么您只是运行了对类名的搜索两次，通过两个不同的功能。
• 但更重要的是:通过在每次尝试添加时使用巨大的 if (!el.classList.contains("foo")) { ... } 样板，您的代码变得笨拙且不可读类。
• DOM 规范旨在满足程序员需要它的用例的现代性和高性能。这意味着，您应该使用.add() 添加一个类(即使它已经存在)，并且.remove()删除一个类(即使它已经丢失)。

不要将键盘的生命和程序员的眼睛浪费在笨重的样板文件上。仅当您真正关心确定元素是否具有特定类时才使用 .contains()。 😊

另请记住，DOMTokenList 还有许多其他有用的功能:

• 参见 https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList .
• .replace(oldToken, newToken):用新 token 替换现有 token 。如果旧 token 不存在，.replace() 会立即返回 false，而不会将新 token 添加到 token 列表中。
• .toggle(token [, force]):从列表中删除给定的标记并返回 false，或者如果标记不存在则添加它，并且函数返回 true。或者，如果您包含 force 参数:如果包含，则将切换变为单向操作。如果设置为false，那么token只会被移除，不会被添加。如果设置为true，那么token只会被添加，不会被移除。
• 这两个额外的函数可以让您实现大部分您想做的事情，而不是“如果不是 .contains() 则 .add()”或类似的代码。如果您个人需要知道 token 是否存在，您应该只使用“.contains()”。