चेनिंग घटनाएं और डोम पुनरावृत्ति

Question

नीचे मुझे दो jQuery चयनकर्ता मिल गए हैं।

कैश किए गए ऑब्जेक्ट के भीतर एक डोम तत्व की पहली खोज और फिर अपने माता-पिता की खोज करती है, तो यह किसी अन्य डोम तत्व के लिए माता-पिता (तालिका) तक पहुंच जाती है। (उदा। 2)

कैश किए गए तत्व के माध्यम से दूसरी (2 पंक्तियां) खोजें। (उदा। 1)

$('element', table.setting.body).on('blur focus', table.focus).parents('parent').find('another element').on('click', function); // ex2 

    $('element', table.setting.body).on('blur focus', function); // ex 1 
    $('another element', table.setting.body).on('click', function); // ex 1 

कौन सा तेजी से/सबसे अच्छा अभ्यास है?
पूर्व। 1 बिना किसी संदेह के jQuery कार्यों के लिए तेजी से reffering होगा, यानी। .hide().animate().show() लेकिन, डीओएम तत्वों की खोज करते समय यह कब होता है?

Answer 1

ऐसा लगता है कि आप table.setting.body से अलग-अलग वंशजों से मिलान करने की कोशिश कर रहे हैं और table.setting.body को दो बार निर्दिष्ट किए बिना इन वंशजों पर विभिन्न कार्य निष्पादित करते हैं।

आप इसे प्राप्त करने के लिए end() का उपयोग कर सकते हैं। उदाहरण के लिए, यदि table.setting.body एक jQuery वस्तु है, तो आप लिख सकते हैं:

table.setting.body.find("element").on("blur focus", function).end() 
        .find("another element").on("click", function); 

(यदि table.setting.body एक डोम तत्व है, तो आपको पहले इसे करने के लिए $() आवेदन करना होगा)।

कोड केवल मूल्यांकन करता है कैश की गई एक बार वस्तु से ऊपर, find() करने के लिए दो कॉल (थोड़ा तेजी से अपने कॉल की तुलना में $() करने के लिए एक context तर्क के साथ मेरा अनुभव में) on() (तुम्हारा के रूप में ही) के लिए दो कॉल और एक कॉल करता है, end() (जो केवल एक स्टैक से एक आइटम पॉप करता है और काफी तेज़ होना चाहिए)।

Answer 2

फर्क सिर्फ इतना है मैं देख रहा हूँ अपने पहले दृष्टिकोण के अंदर माता-पिता के उपयोग है।

parents: function(elem) { 
    return jQuery.dir(elem, "parentNode"); 
}, 

// ... 

dir: function(elem, dir, until) { 
    var matched = [], 
     cur = elem[ dir ]; 

    while (cur && cur.nodeType !== 9 && (until === undefined || cur.nodeType !== 1 || !jQuery(cur).is(until))) { 
     if (cur.nodeType === 1) { 
      matched.push(cur); 
     } 
     cur = cur[dir]; 
    } 
    return matched; 
}, 

(http://code.jquery.com/jquery-1.8.2.js)

cur = elem[ dir ] मतलब है elem["parentNode"] और: jQuery.parents समारोह निर्देशिका के अंदर एक पाश का उपयोग कर की जरूरत है माता पिता के लिए लग रहा है सभी माता-पिता के लिए दोहराया जाता है, क्योंकि अपरिभाषित होने तक। वांछित माता-पिता को संदर्भ के रूप में दिया गया है तो कोई शॉर्टकट नहीं है।

आपके द्वारा देखे जा रहे पहले तत्व के बीच पथ की लंबाई के आधार पर और दस्तावेज़ की जड़ के पहले दृष्टिकोण को अधिक डोम ऑपरेशंस की आवश्यकता होती है।

इसलिए मैं दूसरे दृष्टिकोण की अनुशंसा करता हूं।

Answer 3

मेरी राय में यह गति का एक प्रश्न कम है लेकिन रखरखाव और अच्छी कोडिंग शैली का एक सवाल है।

और वह है, जहां उदाहरण 1 अभी तक बेहतर उदाहरण 2 से

भ्रम से बचें और अलग चीजें रखना है। आप 2 घटनाओं को 2 अलग-अलग तत्वों से जोड़ना चाहते हैं - 2 कथन लिखें। यह आपके कोड को और अधिक संरचित और पठनीय बनाता है।