वेनिला जावास्क्रिप्ट बनाम jQuery का उपयोग कब करें?

Question

मैंने सामान्य jQuery के सवालों के जवाब देने की निगरानी / प्रयास करते हुए देखा है, कि jQuery के बजाय जावास्क्रिप्ट का उपयोग करने वाले कुछ अभ्यास हैं, जो वास्तव में आपको कम लिखने में सक्षम हैं और ... अच्छी तरह से एक ही राशि। और प्रदर्शन लाभ भी दे सकते हैं।

एक विशिष्ट उदाहरण

$(this) बनाम this

क्लिक किए गए ऑब्जेक्ट आईडी के संदर्भ में एक क्लिक इवेंट के अंदर

jQuery

$(this).attr("id");

जावास्क्रिप्ट

this.id;

क्या इस तरह की कोई अन्य सामान्य प्रथाएं हैं? जहां कुछ जावास्क्रिप्ट ऑपरेशन आसान किए जा सकते हैं, मिक्स में jQuery लाए बिना। या यह एक दुर्लभ मामला है? (एक jQuery के "शॉर्टकट" वास्तव में अधिक कोड की आवश्यकता होती है)

संपादित करें: जब मैं jQuery बनाम सादे जावास्क्रिप्ट प्रदर्शन के बारे में उत्तर की सराहना करता हूं, तो मैं वास्तव में बहुत अधिक मात्रात्मक उत्तरों की तलाश कर रहा हूं। JQuery का उपयोग करते समय , उदाहरणों में जहां कोई वास्तव में उपयोग करने के बजाय सादे जावास्क्रिप्ट का उपयोग करने के लिए (पठनीयता / कॉम्पैक्टनेस) से बेहतर होगा $()। उदाहरण के अलावा मैंने अपने मूल प्रश्न में दिया।

Comments

मुझे यकीन नहीं है कि मैं सवाल समझ रहा हूँ। क्या आप लाइब्रेरी कोड का उपयोग करने के गुण के बारे में राय ढूंढ रहे थे, या क्या आप अतिरिक्त गैर-jQuery क्रॉस-ब्राउज़र संगत तकनीकों की तलाश कर रहे थे this.id?

— user113716

जवाबों से ऐसा लगता है जैसे हर कोई इस सवाल को दार्शनिक के रूप में ले रहा है, जैसा कि मैंने इसे बहुत मात्रात्मक होने का इरादा किया था, जैसा कि मैंने उल्लिखित उन उदाहरणों की एक सूची को संकलित किया है जो कि सामान्य (mal) प्रथाओं हैं।

— जोंदविज्होन

प्रासंगिक doxdesk.com/img/updates/20091116-so-large.gif

— बकरी

@chris ने meta.stackexchange.com/questions/19478/the-many-memes-of-meta/…

— MatrixFrog

Answer 1

• this.id (जैसा कि आप जानते हैं)
• this.value(केवल मुद्दों सबसे इनपुट प्रकार पर। मैं IE हैं एक जब पता <select>नहीं है valueअपने पर सेट गुण <option>तत्वों, या सफारी में रेडियो आदानों।)
• this.className संपूर्ण "क्लास" प्रॉपर्टी प्राप्त करना या सेट करना
• this.selectedIndexएक के खिलाफ <select>चयनित सूचकांक पाने के लिए
• this.optionsएक के खिलाफ <select>की एक सूची प्राप्त करने के लिए <option>तत्वों
• this.textएक के खिलाफ <option>अपनी पाठ सामग्री पाने के लिए
• this.rowsएक के खिलाफ <table>का एक संग्रह प्राप्त करने के लिए <tr>तत्वों
• this.cellsएक के खिलाफ <tr>प्राप्त करने के लिए अपनी कोशिकाओं (टीडी और वें)
• this.parentNode एक प्रत्यक्ष माता पिता पाने के लिए
• this.checkedएक धन्यवाद @ नीचे की जाँच की स्थिति प्राप्त करने के लिएcheckbox
• this.selectedधन्यवाद @Tim डाउन की चयनित स्थिति प्राप्त करने के लिएoption
• this.disabledएक धन्यवाद @ अक्षम नीचे की स्थिति प्राप्त करने के लिएinput
• this.readOnlyथैंक्स स्टेट ऑफ़ द थान पाने के लिए @Tim input डाउन करें
• this.hrefएक <a>तत्व के खिलाफ अपने पाने के लिएhref
• this.hostnameएक <a>तत्व के खिलाफ इसके डोमेन पाने के लिएhref
• this.pathnameएक <a>तत्व के खिलाफ अपनी राह पाने के लिएhref
• this.searchएक <a>तत्व के खिलाफ अपने को रोकने के लिएhref
• this.src एक तत्व के खिलाफ जहां यह मान्य है ए src

