[बंद] से बचने के लिए jQuery के नुकसान

Question

मैं jQuery के साथ एक परियोजना शुरू कर रहा हूं।

आपके jQuery प्रोजेक्ट में क्या नुकसान / गलतियाँ / गलतफहमी / गालियाँ / गलतियाँ थीं?

Comments

इसे "रचनात्मक नहीं" होने के लिए बंद नहीं किया जाना चाहिए था । कुछ बहुत ही उपयोगी जवाबों पर अमल किया गया है और इस प्रश्न को अब 220 बार तारांकित किया गया है। यदि आपके पास पर्याप्त कर्म हैं, तो कृपया फिर से मतदान करें।

— रॉय प्रिन्स

मुझे लगता है, jQuery अपने आप में एक

— नुकसान

Answer 1

प्रदर्शन से अनजान होने के नाते और स्थानीय चरों को उन्हें सौंपने के बजाय चयनकर्ताओं पर अधिक प्रभाव डाला। उदाहरण के लिए:-

$('#button').click(function() {
    $('#label').method();
    $('#label').method2();
    $('#label').css('background-color', 'red');
});

बजाय:-

$('#button').click(function() {
    var $label = $('#label');
    $label.method();
    $label.method2();
    $label.css('background-color', 'red');
});

या जंजीर से भी बेहतर : -

$('#button').click(function() {
    $("#label").method().method2().css("background-color", "red"); 
});

मुझे यह मिल गया ज्ञानवर्धक क्षण जब मुझे एहसास हुआ कि कॉल स्टैक कैसे काम करता है।

संपादित करें: टिप्पणियों में शामिल सुझाव।

Comments

Youtube लिंक के लिए +1। पवित्र बकवास मैंने बहुत कुछ सीखा है।

— जेसन

मुझे लगता है कि स्थानीय चरों को चीजें सौंपना बहुत अच्छा है, लेकिन जंजीरों की ताकत (अपने उदाहरण से) के बारे में मत भूलना: $ ("# लेबल")। विधि ()। मेथड 2 ()। सीएसएस ("पृष्ठभूमि-रंग"), " लाल ");

— लांस मैकनर्नी

YouTube वीडियो बहुत अच्छा था। मैंने इस विषय पर अन्य Google प्रस्तुतियों को देखा है और मैंने अभी भी कुछ चीजें सीखी हैं! धन्यवाद!

— गेब्रियल हर्ले

लिंक के लिए भी, उत्कृष्ट!

— जोश स्टोडोला

यह jQuery संदर्भ के साथ चर के लिए एक डॉलर चिह्न का उपयोग करने के लिए एक सम्मेलन की तरह है। तो आप लिख सकते हैंvar $label = $('#label');

— टिम ब्यूथ

Answer 2

संदर्भ का उपयोग करने का तरीका समझें। आम तौर पर, एक jQuery चयनकर्ता पूरे डॉक्टर की खोज करेगा:

// This will search whole doc for elements with class myClass
$('.myClass');

लेकिन आप एक संदर्भ में खोज करके चीजों को गति दे सकते हैं:

var ct = $('#myContainer');
// This will search for elements with class myClass within the myContainer child elements
$('.myClass', ct);

Comments

Aaaaaaah! ठीक है, यह मेरी बग के 1,000,000 के बारे में है। +1

— जम्मुस

ऐसा लगता है कि आपका अंतिम बिंदु गलत है - group.google.co.uk/group/jquery-dev/browse_thread/thread/…

— James

इसे इंगित करने के लिए धन्यवाद JP। अब, मुझे क्या करना चाहिए ... क्या मुझे अपना उत्तर हटा देना चाहिए ताकि कोई दूसरा जंगली ना जाए और कुछ के लिए अपना कोड बदल दे?

— slolife

नहीं, यह अभी भी एक अच्छा बिंदु है, अनुकूलन-वार। :)

— जेम्स

jQuery यह देखने के लिए जाँच करता है कि क्या संदर्भ jQuery का एक उदाहरण है, इसलिए इसका कोई कारण नहीं है [0] । $('.myClass', ct);या यदि आप जानते हैं सीटी jQuery का एक उदाहरण आप उपयोग कर सकते हैं लगता हैct.find(".myClass")

— gradbot

Answer 3

इस तरह नंगे वर्ग के चयनकर्ताओं का उपयोग न करें:

$('.button').click(function() { /* do something */ });

