JQuery - How Javascript should be

I go for months without posting and then drop 2 in one night...

Let me first get something straight: I'm a focused lazy developer. If there's something already written that I can use to solve a problem I'll use it. As long as it's half decent and does what I need. But this has a flip side in that I code my own stuff with reusability in mind. Why spend hours solving a problem only to revisit it in another project a month down the line?

So I must say that for a long time I didn't really get Javascript. There didn't seem to be many opportunities for code reuse: each animation or validation check I did seemed wholly connected to one particular purpose. I struggled to generalise my solutions to enough of a degree so that they could be reused.

The impact of this was that I shied away from Javascript whenever I could: so when Microsoft came along with the AJAX Toolkit I was in heaven. Here was a collection of cool controls I could just drop onto a form and get a popup div, or a water mark on a text box, or a whole bunch of other stuff.

But at the back of my mind I couldn't help thinking this was all overkill. If I want a div to popup when I click a link, surely all I need is a CSS style on it, and swap the display style from javascript? So why have that as a control? Simplicity of implementation. It's easy. The lazy part of me liked that.

The focused part didn't. The focused part wanted to come up with a library that contained a load of these common functions so I didn't have to re-invent them on every project.

JQuery does just that, and more. I won't pollute the web with yet another JQuery tutorial (go see Rick Strahl if you want one) but I will say this. If you're a developer who likes to separate their concerns, take a look.

We're all familiar with layering applications: View-Model-Controller, Interface-Business-Data access-- it all amounts to the same thing. We're separating each element of the application so that we have structure. Structure eases maintainability. It removes bad smells. It increases orthogonality. For want of a better term--It Just Feels Right.

So why stick Javascript code in HTML? Isn't that polluting the structure of the document with behaviour?

Linking to a CSS file allows us to separate styling information from our HTML (or ASPX if you're into ASP.Net like me), and we all know you can link to Javascript files in the same way. If you're anything like I was though, all those Javascript files will contain is common "utility" functions. You'll still have "onclick" attributes in your HTML calling Javascript methods.

JQuery allows you to get rid of these onclick calls. Here's what I do:

• Have a JS file per page in your application
• Link to this JS file in your page as you normally link to script files
• Do not include any script in your page what so ever
  
• In the page's JS file, make use of the $(document).ready call to wire up your event handlers

For example: you have a floating div ("helpDiv") where you want to toggle the visibility based the click of a link ("lnkToggleHelp"). I used to add an onlick attribute to the anchor tag calling a Javascript function that would toggle the visibility.

In JQuery you can do this in your page's JS file:

$("#lnkToggleHelp").click(function(event){
event.preventDefault();
$("#helpDiv").toggle();
});

Which separates the behaviour of the page from the structure: leaving you with 3 separate but linked strands of a page: Style (CSS), Structure (HTML), and Behaviour (JS files incorporating JQuery). To me it's a whole lot neater.

That and all the effects and manipulation that you can do with JQuery means I can't see myself writing Javascript in the future without using JQuery.