...मुझे लगता है कि आपको विचार समझ आ गया है।

ऐसा समय होगा जब प्रदर्शन महत्वपूर्ण होगा। जैसे अगर आप कई बार लूप में कुछ कर रहे हैं, तो आप jQuery को खोद सकते हैं।

सामान्य तौर पर आप प्रतिस्थापित कर सकते हैं:

$(el).attr('someName');

साथ में:

ऊपर से ख़राब शब्द दिया गया था। getAttributeएक प्रतिस्थापन नहीं है, लेकिन यह सर्वर से भेजे गए एक विशेषता के मूल्य को पुनः प्राप्त करता है, और इसके अनुरूप setAttributeइसे सेट करेगा। कुछ मामलों में आवश्यक।

नीचे दिए गए वाक्यों ने इसे कवर किया। बेहतर इलाज के लिए यह जवाब देखें ।

el.getAttribute('someName');

... एक विशेषता को सीधे एक्सेस करने के लिए। ध्यान दें कि गुण गुणों के समान नहीं हैं (हालांकि वे कभी-कभी एक दूसरे को दर्पण करते हैं)। बेशक वहाँ setAttributeभी है।

मान लें कि आपके पास एक ऐसी स्थिति है जहां एक पृष्ठ प्राप्त हुआ है, जहां आपको एक निश्चित प्रकार के सभी टैगों को खोलना होगा। यह jQuery के साथ छोटा और आसान है:

$('span').unwrap();  // unwrap all span elements

लेकिन अगर कई हैं, तो आप थोड़ा देशी डोम एपीआई करना चाहते हैं:

var spans = document.getElementsByTagName('span');

while( spans[0] ) {
    var parent = spans[0].parentNode;
    while( spans[0].firstChild ) {
        parent.insertBefore( spans[0].firstChild, spans[0]);
    }
    parent.removeChild( spans[0] );
}

यह कोड बहुत छोटा है, यह jQuery के संस्करण की तुलना में बेहतर प्रदर्शन करता है, और आसानी से आपकी व्यक्तिगत लाइब्रेरी में पुन: प्रयोज्य फ़ंक्शन में बनाया जा सकता है।

ऐसा लग सकता है कि मेरे पास बाहरी के साथ एक अनंत लूप whileहै while(spans[0]), लेकिन क्योंकि हम एक "लाइव सूची" के साथ काम कर रहे हैं, जब हम इसे अपडेट करते हैं parent.removeChild(span[0]);। यह एक सुंदर निफ्टी विशेषता है जिसे हम बदले में एक Array (या Array जैसी वस्तु) के साथ काम करने से चूक जाते हैं।

Comments

अच्छा ... इसलिए ज्यादातर यह इस कीवर्ड के चारों ओर घूमता है जो अनजाने में एक jQuery ऑब्जेक्ट में लिपटे हुए है।

— जोंदविदजोन 22

@jondavidjohn: वैसे, कुछ मामलों में कुछ फिक्स होते हैं, जैसे this.valueकि कुछ मामलों में एक युगल ब्राउज़र quirks हैं। यह सब आपकी जरूरत पर निर्भर करता है। कई अच्छी तकनीकें हैं जो jQuery के बिना आसान हैं, खासकर जब प्रदर्शन महत्वपूर्ण है। मैं और सोचने की कोशिश करूँगा।

— user113716

मैं एक उत्तर लिखने वाला था, लेकिन इसके बजाय मैं आपके लिए सुझाव जोड़ूंगा। आम तौर पर, attr()बड़े पैमाने पर इस्तेमाल किया जाता है। यदि आप केवल एक तत्व के साथ काम कर रहे हैं तो आपको शायद ही कभी आवश्यकता होगी attr()। मेरे पसंदीदा में से दो के आसपास भ्रम हैं checked(: चारों ओर है कि एक रहस्यमय मंत्र के सभी प्रकार के चेक बॉक्स की संपत्ति $(this).attr("checked", "checked"), $(this).is(":checked")आदि) और इसी तरह selectedकी संपत्ति <option>तत्वों।