यह हर एक तत्व को देखने के लिए समाप्त होगा अगर यह "बटन" की एक कक्षा है।

इसके बजाय, आप इसकी मदद कर सकते हैं, जैसे:

$('span.button').click(function() { /* do something */ });
$('#userform .button').click(function() { /* do something */ });

मैंने यह पिछले साल रेबेका मर्फी के ब्लॉग से सीखा था

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

Comments

मैं भी इस धारणा के तहत था कि रिवर्स सच था। शायद यह ब्राउज़र में ऐसा मामला है जो getElementsByClassName को लागू नहीं करता है, लेकिन अन्यथा आप सिर्फ jQuery को अधिक काम करने के लिए दे रहे हैं। मैं रेबेका को कुछ बेंचमार्क देखना पसंद करूंगा :)

— एलेक्स बैरेट

आप उस काम की मात्रा को कम कर रहे हैं जो उसे करना है। यह किसी को अपने ड्रेसर में अपने मोजे को ड्रॉअर से बाहर निकालने के लिए कहने के बजाय है, ताकि आप अपने कमरे से मोजे को बाहर निकालने के लिए कह सकें। 'देखने ’की मात्रा को कम करता है, इसे पर्याप्त रूप से करना है।

— डरपोक

जब आप CSS (कम से कम एलिमेंट टैग सहित) लिख रहे हों तो रिवर्स सही है। कोड देखें।

— www.speed

@ सब कुछ वास्तविक जीवन का सटीक एनालॉग नहीं है। उदाहरण के लिए, यदि ब्राउज़र इसका समर्थन करता है, तो $('.b')इसका उपयोग कर सकता document.getElementsByClassName('b')है, लेकिन ऐसा $('a.b')करने से वर्ग के साथ सभी मिलान तत्व मिलेंगे bऔर फिर पुष्टि करेंगे कि वे दो चरण के ऑपरेशन में एंकर हैं। उत्तरार्द्ध मुझे और अधिक काम की तरह लगता है। एक वास्तविक जीवन सादृश्य के लिए, यह कोशिश करें: मेरे कमरे में सभी मोज़े खोजें। अब, जो मेरे ड्रेसर में नहीं हैं उन्हें बाहर फेंक दो।

— एलेक्स

मेरा मानना ​​है कि चयनकर्ताओं पर गलत धारणा इस तथ्य के कारण है कि जक्वरी के पुराने संस्करणों में, $ ('div # फू') के बजाय $ ('# foo') करना अधिक तेज था, क्योंकि परिभाषा के अनुसार, एक आईडी अद्वितीय है। मुझे पूरा यकीन है कि यह बाद के रिलीज में तय किया गया था, लेकिन यह सिफारिश केवल आईडी पर ही लागू हुई, अन्य प्रकार के चयनकर्ताओं पर नहीं

— एलेक्स हेड

Answer 4

अनाम कार्यों को विभाजित करने का प्रयास करें ताकि आप उनका पुन: उपयोग कर सकें।

//Avoid
$('#div').click( function(){
   //do something
});

//Do do
function divClickFn (){
   //do something    
}

$('#div').click( divClickFn );

Comments

मुझे लगता है कि यह लगभग उसी डिग्री पर लागू होता है कि सिंक्रोनस (इनलाइन) कोड को नामित कार्यों में तोड़ दिया जाना चाहिए। यदि आपको एक कोड का एक हिस्सा मिला है जिसे नाम दिया जा रहा है, तो इसके लिए जाएं। लेकिन कोड को लाइन से बाहर न ले जाएं क्योंकि आप इसे किसी फ़ंक्शन के अंदर लपेट रहे हैं; अनाम कार्य अच्छे कारण के लिए मौजूद हैं।

— दान ब्रैसलाउ

दरअसल मैं अपने फंक्शन को 'नाम' देना पसंद करता हूं। यह बहुत उपयोगी है जब आप कोड को डिबग कर रहे हैं और अनाम कार्यों की अंतहीन सूची देखने के बजाय, आप ठीक से नामित कार्यों को देखते हैं।

— SolutionYogi

आपकी बात को अच्छी तरह से लिया गया है, और मैं शायद इस बात से कुछ समय के लिए खुद ही फंस गया हूं। फिर भी, " लगभग समान डिग्री" अभी भी मेरे लिए काम करती है।

— Dan Breslau

esp। यदि बंधन एक लूप में हो रहा है!

— daniellmb

