जाँच करें कि क्या वर्ग जोड़ने से पहले ही सौंपा गया है

Question

JQuery में, क्या यह जाँचने की सिफारिश की जाती है कि क्या उस वर्ग को जोड़ने से पहले एक वर्ग को पहले ही किसी तत्व को सौंपा गया है? क्या इसका भी कोई असर होगा?

उदाहरण के लिए:

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

जब संदेह में अगर कक्षा bazपहले से ही सौंपी गई है label, तो क्या यह सबसे अच्छा तरीका होगा:

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

या यह पर्याप्त होगा:

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

Comments

मैं .hasClassकेवल तभी उपयोग करता हूं जब मुझे जांचने की आवश्यकता होती है कि क्या कक्षा मौजूद है, अगर मुझे केवल कक्षा असाइन करने की आवश्यकता है - मैं उपयोग करता हूं .addClass। jQuery डुप्लिकेट नहीं करता है कक्षाएं

— Samich

बस परीक्षण के बिना वर्ग जोड़ें। यदि यह पहले से मौजूद है, तो इसे फिर से नहीं जोड़ा जाएगा।

— ब्लेज़ेमॉन्गर

Answer 1

बस बुलाओ addClass()। jQuery आपके लिए जाँच करेगा। यदि आप अपने दम पर जांच करते हैं, तो आप काम को दोगुना कर रहे हैं, क्योंकि jQuery अभी भी आपके लिए चेक चलाएगा।

Answer 2

कंसोल में एक साधारण चेक ने आपको बताया होगा कि addClassएक ही कक्षा के साथ कई बार कॉल करना सुरक्षित है।

विशेष रूप से आप स्रोत में जांच पा सकते हैं

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

Comments

कृपया मेरे प्रश्न को फिर से पढ़ें और आप देखेंगे कि इसके सुरक्षित होने के बारे में नहीं, बल्कि सर्वोत्तम अभ्यास के बारे में है

— म्यूलकिनर

आपके संपादित उत्तर से मुझे लगता है कि jQuery वास्तव में जाँच करता है कि क्या वर्ग को जोड़ने से पहले ही असाइन किया गया है, अर्थात यह जाँच स्वयं करने के लिए बुरा अभ्यास होगा / धन्यवाद

— Muleskinner

@Muleskinner कि मैं क्या लगा रहा था।

— 15

@ रेयानोस: कंसोल में एक साधारण चेक ने आपको बताया होगा कि एक ही क्लास के साथ कई बार एडक्लास कॉल करना सुरक्षित है। फिर भी, यह सवाल शीर्ष हिटों में से एक था जब मैंने एक जवाब के लिए गुगलेड किया ... यहां तक ​​कि तुच्छ सामान जो अच्छी तरह से कहीं और प्रलेखित किया गया है, जिसमें स्टैक ओवरफ्लो पर एक जगह है।

— इरिरलार

इस उत्तर में बहुत अधिक दृष्टिकोण है। इसका जवाब कुछ चातुर्य से दे सकते थे।

— dreadwail

Answer 3

इस प्रश्न पर मेरा ध्यान एक और के बाद गया, जिसे इस एक के डुप्लिकेट के रूप में चिह्नित किया गया था ।

यह उत्तर थोड़े अतिरिक्त विवरण के साथ स्वीकृत उत्तर को सारांशित करता है।

आप एक अनावश्यक जाँच से बचकर अनुकूलन करने का प्रयास कर रहे हैं, इस संबंध में यहाँ वे कारक हैं जिनके बारे में आपको अवश्य पता होना चाहिए:

1. जावास्क्रिप्ट के माध्यम से एक डोम तत्व में हेरफेर करने के माध्यम से वर्ग विशेषता में डुप्लिकेट वर्ग के नाम रखना संभव नहीं है। यदि class="collapse"आपके HTML में है, तो कॉलिंग Element.classList.add("collapse");एक अतिरिक्त पतन वर्ग नहीं जोड़ेगी । मुझे अंतर्निहित कार्यान्वयन का पता नहीं है, लेकिन मुझे लगता है कि यह काफी अच्छा होना चाहिए।
2. JQuery इसके addClassऔर removeClassकार्यान्वयन में कुछ आवश्यक जाँच करता है (मैंने स्रोत कोड की जाँच की )। के लिए addClass, कुछ जांच कर रही है और अगर एक वर्ग मौजूद है JQuery इसे फिर से जोड़ने की कोशिश नहीं कर रहा है के बाद। इसी तरह removeClass, JQuery लाइन के साथ सोमेथिंग करता है, cur.replace( " " + clazz + " ", " " );जो किसी वर्ग को तभी निकालता है जब वह मौजूद होता है।

removeClassव्यर्थ ध्यान देने योग्य, J व्यर्थ के पुन: प्रतिपादन से बचने के लिए इसके कार्यान्वयन में कुछ अनुकूलन करता है । यह इस प्रकार चलता है

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

एक तरफ के रूप में, यदि आप स्क्रॉल स्थिति में परिवर्तन के कारण एक क्लास टॉगल कर रहे हैं, तो आपको स्क्रॉल इवेंट हैंडलिंग को थ्रॉटल करने की अत्यधिक अनुशंसा की जाती है ।

Answer 4

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