— टिम नीचे

AARgh, @patrick, noooo: आपने सिफारिश की है getAttribute()। आपको लगभग कभी भी इसकी आवश्यकता नहीं है : यह IE में टूटा हुआ है, हमेशा वर्तमान स्थिति को प्रतिबिंबित नहीं करता है और यह वैसे भी नहीं है जैसा कि jQuery करता है। बस गुणों का उपयोग करें। stackoverflow.com/questions/4456231/…

— टिम डाउन

मैं इतनी देर से JS का उपयोग कर रहा था और मुझे className, thx के बारे में पता नहीं था।

— एडेप्टर

Answer 2

सही उत्तर यह है कि आप 'सादे पुराने' देशी जावास्क्रिप्ट के बजाय jQuery का उपयोग करते समय हमेशा एक प्रदर्शन जुर्माना लेंगे । ऐसा इसलिए है क्योंकि jQuery एक जावास्क्रिप्ट लाइब्रेरी है। यह जावास्क्रिप्ट के कुछ फैंसी नए संस्करण नहीं है।

JQuery के शक्तिशाली होने का कारण यह है कि यह कुछ चीजें बनाता है जो क्रॉस-ब्राउज़र स्थिति में अत्यधिक थकाऊ होते हैं (AJAX सबसे अच्छे उदाहरणों में से एक है) और उपलब्ध ब्राउज़रों के असंख्य के बीच विसंगतियों पर सहजता से और एक सुसंगत एपीआई प्रदान करता है। यह आसानी से एक साथ तत्वों के समूहों पर काम करने को सरल बनाने के लिए अवधारणाओं जैसे कि जंजीर, निहित अर्थ, आदि की सुविधा प्रदान करता है।

जावास्क्रिप्ट सीखने के लिए jQuery सीखना कोई विकल्प नहीं है। आपके पास उत्तरार्द्ध में एक मजबूत आधार होना चाहिए ताकि आप पूरी तरह से सराहना करें कि पूर्व को जानना आपके लिए आसान बना रहा है।

- टिप्पणियों को शामिल करने के लिए संपादित -

जैसा कि टिप्पणियां इंगित करने के लिए त्वरित हैं (और मैं 100% से सहमत हूं) ऊपर दिए गए बयान बेंचमार्किंग कोड को संदर्भित करते हैं। एक 'देशी' जावास्क्रिप्ट समाधान (यह मानते हुए कि यह अच्छी तरह से लिखा गया है) एक jQuery समाधान को बेहतर बनाएगा जो लगभग हर मामले में एक ही बात को पूरा करता है (मैं अन्यथा एक उदाहरण देखना पसंद करूंगा)। jQuery विकास के समय को गति प्रदान करता है, जो कि एक महत्वपूर्ण लाभ है जो मुझे नीचा दिखाने के लिए नहीं है। यह पढ़ने में आसान, आसान कोड का पालन करने की सुविधा प्रदान करता है, जो कि कुछ डेवलपर्स से अधिक है जो स्वयं बनाने में सक्षम हैं।

मेरी राय में, जवाब इस बात पर निर्भर करता है कि आप क्या हासिल करने का प्रयास कर रहे हैं। यदि, जैसा कि मैंने प्रदर्शन लाभ के आपके संदर्भ के आधार पर अनुमान लगाया है, आप अपने आवेदन से सर्वोत्तम संभव गति के बाद हैं, तो हर बार आपके द्वारा कॉल किए जाने पर jQuery का उपयोग ओवरहेड का परिचय देता है $()। यदि आप पठनीयता, स्थिरता, क्रॉस ब्राउज़र संगतता, आदि के लिए जा रहे हैं, तो निश्चित रूप से 'देशी' जावास्क्रिप्ट पर jQuery के पक्ष में कारण हैं।

Comments

मैं ऐसी स्थिति का एक उदाहरण देखना पसंद करूंगा जहां jQuery शुद्ध जेएस में कार्यान्वयन को बेहतर बना सके। कोई फर्क नहीं पड़ता कि आप क्या करते हैं, अगर आप jQuery (या उस मामले के लिए किसी अन्य पुस्तकालय) का उपयोग कर रहे हैं, तो आपके पास फ़ंक्शन ओवरहेड है जो अपरिहार्य है। कॉल करने से उत्पन्न मामूली ओवरहेड से दूर जाने का कोई तरीका नहीं है $()। यदि आप वह कॉल नहीं करते हैं, तो आप समय बचाते हैं।