डीबगिंग के दौरान नामित फ़ंक्शन भी आपको बहुत लाभ पहुंचाते हैं; कुछ भी नहीं एक कॉलस्टैक 8 के स्तर को देखने से ज्यादा बेकार है जिसमें कुछ भी नहीं है (anonymous)। इस टिप को यहाँ और पढ़ें: stackoverflow.com/questions/182630/jquery-tips-and-tricks/…

— ken

Answer 5

• तैयार दस्तावेज़ का दुरुपयोग करने से बचें।
• दस्तावेज़ को केवल इनिशियलाइज़ कोड के लिए तैयार रखें।
• हमेशा तैयार डॉक के बाहर के कार्यों को निकालें ताकि उनका पुन: उपयोग किया जा सके।

मैंने डॉक रेडी स्टेटमेंट के अंदर कोड की सैकड़ों लाइनें देखी हैं। बदसूरत, अपठनीय और असंभव बनाए रखने के लिए।

Comments

+1। सामान्य तौर पर, मैंने देखा कि अधिकांश jQuery कोड सैकड़ों लाइनों के साथ फ़ंक्शन का उपयोग करता है। मुझे नहीं पता कि 'jQuery डेवलपर्स' छोटे कार्यों का उपयोग करना क्यों पसंद नहीं करते हैं।

— SolutionYogi

@SolutionYogi क्योंकि अधिकांश केवल JS नोब्स हैं?

— adJJLev

मैं सभी के लिए तैयार दस्तावेज़ में बहुत लंबे कार्य नहीं कर रहा हूँ, यह अच्छी सलाह है। हालांकि, कई छोटे घटक कार्य करना जो एक ओवररचिंग फ़ंक्शन से चलाए जाते हैं जो दस्तावेज़ तैयार नहीं है, जरूरी नहीं कि यह सबसे अच्छा अभ्यास है। यदि ओवररचिंग फ़ंक्शन केवल एक ही है जो कोड के उन टुकड़ों का उपयोग करता है, तो आप इसे एक फ़ंक्शन में डाल देना बेहतर है, भले ही यह पढ़ना कठिन हो। कॉलिंग फ़ंक्शंस में बहुत अधिक ओवरहेड है और यदि आप केवल एक संदर्भ में कोड का उपयोग कर रहे हैं तो इसे टाला जाना चाहिए।

— ऋषि 88०

Answer 6

सर्वर के $.ajaxलिए अजाक्स अनुरोधों के लिए फ़ंक्शन का उपयोग करते समय , आपको completeप्रतिक्रिया डेटा को संसाधित करने के लिए घटना का उपयोग करने से बचना चाहिए । यह आग लगाएगा कि अनुरोध सफल था या नहीं।

इसके बजाय complete, उपयोग करें success।

डॉक्स में अजाक्स इवेंट देखें ।

Comments

मैं सफलता के पीछे और आगे पूरा हो गया हूं, क्या आप इस बारे में विस्तार कर सकते हैं कि आपको क्यों लगता है कि पूर्ण बेहतर है?

— नील एन

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

— आर्टेम बार्गर

वैसे यह हमेशा कहा जाता है। हालाँकि मैं असहमत होता। लोडिंग जिफ़ आदि को छिपाने के लिए पूर्ण सर्वोत्तम है। आपको किसी भी त्रुटि के लिए प्रतिक्रिया और त्रुटि से निपटने के लिए सफलता का उपयोग करना चाहिए।

— redsquare

वह पूर्ण के बजाय सफलता का उपयोग करने का सुझाव दे रहा है। 'पूरा' हमेशा आगजनी करता है जब अजाक्स अनुरोध 'पूर्ण' होता है, इससे कोई फर्क नहीं पड़ता कि यह सफलतापूर्वक या असफल रूप से पूरा हुआ है।

— SolutionYogi

क्या आप इससे असहमत हैं? मैं डेटा प्रक्रिया का जिक्र कर रहा था और किसी भी चित्र को पूरा करने के लिए आपके पास मौजूद अवसरों को छिपाने / दिखाने में कोई आपत्ति नहीं थी।

— आर्टेम बारगर 19

Answer 7

कॉलबैक के साथ "चेनिंग" एनिमेशन-इवेंट्स।

मान लीजिए कि आप एक अनुच्छेद पर क्लिक करके उसे गायब करना चाहते हैं। आप बाद में DOM से तत्व को हटाना भी चाहते थे। आप सोच सकते हैं कि आप बस विधियों की श्रृंखला बना सकते हैं:

