क्या $ (यह) डोम से पूछता है?

Question

मैं सोच रहा था कि jQuery फ़ंक्शन में इसे पास करने से वास्तव में इसे इसके लिए DOM में खोजना पड़ता है। प्रश्न का एक विशिष्ट संदर्भ है।

मान लें कि मेरे पास है:

$('#foo').click(function(){ 
    var id = $(this).attr('id'); 
    var someVal = $(this).data('someVal'); 
} 

jQuery डोम अपने कार्यों प्रदान करने के लिए क्वेरी या सभी जानकारी पढ़ सकते हैं और जावास्क्रिप्ट से लिया इस पर आपत्ति कर रहे हैं होगा?

और वहाँ के लिए एक प्रदर्शन अंतर है:

$('#foo').click(function(){ 
    var elem = $(this); 
    var id = elem.attr('id'); 
    var someVal = elem.data('someVal'); 
} 

Answer 1

यह इस उदाहरण में डोम क्वेरी नहीं है। $() एक jQuery wrapper ऑब्जेक्ट के साथ this (या इसके अंदर जो कुछ भी है) लपेटता है।

यह कैशिंग द्वारा:

var $this = $(this); 
// you will see code have a $ before or after a variable ($this, this$, etc) 
// signifying it is a jQuery wrapped object 

आप केवल एक बार jQuery के साथ लपेटकर के प्रदर्शन की बचत की है। इसे jQuery के अंदर जाने और इसे बार-बार लपेटने के विरोध में। यह कैश करने के लिए अच्छा कोडिंग अभ्यास है।

टिप्पणी: बेशक अगर आप $('#whatever') है जब से तुम इसे पुनः प्राप्त करने के लिए एक चयनकर्ता प्रदान की है यह, डोम क्वेरी करने दिया जाएगा, तो यह jQuery के साथ घूमती है। तो यदि आप इसे फिर से उपयोग कर रहे हैं तो इसे बचाने के लिए भी समझदारी होती है! var $whatever = $('#whatever');

Answer 2

यदि आपके पास this में कोई DOM तत्व है, तो $(this) DOM से पूछताछ नहीं करता है। यह सिर्फ एक डीओएम तत्व के चारों ओर एक jQuery wrapper ऑब्जेक्ट रखता है।

यह एक महंगा ऑपरेशन नहीं है, लेकिन आप इसे अनावश्यक रूप से करने से बचना चाहते हैं। उदाहरण के लिए, आप कभी-कभी इस तरह के कोड देखते हैं:

$("some_selector_here").mousemove(function() { 
    if ($(this).hasClass('foo')) { 
     $(this).doSomething(); 
    } 
    else { 
     $(this).doSomethingElse(); 
    } 
}); 

इसके लिए कोई कारण नहीं है। इसके बजाय:

$("some_selector_here").mousemove(function() { 
    var $this = $(this); 
    if ($this.hasClass('foo')) { 
     $this.doSomething(); 
    } 
    else { 
     $this.doSomethingElse(); 
    } 
}); 

यह लगभग निश्चित रूप में कोई प्रभाव नहीं पड़ेगा, कहते हैं, एक click हैंडलर, हालांकि मैं अभी भी कह सकते हैं कि यह खराब फार्म है। लेकिन उन चीजों में जिन्हें mousemove की तरह बहुत कुछ कहा जाता है, ठीक है, अनावश्यक फ़ंक्शन कॉल और मेमोरी आवंटन से बचें। :-)