JQuery और बाइक के बारे में - मेरा जोड़

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

शुरुआत के लिए, आइए एक साधारण से शुरू करें।

1. जिस तरह से आप इसे कहते हैं, उसे जोर से लिखें

अन्य प्रोग्रामर से पहले आपका काम यह दिखाना है कि आप क्या करते हैं, न कि आप इसे कैसे करते हैं।

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

$(".info").html("") 

क्योंकि उन्होंने पहले सुविधाजनक वाक्यांश .innerHTML = "" था। अधिक पसंदीदा विकल्प:

 $(".info").empty() 

ये समान प्रोग्रामर अक्सर नई जानकारी डालने से पहले एक तत्व को स्पष्ट करते हैं:

 $(".info").html("").html("<b>Ok</b>") 

लेकिन मत भूलना - आप jQuery में लिख रहे हैं! और यह आपकी देखभाल करता है, और .html() एक नया मान डालने से पहले तत्व को स्वयं साफ कर देगा।

और वह इसे .innerHTML माध्यम से करने की तुलना में अधिक सक्षम रूप से .innerHTML । तथ्य यह है कि तत्व को साफ करने के अंदर ऐसे तत्व हो सकते हैं, जिन पर आप पहले इवेंट हैंडलर लटकाते हैं या .data() का उपयोग करते हैं। jQuery इसे साफ कर देगा और मेमोरी लीक नहीं होगी।
वैसे, कभी-कभी जानकारी निकालने के लिए, यह न केवल एक तत्व को साफ करने के लिए, बल्कि इसे पूरी तरह से हटाने के लिए अधिक समीचीन है:

 $(".info").remove() 

अधिक ...

इसे लिखते समय इसकी संभावना नहीं है:

 $("#history").css("display", "none") $("#description").css("display", "none") $("#category").css("display", "none") $("#contact").css("display", "none") 

आपने कहा: "इतिहास हटाएं, विवरण हटाएं, श्रेणियां हटाएं, संपर्क हटाएं।" सबसे अधिक संभावना है, आपने कहा: "इतिहास, विवरण, श्रेणियां और संपर्क हटाएं।" तो यह लिखें:

 $("#history, #description, #category, #contact").hide() 

और यह मत भूलो कि jQuery तुमसे प्यार करता है, और आइटम को छिपाने के लिए .hide() और .hide() को दिखाना है।

mouseenter/mouseleave वीएस mouseover/mouseout mouseenter/mouseleave

आपने शायद एक उपद्रव देखा: कभी-कभी जब आप टूलटिप प्रदर्शित करने के लिए किसी तत्व पर mouseover/mouseout ईवेंट की एक जोड़ी लटकाते हैं, तो यह टूलटिप mouseover/mouseout । और यह इस तथ्य के कारण होता है कि जिस तत्व पर आपने हैंडलर लटकाए हैं, उसके अंदर एक और तत्व है। जब आप माउस कर्सर पर मंडराते हैं, तो ब्राउज़र आपके बाहरी तत्व के लिए एक माउस इवेंट, और आपके आंतरिक तत्व के लिए एक mouseover इवेंट, और फिर बाहरी तत्व के लिए एक mouseover इवेंट उत्पन्न करता है, जो एक झटके की ओर जाता है।

लेकिन jQuery हमसे प्यार करता है और हमें घटनाओं की एक और जोड़ी प्रदान करता है - mouseenter/mouseleave , जो इस समस्या को निम्नानुसार हल करता है। पारित हैंडलर के लिए, एक आवरण किया जाता है। फिलहाल जब कर्सर आंतरिक तत्व में जाता है, तो बाहरी तत्व के लिए एक mouseout घटना mouseout होती है। उसी समय, jQuery इतना भोला नहीं है और ब्राउज़र द्वारा छल नहीं किया जा रहा है। event.relatedTarget रैपर फंक्शन event.relatedTarget प्रॉपर्टी को चेक करता है - कर्सर अब किस ओर इशारा कर रहा है - और अगर यह किसी बाहरी एलिमेंट के अंदर है, तो यह आपके द्वारा mouseleave गए mouseleave हैंडलर को कॉल नहीं करता है। और कोई चंचल नहीं।