$("p").click(function(e) {
  $(this).fadeOut("slow").remove();
});

इस उदाहरण में, .remove () को .fadeOut () पूरा करने से पहले, आपके क्रमिक-लुप्त होती प्रभाव को नष्ट करने और बस तत्व को तुरंत गायब कर दिया जाएगा। इसके बजाय, जब आप केवल पिछले खत्म करने पर एक कमांड फायर करना चाहते हैं, तो कॉलबैक का उपयोग करें:

$("p").click(function(e){
  $(this).fadeOut("slow", function(){
    $(this).remove();
  });
});

.FadeOut () का दूसरा पैरामीटर एक अनाम फ़ंक्शन है जो .fadeOut () एनीमेशन पूरा होने के बाद एक बार चलेगा। यह क्रमिक लुप्त होती, और तत्व के बाद के हटाने के लिए बनाता है।

Answer 8

यदि आप एक ही घटना को कई बार बांधते हैं (तो) यह कई बार आग लगा देगा। मैं आमतौर पर हमेशा unbind('click').bind('click')सुरक्षित रहने के लिए जाता हूं

Comments

यह jQuery के लिए विशिष्ट नहीं है, हालांकि महत्वपूर्ण बात ध्यान में रखना है।

— SolutionYogi

आप एक ही घटना को दो बार बाँधने के लिए लाइव इवेंट का उपयोग कर सकते हैं।

— पॉवरलॉर्ड

जियो के अपने (परफॉरमेंस) मुद्दे हैं अगर ज्यादा इस्तेमाल किए जाएं। 1.3.3 में बेहतर जहां आप संदर्भ दे सकते हैं।

— redsquare

Answer 9

प्लग-इन का दुरुपयोग न करें।

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

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

उस प्लग-इन का चयन करें जिसका आप बुद्धिमानी से उपयोग करते हैं। लाइब्रेरी और यूजर इंटरफेस के अलावा, मैं लगातार $ .cookie , $ .form , $ .validate और thickbox का उपयोग करता हूं । बाकी के लिए मैं ज्यादातर अपना प्लग-इन विकसित करता हूं।

Comments

ग्रिड के बारे में क्या? आप अपना बनाते हैं?

— jmav

हाँ। प्रोजेक्ट से प्रोजेक्ट डेटा विभिन्न तरीकों से आता है। मैं पूर्ण नियंत्रण रखना पसंद करता हूं कि उस ग्रिड को साकार करने से मुझे बीच में मदद मिलती है और फिर मुझे सुधार करना पड़ता है।

— एलजो वलूगी

IF {पर्याप्त समय दिए जाने पर, आमतौर पर मैं सभी डेटा-चालित-डोम-मैनिपुलेशन (css / html) कोड को सीधे लिखना पसंद करता हूं। दूसरे शब्दों में - एक 'प्लगइन' के लिए डेटा पास नहीं करते हैं और यह html उगल दिया है। वर्तमान गुंजाइश संगतता के लिए प्लगइन्स (मिडफ़ील्ड) का मूल्यांकन करने के लिए इसकी कड़ी मेहनत, भविष्य की मांगों के बारे में भूल जाओ। सोचो ... डिजाइनर, योजनाकार, प्रबंधक, प्रबंधक, प्रबंधक। ओह और ग्राहकों और उपयोगकर्ताओं। लेकिन अगर आपके पास वो सब चीजें हैं, तो आपके पास उक्त 'समय' पर्याप्त नहीं होगा। तो बस पहले से ही jqgrid का उपयोग करें - आप जानबूझकर समय बर्बाद कर रहे हैं। क्या यह अभी तक किया गया है?}

— user406905

Answer 10

नुकसान: चयनकर्ताओं के बजाय छोरों का उपयोग करना।

यदि आप स्वयं को jQuery '.each' विधि के लिए डोम तत्वों पर पुनरावृत्त करने के लिए पहुँच रहे हैं, तो अपने आप से पूछें कि क्या इसके बजाय तत्वों को प्राप्त करने के लिए चयनकर्ता का उपयोग कर सकते हैं।

JQuery के चयनकर्ताओं के बारे में अधिक जानकारी:
http://docs.jquery.com/Selectors

नुकसान: फायरबग जैसे उपकरण का उपयोग नहीं करना

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

Firebug पर अधिक जानकारी: http://getfirebug.com/

