jQuery ऑब्जेक्ट समझने का उपयोग

Question

मुझे सभी संबंधित मूलभूत बातें सीखने में बहुत अधिक समय प्राप्त किए बिना jQuery विकास में कूदना पड़ा, इसलिए एक चीज है जो मुझे थोड़ा सा फेंकता है।

केस 1::

var container = $("#containerId"); 

// Then use it as: 
container.hide(); 

केस 2:

var container = $("#containerId"); 

// Then use it as: 
$(container).hide(); 

मेरी पतली तारीख ज्ञान के लिए से

मैं दो अलग अलग तरीकों को देखने के हमारे डेवलपर्स jQuery वस्तुओं का उपयोग , एक कंटेनर को var obj = $(container) में लपेटकर, हमें एक jQuery ऑब्जेक्टमिलता हैकि हम आगे काम कर सकते हैं।

लेकिन फिर $(obj).doSomething() में उपयोग करते समय मैं अंतःक्रियात्मक डेवलपर्स को दोबारा क्यों लपेटता हूं?

संपादित करें: सवाल डुप्लीकेट के रूप में सुझाव दिया के बारे में सर्वोत्तम प्रथाओं और हालांकि समान पूछ रहा है, मेरे सवाल jQuery वस्तु रैपिंग की समझ पर विशुद्ध रूप से है।

Answer 1

दूसरा रैपिंग मुझे याद नहीं करता है। तो यदि कोई चयनकर्ता हो सकता है तो एक डोम तत्व या एक jQuery ऑब्जेक्ट हो, तो आप इसे लपेट सकते हैं और इसकी परवाह नहीं करते कि यह क्या था।

लेकिन यदि आपको पता है कि यह एक jquery वस्तु है, तो आपको रैपिंग का उपयोग नहीं करना चाहिए।

Answer 2

जब डेवलपर्स एक समारोह का विकास, एक jQuery प्लगइन में उदाहरण के लिए, कि एक पैरामीटर है कि या तो किसी DOM तत्व या एक jQuery वस्तु या एक चयनकर्ता है प्राप्त कर सकते हैं, तो वे इसका इस्तेमाल करते हैं:

function x(container) { 
    container = $(container); 
    // use container as a jquery object 
} 

// these both work: 
x("#containerId"); 
x($("#containerId")); 
x(document.getElementById("containerId")); 

Answer 3

केस 1: एक jQuery चयनकर्ता का उपयोग करना एक डोम तत्व खोजने के लिए और एक jQuery वस्तु वापस जाने के लिए:

var container = $("#containerId"); 

// Then use it as: 
container.hide(); 

केस 2: निरर्थक/गलती (या शायद यदि आप अनिश्चित हैं, तो एक चर एक है एक jQuery वस्तु lready लेकिन आप इसे होने की जरूरत है): एक jQuery चयनकर्ता का उपयोग करना एक डोम तत्व खोजने के लिए और एक jQuery वस्तु लौट तो यह एक नया jQuery वस्तु को पारित करने के लिए:

var container = $("#containerId"); 

// Then use it as: 
$(container).hide(); 

केस 3: का चयन करें एक डोम तत्व फिर एक नया jQuery वस्तु के लिए निर्माता में इसका इस्तेमाल करते हैं (जिस पर आप तो छिपाने फोन())

var container = document.getElementById("#containerId"); 

// Then use it as: 
$(container).hide(); 

Answer 4

लघु जवाब: प्रकरण 2 एक मौजूदा jQuery वस्तु है, जो अनावश्यक है से एक jQuery वस्तु बनाता है।

$ jQuery Selector function के लिए एक उपनाम है। समारोह कुछ अलग तर्क ले सकता है, जैसे ...

1. एक स्ट्रिंग: var container = $("#containerId");
2. किसी HTML तत्व: var document = $(document);
3. एक jQuery तत्व: var container = $($("#containerId"))

3 उदाहरण में, चयनकर्ता कार्य करने के लिए 2 कॉल काम करता है, लेकिन यह unnessesary।

Answer 5

Case 1 हमेशा पसंद किया जाता है। यदि संभव हो तो हमेशा jQuery ऑब्जेक्ट्स को कैश करें और पुन: उपयोग करें। यह सबसे अच्छा प्रदर्शन देगा।

Case 2 यह सुनिश्चित करने का सबसे आसान तरीका है कि आप एक jQuery ऑब्जेक्ट के साथ काम कर रहे हैं। बेहतर तरीके हैं, जिन्हें आप in this SO post देख सकते हैं। मैं इस तरह की वस्तुओं का चयन करने की सिफारिश कभी नहीं करूंगा। अगर मैं एक jQuery ऑब्जेक्ट की अपेक्षा कर रहा था, तो मैं इसके बजाय ऐसा करूंगा। उदा।

function hideContainer(container) 
{ 
    if(!(container instanceof jQuery)) 
    { 
     container = $("#containerId"); 
    } 

    container.hide(); 
} 

यह वास्तव में वस्तु फिर से चयनकर्ता स्ट्रिंग के माध्यम से (बजाय वस्तु संदर्भ का उपयोग करने का) का चयन करने के बाद से यह वस्तु गुण का उपयोग करने के चयनकर्ता निर्धारित करने के लिए नहीं है सबसे तेज़ है।

Take a look at these jsPerf test cases और आप देखेंगे कि Case 2Case 1 से धीमा है (यह मेरे मामले में 40% धीमा था, क्रोम पर)।

लेकिन फिर, मुझे लगता है कि Case 2 यह सुनिश्चित करने का सबसे आसान, तेज़ तरीका है कि आपके पास jQuery ऑब्जेक्ट है; यही कारण है कि आप इसे अक्सर देखते हैं।