ตรวจสอบว่าได้กำหนดชั้นเรียนแล้วหรือไม่ก่อนเพิ่ม

ใน 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 จะไม่พยายามเพิ่มอีกครั้ง ในทำนองเดียวกันremoveClassJQuery จะทำบางอย่างตามบรรทัด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");