— gddc 22

एक खराब लिखित होममेड समाधान शायद धीमा होगा। JQuery की टीम ने पैकेज में कुछ अत्यधिक कुशल जावास्क्रिप्ट को निष्पादित किया है। देखिए @ फ्रीलांसर का जवाब।

— स्टीफन

एक खराब लिखित समाधान हमेशा एक खराब लिखित समाधान होगा, और यह भाषा की गलती नहीं है। यह इस तथ्य को नहीं बदलता है कि पुस्तकालय ओवरहेड को उकसाएगा कि एक 'देशी' फ़ंक्शन से बच सकता है अगर अच्छी तरह से सोचा जाए।

— gdc

@gddc मुझे सबसे अच्छा उदाहरण लगता है जहां jQuery "आउटपरफॉर्म" (बेंचमार्क बॉक्स के बाहर पढ़ा गया) शुद्ध जेएस देव समय काटने में है (यह एक बड़े पैमाने पर व्यापार-वार है) और प्रयोग को आसान बनाने में

— बेन

आपने जो कुछ भी लिखा है, वह सब सच है, लेकिन आपने ऊपर @ नोटों को छोड़ दिया है। jQuery डेवलपर को तेज और अधिक मजबूत बनाता है । इस किलक्लास () कार्यान्वयन को देखें जो मैंने कई साल पहले लिखा था और इसका भारी उपयोग किया था। आपको पता है कि? यह कुछ बढ़त के मामलों के लिए टूट गया है । खराब कोड खराब कोड है, और गलत कोड गलत कोड है, लेकिन अक्सर jQuery का उपयोग करने से डेवलपर बेहतर और अधिक सही कोड लिखता है। अधिकांश समय, कंप्यूटर काफी तेज होते हैं; यह डेवलपर्स की मदद की जरूरत है।

— १३:

Answer 3

वहाँ एक रूपरेखा कहा जाता है ... ओह क्या लगता है? Vanilla JS। आशा है कि आपको मज़ाक लगेगा ...: D यह प्रदर्शन के लिए कोड की योग्यता का बलिदान करता है ... इसे jQuerybellow की तुलना करके आप देख सकते हैं कि किसी DOMतत्व को पुनः प्राप्त IDकरना लगभग 35X तेज़ है। :)

इसलिए यदि आप प्रदर्शन चाहते हैं तो आप बेहतर तरीके से वेनिला जेएस की कोशिश करेंगे और अपने निष्कर्ष निकालेंगे। हो सकता है कि आपको ब्राउज़र के GUI को लटकाने वाले जावास्क्रिप्ट का अनुभव नहीं होगा / forलूप के अंदर जैसे गहन कोड के दौरान UI थ्रेड को लॉक करना ।

वेनिला जेएस अविश्वसनीय, शक्तिशाली जावास्क्रिप्ट अनुप्रयोगों के निर्माण के लिए एक तेज, हल्का, क्रॉस-प्लेटफॉर्म ढांचा है।

उनके होमपेज पर कुछ पूर्ण तुलनाएँ हैं:

Comments

@ लिनेल मैकाफी ओह मैन मुझे यह जवाब पसंद आया! मुझे महसूस नहीं हुआ कि वेनिला और अन्य फ्रेमवर्क के बीच का प्रदर्शन इतना अंतर ला सकता है! वैसे भी इस जवाब के लिए प्रसिद्धि के हॉल !! पुनश्च: क्या आपने भी वेबसाइट बनाई है?

— स्टीव

Answer 4

पहले से ही एक स्वीकृत उत्तर है, लेकिन मेरा मानना ​​है कि यहां टाइप किए गए कोई उत्तर सीधे तौर पर देशी जावास्क्रिप्ट विधियों / विशेषताओं की अपनी सूची में व्यापक नहीं हो सकते हैं, जिन्होंने व्यावहारिक रूप से क्रॉस-ब्राउज़र समर्थन की गारंटी दी है। इसके लिए मैं आपको quirksmode पर पुनर्निर्देशित कर सकता हूं:

