JQuery / JavaScript: reorganizing nested functions

Question

I have this interesting jQuery function. It basically adds a click handler for the link, and when it is clicked it will load the form to allow the user to edit the content. and the form is submitted by AJAX and will display a successful message when it is done.

Outline below; Needless to say, it's dirty. I could use each callback method as a class method. What other ways to reorganize nested functions? I am also interested to know if there are ways that variables declare in the parent function that retain their value right up to the nested function after 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

I think the interesting part of your question is how to refactor without losing access to the closure variables. Here is my suggestion:

Version one: nested, with closing and access to the variable:

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

The second version: less nested, but without closing and without accessing variables:

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

Version three: fewer nested and with unnamed functions and parameters to gain access to closing variables:

 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

You can easily reorganize this to make it more readable. The key concept is that you can refer to named functions both as callbacks and anonymous. For example:

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

My preference is always to give the names of the functions according to what they are doing (for example, loadImage , not the event you intend to clickLink ) (for example, clickLink . This makes your code more understandable and makes subsequent changes much easier In this case, I would structure my code as follows:

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

I also advise you to read the Code Organization in jqfundamentals , which gives a similar approach to this using an object literal.

Answer 3

Interest Ask. Personally, I am not against the above. Commenting is key, so you might want to consider closing braces with:

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

... etc.

I would also look at the correct alignment of the brackets (at the beginning, your }} little mysterious).

When it comes to “general” investment strategies, the only other suggestion I have is to translate the code from other functions. Of course, this means that you have a function that is decalcified in memory, but can make it more readable.

You can also consider the specific strategy associated with this code. For example, instead of manually binding submit to new_form , can you somehow use the live function to make sure it is done automatically?

In a completely unrelated note, you should add a few ; at the end of each squared line!