इसके अलावा, .hover(handlerIn, handlerOut) फ़ंक्शन .hover(handlerIn, handlerOut) बारे में मत भूलना, जो दो हैंडलर लेता है और उन्हें .hover(handlerIn, handlerOut) रूप में लटका देता है:

 $(selector).hover(function() { tooltip.show() }, function() { tolltip.hide() }) 

UPD : कॉमरेड वैक्सर हमें याद दिलाता है कि संस्करण 1.8 के बाद से .hover() एक अप्रचलित फ़ंक्शन माना जाता है।

3. .closest() VS .closest()

अक्सर मैं इस डिज़ाइन में आता हूँ:

 var person = $(".name").parent().parent().parent() 

यह स्पष्ट है कि यहां एक महत्वपूर्ण माता-पिता को प्राप्त करने का प्रयास किया गया है जिनके पास महत्वपूर्ण जानकारी है, या जिसमें एक और आवश्यक तत्व है। लेकिन क्या होगा, जब आप छुट्टी पर थे, आपका $(".name") कहीं और आश्रय था, लेकिन उसी person भीतर? कई कारीगर वांछित वस्तु को .parent() चक्रीय रूप से कहते हैं।

अधिक उन्नत लोग जानते हैं कि वहाँ .parentsUntil(selector) , जो सभी माता-पिता को निर्दिष्ट एक (इसे छोड़कर) वापस कर देगा। लेकिन फिर भी निर्णय बोझिल है:

 var person = $(".name").parentsUntil(".person").last().parent() 

लेकिन एक और अधिक स्पष्ट तरीका है:

 var person = $(".name").closest(".person ") 

यदि हमें याद है कि हम कोड लिखते हैं जैसा कि हम इसे शब्दों में कहेंगे, तो यह विकल्प इसकी पारदर्शिता और संक्षिप्तता के लिए अधिक उपयुक्त है।

4. $.ajax() - बेहतर कम है, लेकिन बेहतर है!

हम सभी AJAX से प्यार करते हैं, विशेष रूप से $.ajax() । और आप उससे कितना प्यार करते हैं? एक अन्य लेखक द्वारा पिछले लेख में, इस घटक के साथ काम करने की उपयोगिता बताई गई थी। मैं अपनी एक जोड़ी लाऊंगा ...

मुझे झूठ बोलने की संभावना नहीं है अगर मैं कहता हूं कि आप अक्सर - यदि हमेशा नहीं - एक ही फ़ाइल को AJAX के माध्यम से एक्सेस करें, अलग-अलग आदेशों को विभिन्न कार्यों के लिए इसे पारित करना। आप छोटी कार्रवाइयों के लिए फ़ाइलों का एक गुच्छा नहीं बनाते हैं, मुझे आशा है कि? यह भी संभव है कि आप हमेशा किसी तरह का पैरामीटर पास करें जो नहीं बदलता है; और हो सकता है कि आप हमेशा केवल json लौटें। आइए हमारे जीवन को थोड़ा सरल करें, क्योंकि jQuery हमसे प्यार करता है:

 $.ajaxSetup({ dataType: "json", url: "ajax.php", data: { user_id: userId } }); 