http://www.quirksmode.org/compatibility.html

यह शायद सबसे व्यापक सूची है कि कहीं भी क्या ब्राउज़र काम करता है और क्या काम नहीं करता है। DOM सेक्शन पर विशेष ध्यान दें। यह पढ़ने के लिए बहुत कुछ है लेकिन बिंदु यह सब पढ़ने के लिए नहीं है, बल्कि इसे संदर्भ के रूप में उपयोग करने के लिए है।

जब मैंने गंभीरता से वेब ऐप लिखना शुरू किया, तो मैंने सभी डोम टेबल को प्रिंट किया और उन्हें दीवार पर लटका दिया ताकि मुझे एक नज़र में पता चल जाए कि क्या उपयोग करना सुरक्षित है और हैक की क्या आवश्यकता है। इन दिनों मुझे कुछ quirksmode parentNode compatibilityशक होने पर मैंने सिर्फ गूगल किया।

कुछ और की तरह, निर्णय ज्यादातर अनुभव का विषय है। मैं वास्तव में आपको पूरी साइट पढ़ने और jQuery का उपयोग करने के लिए और सादे जेएस का उपयोग करने के लिए सभी मुद्दों को याद करने की सलाह नहीं दूंगा। बस सूची के बारे में पता होना चाहिए। यह खोज करने के लिए काफी आसान है। समय के साथ आप एक वृत्ति विकसित करेंगे जब सादा जेएस बेहतर होगा।

---

PS: PPK (साइट के लेखक) की एक बहुत अच्छी पुस्तक है जिसे मैं पढ़ने की सलाह देता हूं

Answer 5

कब:

1. आप जानते हैं कि आप जो कर रहे हैं उसके लिए क्रॉस-ब्राउज़र समर्थन नहीं है
2. यह टाइप करने के लिए काफी अधिक कोड नहीं है, और
3. यह काफी कम पठनीय नहीं है, और
4. आपको उचित विश्वास है कि jQuery बेहतर प्रदर्शन प्राप्त करने के लिए ब्राउज़र के आधार पर अलग-अलग कार्यान्वयन का चयन नहीं करेगा, फिर:

जावास्क्रिप्ट का उपयोग करें। अन्यथा jQuery का उपयोग करें (यदि आप कर सकते हैं)।

संपादित करें : यह उत्तर लागू होता है जब jQuery का उपयोग करने के लिए दोनों समग्र रूप से इसे छोड़ देते हैं, साथ ही यह चुनते हैं कि क्या jQuery के अंदर वेनिला JS का उपयोग करना है या नहीं। जेएसई के पक्ष में attr('id')और बीच में .idजीन्स चुनना , जबकि jQuery के पक्ष में removeClass('foo')बनाम .className = .className.replace( new Regexp("(?:^|\\s+)"+foo+"(?:\\s+|$)",'g'), '' )लाइन्स के बीच चयन करना ।

Comments

मुझे लगता है कि ओपी jQuery का उपयोग करने का इरादा रखता है, लेकिन आश्चर्य है कि अपने jQuery के तरीकों के अंदर देशी जावास्क्रिप्ट का उपयोग कहां और कब करना है।

— स्टीफन

.classList.remove('foo')नए ब्राउज़रों में ठीक काम करने लगता है

— Tyilo

@Tyilo classList.remove HTML5 ClassList API का एक हिस्सा है जिसे IE9 में लागू नहीं किया गया है उदाहरण के लिए caniuse.com/#feat=classlist

— corbacho

Answer 6

दूसरों के उत्तरों ने "jQuery बनाम सादे JS" के व्यापक प्रश्न पर ध्यान केंद्रित किया है। अपने ओपी को देखते हुए, मुझे लगता है कि जब आप पहले से ही jQuery का उपयोग करने के लिए चुना है, तो आप वेनिला JS का उपयोग करना बेहतर समझते हैं। आपका उदाहरण एक आदर्श उदाहरण है जब आपको वेनिला जेएस का उपयोग करना चाहिए:

$(this).attr('id');

क्या दोनों धीमे (मेरी राय में) से कम पठनीय है:

this.id।