पॉलीमॉर्फिक पॉडकास्ट के इस एपिसोड में अन्य महान विचार हैं: (डेव वार्ड के साथ jQuery रहस्य) http://polymorphicpodcast.com/shows/jquery/

Comments

मैंने पहले कई बार किया है। आपको बस यह याद रखने की आवश्यकता है कि चयनकर्ता से लौटे सभी तत्वों पर अधिकांश jQuery फ़ंक्शन संचालित होंगे।

— असंतुष्टGoGo

ईमानदार होने के लिए .each विधि का अनुवाद करें

— साइमन

Answer 11

इस पहचानकर्ता को सही संदर्भ में उपयोग करने की गलतफहमी। उदाहरण के लिए:

$( "#first_element").click( function( event)
{
   $(this).method( ); //referring to first_element
   $(".listOfElements").each( function()
   {
      $(this).someMethod( ); // here 'this' is not referring first_element anymore.
   })
});

और यहाँ एक नमूना है कि आप इसे कैसे हल कर सकते हैं:

$( "#first_element").click( function( event)
{
   $(this).method( ); //referring to first_element
   var $that = this;
   $(".listOfElements").each( function()
   {
      $that.someMethod( ); // here 'that' is referring to first_element still.
   })
});

Comments

+1 अधिक javascript समस्या एक jquery समस्या से अधिक है, लेकिन मैं इससे बहुत अधिक उलझ जाता था।

— mmacaulay

Answer 12

पूरे DOM पर कई बार सर्च करने से बचें। यह कुछ ऐसा है जो वास्तव में आपकी स्क्रिप्ट में देरी कर सकता है।

खराब:

$(".aclass").this();
$(".aclass").that();
...

अच्छा:

$(".aclass").this().that();

खराब:

$("#form .text").this();
$("#form .int").that();
$("#form .choice").method();

अच्छा:

$("#form")
    .find(".text").this().end()
    .find(".int").that().end()
    .find(".choice").method();

Comments

$ ( "। Aclass") इस () कि ()।। अच्छा नहीं है! केवल कक्षा के चयनकर्ता धीमे हैं

— redsquare

यह एक उदाहरण है जो एक चयन पर कई तरीकों का उपयोग करने के लिए जकुरी की क्षमता दिखा रहा है। मैंने इस तकनीक पर अधिक ध्यान देने के लिए चयन को सरल (और इस तरह धीमा) कर दिया।

— googletorp

डोम को बार-बार खोजने से परहेज करना एक अच्छी बात है - अंतिम उदाहरण एक अपठनीय गड़बड़ है जहां मुझे पता नहीं है कि क्या चल रहा है। यदि आप एक से अधिक बार परिणाम प्राप्त करने की योजना बनाते हैं, तो इसे एक चर में संग्रहीत करें। यह कोड को और अधिक बनाए रखने योग्य बनाता है।

— क्वेंटिन

Answer 13

हमेशा एक सार्थक चर में $ (इस) को कैश करें (विशेषकर)

ऐशे ही

$(selector).each(function () {
    var eachOf_X_loop = $(this); 
})

Comments

का उपयोग करें $selfया $thisयदि आप एक अच्छा चर नाम के बारे में सोचने के लिए आलसी हैं।

— धीरे

Answer 14

रेपो मैन ने जो कहा, वैसा ही, लेकिन काफी नहीं।

ASP.NET winforms को विकसित करते समय, मैं अक्सर करता हूं

$('<%= Label1.ClientID %>');

# चिन्ह को भूल जाना। सही रूप है

$('#<%= Label1.ClientID %>');

Answer 15

आयोजन

$("selector").html($("another-selector").html());

किसी भी घटना का क्लोन नहीं करता है - आपको उन सभी को विद्रोह करना होगा।

जेपी के कम टी-क्लोन () के अनुसार यदि आप सच पास करते हैं, तो घटनाओं का खंडन करते हैं।

Comments

यदि आप सही पास करते हैं तो क्लोन () करता है।

— जेम्स

JQuery 1.3.2 में लाइव () के बारे में क्या?

— jmav

Answer 16

एक ही jQuery वस्तुओं के कई निर्माण से बचें

//Avoid
function someFunc(){
   $(this).fadeIn();
   $(this).fadeIn();
}

//Cache the obj
function someFunc(){
   var $this = $(this).fadeIn();
   $this.fadeIn();
}

Comments

var $ यह = $ (यह) .fadeIn () ;; आप एक प्रभाव कैशिंग कर रहे हैं?

