Presentational js vs. functional js: Separate them? General architecture?

Question

Hello! 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...

Anyways, any ideas on architecture/design for presentational js vs. functional js? Keep them in one file, but brake into separate functions? Brake them into 2 separate files? Leave them alone?

Thanks!

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.

Answer 2

I find it useful to have three JS files in each dynamically generated page. The general functions that are re-used everywhere, the project specific functions that are used all over the project and the page specific js file. This way you have a handle on what is "reusable" and what isn't. This also encourages you to "promote" your code. As you "promote" it, you will find yourself separating it more and more into UI or Behavior. As more stuff gets separated you may find yourself including 6 files or just breaking each file up with a package structure as you suggested earlier UIFunctions().doStuff()... However if you have to prefix your stuff with PageName you haven't promoted your code and maybe it is time you do so :-)

That is just how I have been doing it. Hope it helps.