यह धीमा है क्योंकि आपको एक नया JS ऑब्जेक्ट को केवल jQuery के तरीके को पुनः प्राप्त करने के लिए स्पिन करना है। अब, यदि आप $(this)अन्य ऑपरेशन करने के लिए उपयोग करने जा रहे हैं , तो हर तरह से, उस jQuery ऑब्जेक्ट को एक चर में संग्रहीत करें और उसी के साथ काम करें। हालाँकि, मैंने कई स्थितियों में भाग लिया है जहाँ मुझे केवल तत्व (जैसे idया src) से एक विशेषता की आवश्यकता है ।

क्या इस तरह की कोई अन्य सामान्य प्रथाएं हैं? जहां कुछ जावास्क्रिप्ट ऑपरेशन आसान किए जा सकते हैं, मिक्स में jQuery लाए बिना। या यह एक दुर्लभ मामला है? (एक jQuery के "शॉर्टकट" वास्तव में अधिक कोड की आवश्यकता होती है)

मुझे लगता है कि सबसे आम मामला वह है जिसे आप अपनी पोस्ट में वर्णित करते हैं; $(this)एक jQuery वस्तु में लपेटने वाले लोग अनावश्यक रूप से। मैं इसे सबसे अधिक बार ( idऔर valueउपयोग करने के बजाय $(this).val()) देखता हूं ।

संपादित करें: यहाँ एक लेख है जो बताता है किattr() मामले में jQuery का उपयोग क्यों धीमा है। स्वीकारोक्ति: इसे विकी टैग से चुरा लिया है, लेकिन मुझे लगता है कि यह सवाल का उल्लेख करने योग्य है।

फिर से संपादित करें: सीधे पहुंच वाले गुणों की पठनीयता / प्रदर्शन निहितार्थ को देखते हुए, मैं कहूंगा कि अंगूठे का एक अच्छा नियम संभवत: उपयोग करने का प्रयास करना this.<attributename>है। संभवत: कुछ उदाहरण हैं जहां यह ब्राउज़र की विसंगतियों के कारण काम नहीं करेगा, लेकिन यह संभव है कि यह पहली बार कोशिश करें और काम न करने पर वापस jQuery पर गिर जाए।

Comments

हा, सवाल पढ़ने के लिए धन्यवाद;) ... तो यह अधिक व्यापक रूप से अपवाद है?

— jondavidjohn

@ जोंदविदजोन: ईमानदारी से, मुझे वह कॉल करने में संकोच हो रहा है। मुझे लगता है कि हाँ, यह आमतौर पर क्रॉस-ब्राउज़र चिंताओं के कारण jQuery का उपयोग करने के लिए आपके लाभ के लिए है। अन्य उदाहरण हैं, जैसे this.style.display = 'none'। क्या इससे बेहतर है $(this).hide()? मेरा तर्क है कि उत्तरार्द्ध अधिक पठनीय है, लेकिन पूर्व में तेजी से होने की संभावना है। यह देखने के लिए कुछ प्रयोग करने के लिए अपने आप को चोट नहीं पहुंचती है कि क्या कुछ क्रियाएं jQuery के बिना ब्राउज़र में काम करेंगी - यह आमतौर पर एक ऑपरेशन को करने के लिए jQuery ऑब्जेक्ट में एक तत्व लपेटने से पहले मैं क्या करता हूं।

— एंड्रयू व्हाइटेकर

Answer 7

यदि आप ज्यादातर प्रदर्शन के बारे में चिंतित हैं, तो आपका मुख्य उदाहरण सिर पर कील मारता है। अनावश्यक रूप से या अनावश्यक रूप से jQuery को शामिल करना, IMHO, धीमा प्रदर्शन का दूसरा मुख्य कारण (पहले खराब डोम ट्रैवर्स) है।

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

// poor
$(this).animate({'opacity':'0'}, function() { $(this).remove(); });

// excellent
var element = $(this);
element.animate({'opacity':'0'}, function() { element.remove(); });

// poor
$('.something').load('url');
$('.something').show();

// excellent
var something = $('#container').children('p.something');
something.load('url').show();

Comments

दिलचस्प ... क्या var तत्कालिकरण और कार्रवाई के इस पृथक्करण से वास्तव में प्रसंस्करण प्रदर्शन लाभ होता है? या बस कार्रवाई को अपने दम पर निष्पादित करने की अनुमति देता है (यह मुझे लगता है कि कम से कम कर दिया गया है ...)

— jondavidjohn