— जेसन

यह तत्व को वापस लौटाता है, जिसे चैनिंग कहा जाता है!

— redsquare

आप एक चर सेट कर सकते हैं और उसी समय उस पर एक क्रिया कर सकते हैं?

— जेसन

वास्तव में, लेकिन इसके लिए मेरे शब्द न लें। कोशिश करो। आपको क्या लगता है कि निम्नलिखित संभव है यदि तत्व का प्रतिनिधित्व करने वाली jquery वस्तु वापस नहीं आती है? $ ('# divId')। Hide ()। show ()। fadeIn () .... आदि

— redsquare

यह काम करता है, लेकिन मुझे लगता है कि $this = $(this);एक अलग लाइन पर होना अधिक पठनीय है । यदि आप (एक गड़बड़ किए बिना) कर सकते हैं, तो $thisसब कुछ और बस श्रृंखला के बारे में भूल जाओ :$(this).fadeIn().fadeIn();

— पैट्रिक McElhaney

Answer 17

मैं इसे जावास्क्रिप्ट के लिए भी कहता हूं, लेकिन jQuery, जावास्क्रिप्ट को सीएसएस को बदलना चाहिए।

यह भी सुनिश्चित करें कि जावास्क्रिप्ट के साथ किसी के लिए साइट प्रयोग करने योग्य है (बंद आज के रूप में प्रासंगिक नहीं है दिन में, लेकिन हमेशा पूरी तरह से उपयोग करने योग्य साइट के लिए अच्छा है)।

Answer 18

बहुत सारे DOM जोड़तोड़ करना। जबकि ब्राउज़र। सौंपने और फिर से रेंडर करने के तरीके के कारण .html (), .append (), .prepend (), इत्यादि तरीके बहुत अच्छे हैं, फिर भी अक्सर इनका उपयोग करने से मंदी आ जाएगी। Html को एक स्ट्रिंग के रूप में बनाना बेहतर है, और DOM को कई बार बदलने के बजाय इसे एक बार DOM में शामिल करना है।

के बजाय:

var $parent = $('#parent');
var iterations = 10;

for (var i = 0; i < iterations; i++){
    var $div = $('<div class="foo-' + i + '" />');
    $parent.append($div);
}

इसे इस्तेमाल करे:

var $parent = $('#parent');
var iterations = 10;
var html = '';

for (var i = 0; i < iterations; i++){
    html += '<div class="foo-' + i + '"></div>';
}

$parent.append(html);

या यहां तक ​​कि यह ($ रैपर एक नया बनाया गया तत्व है जो अभी तक DOM को इंजेक्ट नहीं किया गया है। इस रैपर div में नोड्स लगाने से मंदी नहीं होती है, और अंत में हम केवल एक DOM का उपयोग करके $ रैपर को $ पेरेंट के लिए जोड़ देते हैं। ):

var $parent = $('#parent');
var $wrapper = $('<div class="wrapper" />');
var iterations = 10;

for (var i = 0; i < iterations; i++){
    var $div = $('<div class="foo-' + i + '" />');
    $wrapper.append($div);
}

$parent.append($wrapper);

Comments

+1 ... मैं प्रत्येक सेकंड में कई तत्वों पर .html () का उपयोग कर रहा हूँ। यह सब कुछ धीमा करने के लिए शुरू होता है!

— User 2

Answer 19

ASP.NET परियोजनाओं में नियंत्रण की "वास्तविक" आईडी प्राप्त करने के लिए ClientID का उपयोग करना।

jQuery('#<%=myLabel.ClientID%>');

इसके अलावा, यदि आप SharePoint के अंदर jQuery का उपयोग कर रहे हैं, तो आपको jQuery.noConflict () को कॉल करना होगा।

Comments

? यह कैसा गड्ढा है? यह ASP.NET व्यवहार के लिए एक समाधान है।

— SolutionYogi

हाँ। यह एक jQuery मुद्दा है। यह asp.net webforms का दोष है।

— अगस्त'09 redsquare

माना। लेकिन यह एक ऐसी चीज है जिसके लिए आपको ASP.NET में jQuery का उपयोग करते समय ध्यान रखना चाहिए।

— याकूब डेटा सॉल्यूशंस

OP ने asp.net का उल्लेख नहीं किया

— redsquare

Answer 20

कार्यों के लिए jQuery वस्तुओं के बजाय आईडी पास करना:

myFunc = function(id) { // wrong!
    var selector = $("#" + id);
    selector.doStuff();
}

