$ .each

Question

का उपयोग करने की तुलना में एक jQuery वर्ग सेट में श्रोता जोड़ने की क्षमता प्रारंभिक प्रवृत्त मुझे बताते हैं कि श्रोता जोड़ना, या तो तत्वों के एक jQuery सेट पर बाइंड या सीधा घटना विधि का उपयोग करना, जैसे

$('.className').click(funcName);

ज्यादा एक ही सेट करने के लिए एक के बाद एक श्रोता एक जोड़ने के लिए एक $ .प्रत्येक विधि का उपयोग, के रूप में की तुलना में अधिक उचित है ...

$('.className').each(function(){ $(this).click(funcName); });

लेकिन जब विकास प्लगइन की बात आती है , ए और आप पेज लोड के बाद और पृष्ठ लोड के बाद लंबे समय तक अपने प्लगइन के दौरान कई बार अपनी प्लगइन के उदाहरण को कॉल करने वाले उपयोगकर्ताओं की संभावना से निपट रहे हैं, क्या यह कोशिश करने के बजाए प्रत्येक तत्व को हैंडलर लागू करना गलत है अपने वैश्विक वर्ग सेट में हैंडलर अमूर्त?

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

संपादित

आंशिक प्लगइन से कोड का निर्माण

init : function(){ 

    this.each(function(opts){ 

    // adding event handlers here removes 
    // the need to worry about multiple instances 
    // and duplicate handles over the lifetime of the page 

    }); 

    // adding 'global' handlers here may/may not be more 
    // efficient, but adds an issue of multiple instances 

    return this; 

} 

Answer 1

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

Answer 2

$('.className').click(funcName); 

कम भार के रूप में यह एक एकल jQuery वस्तु

$('.className').each(function(){ $(this).click(funcName); }); 

अधिक भार का उपयोग करता है के रूप में यह प्रारंभिक उदाहरण का उपयोग करता है, और यह भी $(this) के माध्यम से एक 'eached' तत्व के लिए एक नया उदाहरण उत्पन्न करता है। यदि $('.className') में 50 तत्व हैं, तो आपके पास अब एक ही ऑब्जेक्ट बनाम 51 jQuery ऑब्जेक्ट्स हैं।

प्लगइन विकास तक, आप जावास्क्रिप्ट ऑब्जेक्ट्स का उपयोग कर सकते हैं और प्लगइन के प्रत्येक उदाहरण के लिए new का उपयोग कर सकते हैं। या आप किसी ऑब्जेक्ट ऑब्जेक्ट क्लास को परिभाषित कर सकते हैं, और उदाहरण सेट अप करने के लिए .each का उपयोग कर सकते हैं। मुझे उम्मीद है कि यह मदद करता है, यह जानने के बिना कि आप क्या खाना बना रहे हैं, इसकी सिफारिश करना मुश्किल है।

Answer 3

यदि आप एक बार click पर कॉल करते हैं, तो jQuery पूरे संग्रह के माध्यम से लूप करेगा और घटनाओं को अलग-अलग बाध्य करेगा। हालांकि, यह आपके विकल्प की तुलना में अधिक कुशलता से करेगा, क्योंकि यह सेट में प्रत्येक तत्व के लिए एक नई jQuery ऑब्जेक्ट नहीं बनाता है, जो बहुत धीमा होगा।

यहाँ jQuery स्रोत से कोड है (यह on विधि है):

return this.each(function() { 
    jQuery.event.add(this, types, fn, data, selector); 
}); 

(event.js, line 936-8)

jQuery.event.add, विधि है कि भारी उठाने करता है जो, एक jQuery वस्तु की जरूरत नहीं है; सादे डीओएम ऑब्जेक्ट की जरूरत है।यह पाश (जो प्रभावी रूप से आपके जैसा ही काम करता है) दक्षता के मामले में बहुत बेहतर है, क्योंकि आपके कोड में बड़ी बाधा $(this) हर बार कहलाती है।

ध्यान दें कि सबसे कुशल तकनीक ही on विधि के साथ घटना प्रतिनिधिमंडल का उपयोग करेंगे। यह इस प्रकार दिखाई देंगे:

$(document.body).on('click', '.className', funcName); 

इसका मतलब यह है "हर document.body के अंदर क्लिक के लिए, अगर यह चयनकर्ता .className मिलान एक तत्व पर जन्म लिया है देखने के लिए जाँच, और यदि हां funcName चलाने"। आप document.body को किसी अन्य तत्व के साथ प्रतिस्थापित कर सकते हैं जिसमें सभी संभावित .className तत्व शामिल हैं।

Answer 4

जानने का एकमात्र असली तरीका profile it है। हालांकि, मैं दांव दूंगा कि यह समयपूर्व अनुकूलन में एक अभ्यास है।

$(this) को लूप has a negligible runtime performance hit पर कॉल करना।

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