अब हमें इन मापदंडों को निर्दिष्ट करने की आवश्यकता नहीं है, जब हम अनुरोध करते हैं कि इस ऑपरेशन के लिए केवल विशिष्ट हैं:

 $.ajax({ data: { product_id: productId }, success: function(json) { console.log(json) }, alert: " ..." //  ? .  }) 

और कोड को दोहराए जाने के साथ क्वेरीज़ पूरी नहीं होंगी। ध्यान दें कि $.ajaxSetup और $.ajaxSetup से data पैरामीटर एक साथ सरेस से जोड़ा हुआ है, और उनकी राशि सर्वर को भेजी जाती है (पैरामीटर $.ajax से $.ajaxSetup से एक ही ओवरराइट करते हैं)।

5. $.ajax() - उपयोगकर्ता को सूचित करें

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

उदाहरण की सादगी के लिए, हम इस तरह से संदेश जारी करेंगे:

 <div id="popup" class="---"></div> 

और हम इसे अपने अनुरोधों के साथ जोड़ेंगे:

 $("#popup").ajaxSend(function(event, xhr, options) { $(this).text(options.alert || "...").show() }).ajaxStop(function() { $(this).fadeOut("fast") }) 

AJAX अनुरोध होने पर .ajaxSend() हैंडलर को हर बार कॉल करता है। यहां हम प्रेषित संदेश (ऊपर देखें) या डिफ़ॉल्ट संदेश प्रदर्शित करते हैं।

AJAX अनुरोध पूरा होने के बाद .ajaxStop() को अंत में कहा जाता है; यानी यदि आपके पास कई AJAX अनुरोध समानांतर में संसाधित किए जा रहे हैं, तो हैंडलर को केवल एक बार कॉल किया जाएगा - अंतिम अनुरोध निष्पादित होने के बाद।

और यदि आप एक अलग पॉप-अप में हर बार एक नया संदेश देना चाहते हैं, तो आपको कोड को थोड़ा बदलना होगा:

 $("body").ajaxSend(function(event, xhr, options) { $('<div class="popup" />') .appendTo(this) .css({/*  */}) .text(options.alert || "...") .delay(2000) //   2  .fadeOut("fast", function() { $(this).remove() }) }) 

आप अपने भविष्य के निर्देशांक की गणना जोड़कर पॉपअप की स्थिति के बारे में भी चिंता कर सकते हैं।

6. $ .ajax () - कोड को सूचित करें

आइए अब हमारे पॉपअप को दूसरी तरफ ऊपर दिए गए उदाहरण से देखें। मान लीजिए कि एक व्यक्ति कुछ जटिल विजेट का डेवलपर है जो पृष्ठ पर वर्तमान घटनाओं के बारे में जानकारी प्रदर्शित करता है। और दूसरा व्यक्ति व्यावसायिक तर्क को विकसित करता है और AJAX अनुरोधों को लागू करता है। जाहिर है, बहुत सारे AJAX अनुरोध लिखे जाने के बाद एक विजेट की आवश्यकता उत्पन्न हो सकती है। यानी जबकि केवल एक व्यक्ति परियोजना पर काम कर रहा है। यदि हम अपने कोड और हमारे भावी सहकर्मियों से उतना ही प्यार करते हैं जितना कि jQuery हमसे प्यार करता है, तो हमें अपने AJAX के कुछ कार्यों के पूरा होने पर इसे अधिसूचित करने के लिए किसी अन्य कोड की आवश्यकता का अनुमान होगा। और ऐसा करेंगे:

 $.ajax({ data: { action: "search-name", name: $("#name").val() }, beforeSend: function() { $(searchForm).trigger("start.search") }, complete: function() { $(searchForm).trigger("finish.search") } }) 

अब हम यह चिंता नहीं कर सकते कि भविष्य में कोई व्यक्ति हमारी संपत्ति को तोड़ देगा और रसभरी को खराब कर देगा। यह सूचित करने के लिए हमारे लिए पर्याप्त है (टिप्पणियों में?) कि हर कोई सदस्यता ले सकता है, यदि वे चाहें तो घटनाओं को शुरू कर सकते हैं। start.search और finish.search :

 $(searchForm) .on("start.search", function() { //    }) .on("finish.search", function() { //    }) 

आखिरकार, हमें अपने स्वयं के प्रकार की घटनाओं को बनाने, उन्हें उत्पन्न करने और उनकी सदस्यता लेने का अवसर दिया गया है। सब कुछ सरल है! :) jQuery हमसे प्यार करता है।