myFunc("someId");

एक लिपटे सेट पास करना कहीं अधिक लचीला है:

myFunc = function(elements) {
    elements.doStuff();
}

myFunc($("#someId")); // or myFunc($(".someClass")); etc.

Answer 21

जंजीर का अत्यधिक उपयोग।

यह देखो:

this.buttonNext[n ? 'bind' : 'unbind'](this.options.buttonNextEvent, this.funcNext)[n ? 'removeClass' : 'addClass'](this.className('jcarousel-next-disabled')).attr('disabled', n ? false : true);

व्याख्या

Comments

यह अजीब लग रहा है, यह एक तरह का मोटापा है।

— डायकैम

चेनिंग (यह अपने आप में) 'अधिकता' का उपयोग करना मुश्किल है। ऐसा लगता है कि कोड जावास्क्रिप्ट टर्नररी ऑपरेटर का अत्यधिक उपयोग करता है। अधिक जानकारी के लिए en.wikipedia.org/wiki/Ternary_operation#JavaScript देखें ।

— डान एस्परज़ा

मुझे खुशी है कि मुझे आपका कोड बनाए रखने की आवश्यकता नहीं है।

— cdmckay

Answer 22

स्ट्रिंग्स संचायक-शैली का उपयोग करें

+ ऑपरेटर का उपयोग करके मेमोरी में एक नया स्ट्रिंग बनाया जाता है और समवर्ती मान उसे सौंपा जाता है। इसके बाद ही परिणाम एक चर को सौंपा गया है। संघनन परिणाम के लिए मध्यवर्ती चर से बचने के लिए, आप सीधे + = ऑपरेटर का उपयोग करके परिणाम असाइन कर सकते हैं। धीरे:

a += 'x' + 'y';

और तेज:

a += 'x';
a += 'y';

फ़ंक्शन कॉल की तुलना में आदिम संचालन अधिक तेज़ हो सकता है

प्रदर्शन महत्वपूर्ण कॉल और कार्यों में फ़ंक्शन कॉल पर वैकल्पिक आदिम संचालन का उपयोग करने पर विचार करें। धीरे:

var min = Math.min(a, b);
arr.push(val);

और तेज:

var min = a < b ? a : b;
arr[arr.length] = val;

जावास्क्रिप्ट प्रदर्शन सर्वोत्तम प्रथाओं पर अधिक पढ़ें

Answer 23

यदि आप चाहते हैं कि उपयोगकर्ता अपने ब्राउज़र में html निकाय देखें, तो यूनिकोड स्ट्रिंग को इंजेक्ट करने के लिए 'टेक्स्ट' के बजाय 'html' का उपयोग करें:

$('p').html("Your Unicode string")

Answer 24

मेरे दो सेंट)

आमतौर पर, jquery के साथ काम करने का मतलब है कि आपको हर समय DOM तत्वों के बारे में चिंता करने की ज़रूरत नहीं है। आप कुछ इस तरह लिख सकते हैं -$('div.mine').addClass('someClass').bind('click', function(){alert('lalala')}) - और यह कोड बिना किसी त्रुटि के निष्पादित करेगा।

कुछ मामलों में यह उपयोगी है, कुछ मामलों में - बिल्कुल नहीं, लेकिन यह एक तथ्य है कि jquery का झुकाव, अच्छी तरह से, खाली-मैचों के अनुकूल होता है। फिर भी,replaceWith यदि कोई व्यक्ति उस तत्व के साथ उपयोग करने का प्रयास करता है जो दस्तावेज़ से संबंधित नहीं है तो एक त्रुटि होगी। मैं इसे काउंटर-सहज ज्ञान युक्त पाता हूं।

एक अन्य नुकसान यह है कि, मेरी राय में, प्रचलित () विधि द्वारा लौटाए गए नोड्स का क्रम है - $('<div><span class="A"/><span class="B"/><span class="C"/><span class="D"/></div>').find('span:last-child').prevAll()। वास्तव में कोई बड़ी बात नहीं है, लेकिन हमें इस तथ्य को ध्यान में रखना चाहिए।

Answer 25

यदि आप बहुत सारे डेटा में अजाक्स की योजना बनाते हैं, जैसे कि 20 स्तंभों वाली तालिका की 1500 पंक्तियाँ, तो उस डेटा को अपने HTML में सम्मिलित करने के लिए jQuery का उपयोग करने के बारे में भी न सोचें। सादे जावास्क्रिप्ट का उपयोग करें। jQuery धीमी मशीनों पर बहुत धीमा होगा।

