jQuery- चयनित तत्वों का पुन: उपयोग करने का सबसे प्रभावी तरीका

Question

मैं सिद्धांत के आधार पर इसका सही उत्तर कल्पना कर सकता हूं, लेकिन मैं बस कुछ पुष्टि की तलाश कर रहा हूं। मैं सोच रहा हूं कि एक jQuery- चयनित तत्व का पुन: उपयोग करने का सबसे प्रभावी तरीका क्या है। उदाहरण के लिए:

$('#my_div').css('background','red'); 
//some other code 
$('#my_div').attr('name','Red Div'); 

बनाम

myDiv = $('#my_div'); 
myDiv.css('background','red'); 
//some other code 
myDiv.attr('name','Red Div'); 

मुझे लगता है कि दूसरे उदाहरण और अधिक कुशल है, क्योंकि तत्व #my_div नहीं है एक बार से अधिक पाया करने के लिए। क्या वो सही है?

इसी तरह, क्या यह पहले ($) को एक 'वेंबिल' जैसे 'ओब्जे' में सहेजने के लिए और अधिक कुशल है, और उसके बाद $ (इस) का उपयोग करने के बजाय 'obj' का पुन: उपयोग करें? इस मामले में, jQuery को बार-बार तत्व खोजने के लिए मजबूर नहीं किया जा रहा है, लेकिन इसे इसे एक jQuery ऑब्जेक्ट में परिवर्तित करने के लिए मजबूर किया जा रहा है [$ (यह)]। तो अंगूठे के सामान्य नियम के रूप में, एक jQuery ऑब्जेक्ट को हमेशा एक चर में संग्रहीत किया जाना चाहिए यदि इसे एक से अधिक बार उपयोग किया जाएगा?

Answer 1

यदि आप jQuery चयनकर्ता (like $('#element')) का उपयोग कर रहे हैं, तो हाँ, आपको हमेशा अपने परिणाम संग्रहीत करना चाहिए।

यदि आप ऑब्जेक्ट का उपयोग कर रहे हैं और इसे jQuery में लपेट रहे हैं (जैसे $(this)), यह आवश्यक नहीं है, क्योंकि jQuery को उस तत्व को दोबारा खोजने की आवश्यकता नहीं है।

Answer 2

आपको अपना कोड लिखना चाहिए ताकि आप डोम ट्रैवर्सल की संख्या सीमित कर सकें।

$('#my_div').css('background','red'); 
//some other code 
$('#my_div').attr('name','Red Div'); 

आप #my_div दो बार मिल रहे हैं, जो अक्षम है:

जब आप कुछ इस तरह लिखते हैं।

आप या तो एक चयनकर्ता का परिणाम बताए द्वारा इस सुधार कर सकते हैं (यानी var x = $('.something')) और चर x में हेरफेर, या आप श्रृंखला अपने विधि इस तरह कॉल कर सकते हैं:

$('#my_div').css('background','red').attr('name','Red Div'); 

आप देखेंगे उपरोक्त कोड बहुत उपयोग किया जाता है, क्योंकि आप एक बार तत्व ढूंढ रहे हैं। css() विधि एक सीएसएस शैली लागू करेगी और के वास्तविक परिणाम लौटाएगी, ताकि आप attr() इस मामले में एक और विधि का आह्वान कर सकें।

चयनकर्ताओं के पुन: उपयोग को संभालने का मेरा पसंदीदा तरीका उन्हें एक चर के रूप में स्टोर करना है, और मेरी सामग्री को बंद करने में लपेटना है।

Answer 3

यह एक ईवेंट हैंडलर में लौटाए गए तत्वों के लिए jQuery फ़ंक्शन को लागू करने के लिए भी है। $ (...) को कई बार लागू करने से बचने का प्रयास करें, क्योंकि यह धीमा है। इसके बजाय एक वैरिएबल बनाएं जिसमें $ (...) का परिणाम शामिल है। अच्छा अभ्यास वैरिएबल को $ के साथ शुरू करना है, जो चर के अंदर jQuery ऑब्जेक्ट के बारे में संकेत देता है।

$('a').click(function(){ 
    var $this = $(this); 
    $this.addClass("clicked"); 
    $this.attr("clicked", true); 
}); 

Answer 4

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

मैं की तरह कुछ (उदाहरण के लिए माफ़ी)

$('#myDiv') 
    .addClass('processing') 
    .find('#myInput') 
    .hide('slow') 
    .end() 
    .removeClass('processing') 
    ; 

बेहतर प्रदर्शन के लिहाज से भी

से

var $myDiv = $('#myDiv').addClass('processing'); 
var $myInput = $('#myDiv #myInput').hide('slow'); 
    $myDiv.removeClass('processing');