JQuery/JavaScript: refaktoryzacja funkcji zagnieżdżonych

Question

Mam tę interesującą funkcję jQuery. Zasadniczo dodaje obsługę kliknięcia do połączenia, a po kliknięciu ładuje formularz, aby umożliwić użytkownikowi edycję treści. a formularz jest przesyłany przez AJAX i po zakończeniu wyświetla komunikat o pomyślnym zakończeniu.

Kontur jest poniżej; nie trzeba dodawać, że to jest brudne. Mogę mieć każdy z wywołań zwrotnych jako metodę klasy. Jakie są inne sposoby na refaktorowanie funkcji zagnieżdżonych? Jestem również zainteresowany, aby zobaczyć, czy istnieją sposoby, które deklarują zmienne w funkcji dominującej nadal zachowują swoją wartość w dół do funkcji zagnieżdżonych po refactoring

$('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

Domyślam się, że interesującą częścią twojego pytania jest to, jak refaktoryzować bez utraty dostępu do zmiennych zamknięcia.Oto moja propozycja:

Wersja pierwsza: zagnieżdżone, z zamknięciami i zmienną dostępu:

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 
       } 
      }) 
      }) 
     } 
     }) 
    }) 

Wersja druga: mniej zagnieżdżone, ale bez zamknięć i bez zmiennej dostępu:

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. 
}; 

Wersja trzy : mniej zagnieżdżone oraz z nienazwanymi funkcjami i parametrami w celu uzyskania dostępu do zmiennych zamknięcia:

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

Można łatwo byłaby to będzie dużo bardziej czytelny. Kluczową koncepcją do uchwycenia jest to, że można odwoływać się do nazwanych funkcji w callbackach, a także anonimowych. Tak więc, na przykład:.

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

skłaniam się zawsze dać nazwiska funkcje w zależności od tego, co robią (np loadImage zamiast zdarzenia, które zamierzają je (wywołać np clickLink czyni ten kod jaśniejsze i sprawia, że ​​późniejsze zmiany znacznie łatwiejsze W tym przypadku, chciałbym zorganizować mój kod tak:..

$(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 
    } 
}); 

Chciałbym również radzę czytać Code Organization on jqfundamentals która daje podobne podejście do tego obiektu za pomocą dosłownego

Answer 3

Interesujące pytanie. Osobiście nie mam nic przeciwko powyższym. Komentowanie jest kluczem, więc można rozważyć kwalifikacyjna klamry zamykające niektóre:

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

... itd

Chciałbym również spojrzeć na dostosowanie wsporniki poprawnie (w pierwszym clance, swoimi }} jest trochę tajemnicze).

Jeśli chodzi o "ogólne" strategie zagnieżdżania, jedyną inną sugestią, jaką mam, jest przeniesienie kodu na inne funkcje. Oczywiście oznacza to, że funkcja została zamieniona w pamięci, ale może być bardziej czytelna.

Można również rozważyć konkretną strategię związaną z tym kodem. Na przykład, zamiast ręcznie bindować można użyć funkcji live w pewien sposób, aby upewnić się, że jest ona wykonywana automatycznie?

Na zupełnie niezwiązanej uwadze, prawdopodobnie powinieneś dodać trochę ; na końcu każdej z nawiasów!