इसके अलावा, आधा समय jQuery ऐसी चीजें करेगा जो इसे धीमा कर देगा, जैसे कि आने वाले HTML में स्क्रिप्ट टैग पार्स करने की कोशिश कर रहा है, और ब्राउज़र quirks के साथ सौदा करेगा। यदि आप तेज प्रविष्टि गति चाहते हैं, तो सादे जावास्क्रिप्ट के साथ रहें।

Comments

-1। Html () फ़ंक्शन मूल दृष्टिकोण के समान ही तेज़ है

— cllpse

हर कोई जो मुझे नीचा दिखा रहा है, उसने स्पष्ट रूप से IE पर डोम का एक टन डालने की कोशिश नहीं की और चीजें धीमी होती जाती हैं। कारण jquery धीमी है, यह केवल डोम को सम्मिलित नहीं करेगा, यह कुछ अन्य चीजें करता है, जैसे कि अगर चेक में स्क्रिप्ट हैं, और यदि IE में इसका उपयोग किया जाता है, तो उन्हें निष्पादित करता है, और कुछ अन्य सामान जो आपको ठीक से पता होने पर करने की आवश्यकता नहीं है आप किस तरह का डेटा

— डाल

जब तक आपको ब्राउज़र लीक और इस तरह के बारे में चिंता करने की ज़रूरत नहीं है, तब तक .innerHTMLकरेंगे। लेकिन अगर आप जीमेल जैसी कोई चीज बना रहे हैं, जहां उपयोगकर्ता टैब को घंटों तक खुला रखता है, तो आपको बस बुलेट को काटने और अतिरिक्त सुस्ती से निपटना होगा। जिज्ञासु के लिए, यहाँ ठीक वही है जो jQuery का .html()है: james.padolsey.com/jquery/#v=1.4&fn=jQuery.fn.html

— adamJLev

Answer 26

एक छोटी सी परियोजना में jQuery का उपयोग करना जो साधारण जावास्क्रिप्ट की कुछ पंक्तियों के साथ पूरा किया जा सकता है।

Comments

मुझे कोई आपत्ति नहीं है, लेकिन कृपया अपनी पसंद पर बहस करें।

— शिकंजा

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

— क्लैपसे

+1 मुझे उचित लगता है - यदि आप केवल कुछ पंक्तियों का उपयोग कर रहे हैं, तो केवल वेनिला जेएस का उपयोग करने के लिए समझें।

— एलेक्स

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

— vise

couple of lines of ordinary JavaScriptबिलकुल कोई परेशानी नही। लेकिन यह कभी बस इतना कब है? लोग कहते हैं कि "वेनिला जावास्क्रिप्ट का उपयोग क्यों नहीं करते हैं ??" आईई द्वारा अभी तक पर्याप्त रूप से काट नहीं किया गया है ... और यह उल्लेख करने के लिए नहीं कि सादे पुराने जेएस में सरल काम करने के लिए आपको कितना क्रॉफ्ट और बॉयलरप्लेट कोड लिखना होगा।

— adJJLev

Answer 27

ईवेंट बाइंडिंग को नहीं समझना। जावास्क्रिप्ट और jQuery अलग तरीके से काम करते हैं।

लोकप्रिय मांग से, एक उदाहरण:

JQuery में:

$("#someLink").click(function(){//do something});

बिना jQuery के:

<a id="someLink" href="page.html" onClick="SomeClickFunction(this)">Link</a>
<script type="text/javascript">
SomeClickFunction(item){
    //do something
}
</script>

मूल रूप से जावास्क्रिप्ट के लिए आवश्यक हुक अब आवश्यक नहीं हैं। यानी इनलाइन मार्कअप (ऑनक्लिक इत्यादि) का उपयोग करें क्योंकि आप बस आईडी और उन वर्गों का उपयोग कर सकते हैं जो एक डेवलपर सीएसएस उद्देश्यों के लिए सामान्य रूप से लाभ उठाएगा।

Comments

विस्तृत करने के लिए परवाह? अधिमानतः एक उदाहरण?

— SolutionYogi

जावास्क्रिप्ट ऐसा करने के लिए addEventListener () और संलग्नक () प्रदान नहीं करता है?

— एलेक्स

चिंताओं की जुदाई, आदमी। अपने HTML और JS को अलग रखें

— Don