Перевірте, чи вже призначений клас перед додаванням

У jQuery рекомендується перевірити, чи клас вже призначений елементу перед тим, як додати цей клас? Чи матиме це взагалі якийсь ефект?

Наприклад:

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

Якщо ви сумніваєтесь у тому, що клас bazвже призначений label, чи це найкращий підхід:

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. неможливо мати дублікати імен класу в атрибуті класу за допомогою маніпулювання елементом DOM через JavaScript. Якщо у вас є 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");