Question

This is a general kind of question.

Very often, I need to write JavaScript for web pages. Keeping in mind best practices, unobtrusive js, etc. I have my JavaScript in separate *.js files. Every page gets its own js file. What’s been somewhat bothering me lately, is the mix of presentational code with functional code that I always end up with.

So, for example, I would assign a .click handler to an element. On that click the element must change its appearance and an AJAX call must be made to the server. So, right now, I’d do both of these things inside that .click handler. It might get bulky depending on what needs to be accomplished. When I come back to these blocks of code after not touching them for a week, I often feel like it takes away too much time to trace through all lines of code when I only need to fix something with appearance.

Anyway, any idea on architecture/design for presentational js vs. functional js? Keep them in one file, but break into separate functions? Break them into 2 separate files? Leave them alone?

Answer 1

I would tend to keep them all together that are related regarding the event that kicked them off, but sometimes put a function in to call to do a specific group of things.
Example:

function domyUIstuff(myevent, myselector)
{
// stuff here
};
function domyBehaviorStuff(myevent, myselector)
{
//dostuffhere
};
$(selector).click(function(e)
{
   domyUIstuff(e,$(this));
   domyBehaviorStuff(e,$(this));
};

Side note: I do keep stuff separate (I do a lot of asp.net stuff) from different user controls – I create a myusercontrol.js file for my myusercontrol.ascx as well as a mypage.js file for my mypage.aspx which tends to cut down on the “noise” when I debug – I put my “generic” functions in the page file that I might call from my controls such as generic ajax message handlers or generic “utility” functions.