Periksa apakah kelas sudah ditetapkan sebelum menambahkan

Di jQuery, apakah disarankan untuk memeriksa apakah sebuah kelas sudah ditetapkan ke sebuah elemen sebelum menambahkan kelas itu? Apakah itu akan berpengaruh sama sekali?

Sebagai contoh:

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

Jika ragu apakah kelas baztelah ditugaskan label, apakah ini pendekatan terbaik:

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

atau apakah ini cukup:

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

Telepon saja addClass(). jQuery akan melakukan pemeriksaan untuk Anda. Jika Anda memeriksanya sendiri, Anda menggandakan pekerjaan, karena jQuery masih akan menjalankan pemeriksaan untuk Anda.

Pemeriksaan sederhana di konsol akan memberi tahu Anda bahwa melakukan panggilan addClassbeberapa kali dengan kelas yang sama aman.

Secara khusus Anda dapat menemukan cek di sumbernya

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

Pertanyaan ini menarik perhatian saya menyusul pertanyaan lain yang ditandai sebagai duplikat dari pertanyaan ini .

Jawaban ini merangkum jawaban yang diterima dengan sedikit detail tambahan.

Anda mencoba untuk mengoptimalkan dengan menghindari pemeriksaan yang tidak perlu, dalam hal ini berikut adalah faktor-faktor yang harus Anda waspadai:

1. tidak mungkin memiliki nama kelas duplikat dalam atribut kelas dengan cara memanipulasi elemen DOM melalui JavaScript. Jika Anda memiliki class="collapse"HTML, memanggil Element.classList.add("collapse");tidak akan menambahkan kelas penciutan tambahan . Saya tidak tahu implementasi yang mendasarinya, tapi saya kira itu sudah cukup baik.
2. JQuery membuat beberapa pemeriksaan yang diperlukan dalam nya addClassdan removeClassimplementasi (aku memeriksa kode sumber ). Sebab addClass, setelah melakukan beberapa pemeriksaan dan jika ada kelas, JQuery tidak mencoba menambahkannya lagi. Demikian pula untuk removeClass, JQuery melakukan sesuatu di sepanjang baris cur.replace( " " + clazz + " ", " " );yang akan menghapus kelas hanya jika ada.

Perlu diperhatikan, JQuery melakukan beberapa pengoptimalan dalam removeClassimplementasinya untuk menghindari rendering ulang yang tidak berguna. Ini berjalan seperti ini

...
// only assign if different to avoid unneeded rendering.
finalValue = value ? jQuery.trim( cur ) : "";
if ( elem.className !== finalValue ) {
    elem.className = finalValue;
}
...

Jadi, pengoptimalan mikro terbaik yang dapat Anda lakukan adalah dengan tujuan menghindari overhead panggilan fungsi dan pemeriksaan implementasi terkait.

Katakanlah Anda ingin mengubah nama kelas collapse, jika Anda benar-benar mengontrol kapan kelas ditambahkan atau dihapus, dan jika collapsekelas tersebut awalnya tidak ada, Anda dapat mengoptimalkan sebagai berikut:

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

Selain itu, jika Anda mengubah kelas karena perubahan posisi gulir, Anda sangat disarankan untuk membatasi penanganan acara gulir.

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