यह निश्चित रूप से प्रदर्शन लाभ की ओर जाता है, लेकिन केवल तभी जब आप चयनित तत्व का फिर से उपयोग करें। इसलिए, आखिरी मामले में var something, मुझे वास्तव में jQuery ऑब्जेक्ट को कैश करने की आवश्यकता नहीं थी (क्योंकि मैंने चाइनिंग का उपयोग किया था), लेकिन मैं इसे वैसे भी आदत से बाहर करता हूं।

— स्टीफन

दूसरी ओर, वही उदाहरण लें। $('.something')दो बार कॉल करने का मतलब है कि jQuery को दो बार DOM को पार करना होगा उस चयनकर्ता के साथ सभी तत्वों की तलाश ।

— स्टीफन

पहले उदाहरण के मामले में, कैशिंग $(this)jQuery फ़ंक्शन को कॉल कम करता है। यह आपको लूप परिदृश्य में सबसे अधिक लाभ देगा।

— स्टीफन

@ अलनीतक नोटिस जो elementबराबर है $(this)। जिसमें कई तत्व शामिल नहीं हैं।

— स्टीफन

Answer 8

मैंने पाया है कि निश्चित रूप से JS और JQ के बीच ओवरलैप है। आपके द्वारा दिखाया गया कोड इसका एक अच्छा उदाहरण है। स्पष्ट रूप से, जेएस के ऊपर जेक्यू का उपयोग करने का सबसे अच्छा कारण केवल ब्राउज़र संगतता है। मैं हमेशा JQ की ओर झुकता हूं, भले ही मैं JS में कुछ हासिल कर सकूं।

Comments

यह आश्चर्य होगा कि कोई ओवरलैप नहीं था, क्योंकि JQuery जावास्क्रिप्ट है।

— सिमोन १

Answer 9

यह मेरा व्यक्तिगत विचार है, लेकिन जैसा कि jQuery जावास्क्रिप्ट है वैसे भी, मुझे लगता है कि सैद्धांतिक रूप से यह वेनिला जेएस से बेहतर प्रदर्शन नहीं कर सकता है।

लेकिन व्यावहारिक रूप से यह हाथ से लिखे जेएस से बेहतर प्रदर्शन कर सकता है, क्योंकि किसी के हाथ से लिखा कोड jQuery के रूप में कुशल नहीं हो सकता है।

बॉटम-लाइन - छोटे सामान के लिए मैं वेनिला जेएस का उपयोग करता हूं, जेएस की गहन परियोजनाओं के लिए मुझे jQuery का उपयोग करना पसंद है और पहिया को फिर से मजबूत नहीं करना है - यह अधिक उत्पादक है।

Comments

ऐसे बहुत से उदाहरण हैं जहां पुस्तकालयों ने वेनिला जेएस से बेहतर प्रदर्शन किया है। जेएस के कई अंतर्निहित प्रोटोटाइप तरीके बुरी तरह से लिखे गए हैं, यह पता चला है।

— उदाहरण

Answer 10

thisDOM तत्व के रूप में पहले उत्तर की लाइव प्रॉपर्टीज़ की सूची काफी पूर्ण है।

आपको कुछ अन्य लोगों को जानना भी दिलचस्प लग सकता है।

जब यह दस्तावेज है:

• this.formsHTMLCollectionवर्तमान दस्तावेज़ प्रपत्र प्राप्त करने के लिए ,
• this.anchorsसेट होने HTMLCollectionके HTMLAnchorElementsसाथ सभी का एक पाने के लिए name,
• this.linksसेट होने के साथ HTMLCollectionसभी में से एक पाने के लिए ,HTMLAnchorElementhref
• this.imagesएक पाने के लिए HTMLCollectionसभी की HTMLImageElementरों
• और के रूप में पदावनत एप्लेट के साथ भी ऐसा ही है this.applets

जब आप साथ काम करते हैं document.forms, document.forms[formNameOrId]तो तथाकथित या पहचाना हुआ रूप प्राप्त करता है।

जब यह एक रूप है:

• this[inputNameOrId] तथाकथित या पहचान वाले क्षेत्र को पाने के लिए

जब यह प्रपत्र फ़ील्ड है:

• this.type फ़ील्ड प्रकार प्राप्त करने के लिए

