JQuery/जावास्क्रिप्ट: नेस्टेड फ़ंक्शंस को रीफैक्टरिंग

Question

मेरे पास यह दिलचस्प jQuery फ़ंक्शन है। यह मूल रूप से लिंक करने के लिए एक क्लिक हैंडलर जोड़ता है, और जब इसे क्लिक किया जाता है, तो यह उपयोगकर्ता को सामग्री को संपादित करने की अनुमति देने के लिए एक फॉर्म लोड करेगा। और फॉर्म AJAX द्वारा सबमिट किया गया है, और यह पूरा होने पर एक सफल संदेश प्रदर्शित करेगा।

रूपरेखा नीचे है; कहने की जरूरत नहीं है, यह गन्दा है। मैं प्रत्येक कॉलबैक क्लास विधि के रूप में प्राप्त कर सकता था। नेस्टेड कार्यों को दोबारा करने के लिए अन्य तरीके क्या हैं? मैं अगर वहाँ तरीके कि चर एक माता पिता के समारोह में घोषित अभी भी

$('a.edit').click(function() { 

    // ..snipped.. 
    // get form 
    $.ajax({ 
     success: function() { 

     // add form 
     // submit handler for form 
     $(new_form).submit(function() { 

      // submit via ajax 
      $.ajax({ 

       success: function(data) { 
        // display message 
       } 
      }) 

     }) 

     }} 
    ) 
} 

Answer 1

मुझे लगता है कि आपके प्रश्न का दिलचस्प हिस्सा यह है कि बंद करने वाले चरों तक पहुंच को खोए बिना रिफैक्टर कैसे करें।

संस्करण एक: नेस्ट, बंद और चर का उपयोग के साथ:

var a; 
    $('a.edit').click(function() { 
     var b; 
     $.ajax({ 
     success: function() { 
      var c; 
      $(new_form).submit(function() { 
      var d; 
      $.ajax({ 
       success: function(data) { 
        // a,b,c,d are all visible here. 
        // note that a references the same object for all calls of the success function, whereas d is a different variable for each call of submit. 
        // this behaviour is called closure: the 'enclosed' function has access to the outer var 
       } 
      }) 
      }) 
     } 
     }) 
    }) 

संस्करण दो: कम नेस्टेड, लेकिन बंद के बिना और चर के उपयोग के बिना: यहाँ मेरी सुझाव है

var a; 
$('a.edit').click(onEdit); 

var onEdit = function() { 
    var b; 
    $.ajax({success: onEditSuccess}); 
}; 

var onEditSuccess = function() { 
    var c; 
    $(new_form).submit(onSubmit); 
}; 

var onSubmit = function() { 
    var d; 
    $.ajax({success: onSubmitSuccess}); 
} 

var onSubmitSuccess = function(data) { 
    // a is visible (global var) 
    // b,c,d NOT visible here. 
}; 

संस्करण तीन : बंद घर्षण तक पहुंच प्राप्त करने के लिए कम घोंसला और अज्ञात कार्यों और पैरामीटर के साथ:

var a; 
$('a.edit').click(function(){onEdit(a)}); 

var onEdit = function(a) { 
    var b; 
    $.ajax({success: function(){onEditSuccess(a,b)}}); 
}; 

var onEditSuccess = function(a,b) { 
    var c; 
    $(new_form).submit(function(){onSubmit(a,b,c)}); 
}; 

var onSubmit = function(a,b,c) { 
    var d; 
    $.ajax({success: function(data){onSubmitSuccess(data,a,b,c,d)}}); 
} 

var onSubmitSuccess = function(data,a,b,c,d) { 
    // a,b,c,d are visible again 
    // nice side effect: people not familiar with closures see that the vars are available as they are function parameters 
}; 

Answer 2

आप आसानी से यह बहुत अधिक पठनीय बनाने के लिए इस refactor कर सकते हैं पुनर्रचना के बाद नेस्टेड कार्य करने के लिए नीचे अपने मूल्य को बनाए रखने रहे हैं यह जानने के लिए दिलचस्पी है। समझने की मुख्य अवधारणा यह है कि आप कॉलबैक के साथ-साथ अज्ञात लोगों में नामित फ़ंक्शंस का उल्लेख कर सकते हैं। तो, उदाहरण के लिए:।

function clickHandler() { 
    alert("Link clicked"); 
} 
$('a').click(clickHandler); 

मेरी प्राथमिकता वे क्या करते हैं के अनुसार (loadImage जैसे कार्यों के नाम देने के लिए हमेशा होता है, कि आप उन्हें (गति प्रदान करने का इरादा नहीं बल्कि घटना से जैसे clickLink यह बनाता साफ अपने कोड और बाद में परिवर्तन बहुत आसान बना देता है इस मामले में, मैं इस तरह मेरे कोड संरचना होगा:।।

$(document).ready(function(){ 
    $('a.edit').click(loadFormStart); 

    function loadFormStart() { // get form 
     $.ajax({ 
      success: loadFormEnd 
     }); 
    } 

    function loadFormEnd(data) { // add form & handler 
     $('new_form').submit(handleFormStart); 
    } 

    function handleFormStart() { // submit form 
     $.ajax({ 
      success: handleFormEnd 
     }); 
    } 

    function handleFormEnd(data) { // receive form data 
     //display message 
    } 
}); 

मैं आपको यह भी Code Organization on jqfundamentals जो एक वस्तु शाब्दिक का उपयोग कर इस के लिए एक समान दृष्टिकोण देता है पढ़ने के लिए सलाह देते हैं कि

Answer 3

दिलचस्प सवाल। व्यक्तिगत रूप से मुझे ऊपर दिमाग नहीं है। टिप्पणी करते कुंजी है, तो आप कुछ के साथ समापन ब्रेसिज़ योग्यता पर विचार कर सकते:

  } //success: function(data) 
     }) //$.ajax({ 
    }) //$(new_form).submit(

... आदि

मैं भी (सही ढंग से कोष्ठक संरेखित पहले clance पर पर विचार करेंगे, अपने }} एक छोटे से चकित करता है)।

यदि यह 'सामान्य' घोंसले की रणनीतियों की बात आती है, तो मेरे पास एकमात्र अन्य सुझाव है कि कोड को अन्य कार्यों को स्थानांतरित करना है। बेशक इसका मतलब है कि आपके पास स्मृति में कार्यवाही का कार्य है, लेकिन इसे और अधिक पठनीय बना सकता है।

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

एक पूरी तरह से असंबंधित नोट पर, आपको शायद प्रत्येक ब्रैकेट लाइनों के अंत में कुछ ; जोड़ना चाहिए!