JQuery and Organized Code

Question

I've been struggling lately with understanding the best way to organize jQuery code. I asked one more question before, and I don't think I was specific enough ( found in this question here ).

My problem is that the richer you create the application, the faster your client side gets out of control. Consider this situation ...

//Let start some jQuery $(function() { var container = $("#inputContainer"); //Okay let list text fields that can be updated for(var i=0; i < 5; i++) { //okay let add an event for when a field changes $("<input/>").change(function() { //okay something changed, let update the server $.ajax({ success:function(data) { //Okay - no problem from the server... let update //the bindings on our input fields $.each(container.children(), function(j,w) { //YIKES!! We're deep in here now!! $(w).unbind().change(function() { //Then insanity starts... }); // end some function }); //end some loop } // what was this again? }); //ending something... not sure anymore }).appendTo(container); //input added to the page... logic WAY split apart }; //the first loop - whew! almost out! }); //The start of the code!! 

Now this situation is not too far from impossibility. I'm not saying that this is the right way to do this, but it’s not uncommon to find several levels in the jQuery team and start wondering how much logic can be added before the screen starts to melt.

My question is: how do people manage this or organize to limit the complexity of their code?

I have listed how I do this in another post ...

Answer 1

I just want to add to what was said earlier that this:

 $.each(container.children(), function(j,w) { $(w).unbind().change(function() { ... }); }); 

can be optimized for:

 container.children().unbind().change(function() { ... }); 

Everything about the chain, a great way to simplify your code.

Answer 2

So far I have done it like this:

 // initial description of this code block $(function() { var container = $("#inputContainer"); for(var i=0; i < 5; i++) { $("<input/>").changed(inputChanged).appendTo(container); }; function inputChanged() { $.ajax({ success: inputChanged_onSuccess }); } function inputChanged_onSuccess(data) { $.each(container.children(), function(j,w) { $(w).unbind().changed(function() { //replace the insanity with another refactored function }); }); } }); 

In JavaScript, functions are first-class objects and therefore can be used as variables.

Answer 3

Well, for one, having a good IDE that understands javascript can help a lot, even if you just define the appropriate demarcation (braces, parsers, etc.).

If your code is really starting to get this complex, consider creating your own static object for organizing the mess - you don’t have to work so hard to keep everything anonymous.

 var aCustomObject = { container: $("#inputContainer"), initialize: function() { for(var i=0; i < 5; i++) { $("<input/>").changed( aCustomObject.changeHandler ); } }, changeHandler: function( event ) { $.ajax( {success: aCustomObject.ajaxSuccessHandler} ); }, ajaxSuccessHandler: function( data ) { $.each( aCustomObject.container.children(), aCustomObject.updateBindings ) }, updateBindings: function( j, w ) { $(w).unbind().changed( function(){} ); } } aCustomObject.initialize(); 

Answer 4

In my opinion, the method described by BaileyP I use for starters, then I usually abstract everything into more repeating fragments, especially when some functions are expanded to such an extent that it is easier to abstract it into a plugin, and then it is specific to one site.

As long as you save large blocks of code in a separate file and code well, you can end up with really clean syntax.

 // Page specific code jQuery(function() { for(var i = 0; i < 5; i++) { $("<input/>").bindWithServer("#inputContainer"); } }); // Nicely abstracted code jQuery.fn.bindWithServer = function(container) { this.change(function() { jQuery.ajax({ url: 'http://example.com/', success: function() { jQuery(container).unbindChildren(); } }); }); } jQuery.fn.unbindChildren = function() { this.children().each(function() { jQuery(this).unbind().change(function() {}); }); } 

Answer 5

Someone wrote a post on a similar topic.

JQuery code Should not be Ugly

For example, the author, Steve Wellens, suggests not using anonymous functions because it makes the code more difficult to read. Instead, push the function link into jQuery methods, for example:

 $(document).ready(DocReady); function DocReady() { AssignClickToToggleButtons(); ColorCodeTextBoxes(); } 

Another benefit of the article is to assign the jQuery object to a specific variable, which makes the code cleaner, less dependent on the actual jQuery object, and it's easier to say what a particular line of code does:

 function ColorCodeTextBoxes() { var TextBoxes = $(":text.DataEntry"); TextBoxes.each(function() { if (this.value == "") this.style.backgroundColor = "yellow"; else this.style.backgroundColor = "White"; }); } 

Answer 6

Hold on to some anon functions in global scale functions (or your own namespace object), especially reusable functions, and it starts to look different from what you posted. Kind of how you relate to.

Answer 7

I described my approach in another post . Short form:

• do not mix javascript and HTML
• use classes (mainly to see your application as a collection of widgets)
• has only one block $ (document) .ready (...)
• send jQuery instances to your classes (instead of using plugins)

Answer 8

Use http://coffeescript.com/ ;)

 $ ->
   container = $ '#inputContainer'
   for i in [0 ... 5]
     $ ('<input />'). change ->
       $ .ajax success: (data) ->
         for w in container.children ()
           $ (w) .unbind (). change ->
             alert 'duh'