JQuery के चयनकर्ताओं को सीखते समय, हम अक्सर पहले से मौजूद HTML तत्वों के गुणों को सीखना छोड़ देते हैं, जो पहुंच के लिए बहुत तेज़ हैं।

Comments

आपके द्वारा बताए गए गुण DOM स्तर 2 HTML विनिर्देश में परिभाषित हैं , और व्यापक रूप से समर्थित हैं। document.embedsऔर document.pluginsव्यापक रूप से समर्थित (DOM 0) हैं। एचटीएमएल 5 विनिर्देशdocument.scripts में परिभाषित एक सुविधाजनक संग्रह भी है , और व्यापक रूप से समर्थित (और फ़ायरफ़ॉक्स 9+ )।

— रोब डब्ल्यू

@Robw तो सूची अब पूरी हो सकती है, और निश्चित रूप से उपयोगी और तेज है। धन्यवाद;)

— lib3d

Answer 11

हमेशा की तरह मैं इस पार्टी में देरी से आ रहा हूं।

यह अतिरिक्त कार्यक्षमता नहीं थी जिसने मुझे jQuery का उपयोग करने का निर्णय लिया, जैसा कि आकर्षक था। आखिरकार कुछ भी आपके अपने कार्यों को लिखने से रोकता है।

यह तथ्य था कि मेमोरी लीक से बचने के लिए डोम को संशोधित करते समय सीखने के लिए बहुत सारी तरकीबें थीं (मैं आपके बारे में बात कर रहा हूं IE)। एक केंद्रीय संसाधन के लिए जो मेरे लिए उन सभी प्रकार के मुद्दों को प्रबंधित करता है, जो उन लोगों द्वारा लिखे गए हैं जो एक पूरी तरह से बेहतर जेएस कोडर थे जो मैं कभी भी हो सकता हूं, जिसे लगातार समीक्षा की जा रही थी, संशोधित किया गया था और परीक्षण किया गया था।

मुझे लगता है कि क्रॉस ब्राउज़र समर्थन / अमूर्त तर्क के तहत इस तरह की गिरावट आती है।

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

बेशक अगर आपका ब्राउज़र jQuery द्वारा समर्थित नहीं है या आप कम अंत वातावरण (पुराने फोन?) का समर्थन कर रहे हैं, तो एक बड़ी .js फ़ाइल एक समस्या हो सकती है। याद रखें जब jQuery छोटे हुआ करते थे?

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

यह कहा कि मैं वर्तमान में पहुंच के मुद्दों पर विचार कर रहा हूं और जाहिरा तौर पर .innerHTML उसके साथ नहीं के बराबर है। jQuery निश्चित रूप से .innerHTML पर निर्भर करता है, इसलिए अब मैं एक ऐसे ढांचे की तलाश कर रहा हूं, जो कुछ थकाऊ तरीकों पर निर्भर करेगा, जिनकी अनुमति है। और मैं कल्पना कर सकता हूं कि इस तरह की रूपरेखा jQuery की तुलना में धीमी गति से चलेगी, लेकिन जब तक यह काफी अच्छा प्रदर्शन करती है, मैं खुश रहूंगा।

Answer 12

यहां एक गैर-तकनीकी उत्तर दिया गया है - कई नौकरियां कुछ पुस्तकालयों, जैसे कि jQuery की अनुमति नहीं दे सकती हैं।

वास्तव में, वास्तव में, Google अपने किसी भी कोड में jQuery की अनुमति नहीं देता है (न ही प्रतिक्रिया, क्योंकि यह फेसबुक के स्वामित्व में है), जिसे आप साक्षात्कारकर्ता के कहने तक नहीं जानते होंगे "क्षमा करें, लेकिन आप jQuery का उपयोग नहीं कर सकते, यह चालू नहीं है XYZ कॉर्पोरेशन में अनुमोदित सूची "। वेनिला जावास्क्रिप्ट हर जगह, हर समय पूरी तरह से काम करती है, और यह समस्या आपको कभी नहीं देगी। यदि आप एक पुस्तकालय पर भरोसा करते हैं, तो आपको गति और आसानी मिलती है, लेकिन आप सार्वभौमिकता खो देते हैं।

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

Answer 13

$(this) के लिए अलग है this :

उपयोग करके $(this)आप सुनिश्चित कर रहे हैं कि jQuery का प्रोटोटाइप ऑब्जेक्ट पर पास किया जा रहा है।