Lets face it. jQuery has made writing JavaScript cool and fun. JavaScript had a bad reputation in my world for a long time, and for no really good reason. JavaScript is an amazing language. Its the crappy compatibility browser implementation of that really sucks. Anyway, Im digressing already.
We write a lot of JavaScript to make the UI snazzy, attractive, quick and easy to use. Im sure we all write a lot of a JavaScript. Im sure we all have tons of JS files sitting around and we include a handful of them on each page, mix and match, pick and choose. What a mess!
Besides the nightmare of having to know which files to include, on which pages, this method is also a performance drag. Each page needs to request 15 to 20 JS files. Sure the page browser is going to cache some of them, but we still pay for the expense in some way or another.
In addition to the performance problem, there is a deployment headache where we have to minify 30 different files. Sure we could script that, but still sounds like a headache.
So how do I have only one JS file (minus the core jQuery stuff I pull from a CDN)? Plug-ins! Every bit of JS I use on my pages is wrapped in a jQuery plug-in. Of course there is a tiny bit of JS that invokes the plug-in that is either directly on the page or in its own JS file, but in comparison of lines, it is statistically insignificant.
What this lets me do is combine every JS file I have into a single giant JS file, minify that, and link it once. Everything I could possibly do is pulled down in that one file, one time, via one request.
Im sure we all have JS like the following.
$().ready(function(){
$(".myButton").click(function(){
alert("You clicked me.");
$(".message")
.css("color","blue")
.text("my message is blue");
});
});
Pretty typical jQuery. Everyone likes blue messages. What I don't like about this script is I can't drop it on the page where I don't want that to happen. If it's in my master JS file, every page is going to get this action, and that's probably not what I want.
So let's make a plug-in for it. This is my basic pattern for creating a jQuery plug-in.
(function($){
$.fn.messageForm = function(options){
var defaults = {};
var params = $.extend(options, defaults);
// do stuff here
return this;
}
})(jQuery);
There are a lot of websites out there that can explain the pattern better than I can, but the basics are simple.
First, we create an anonymous function with a $ parameter and pass the jQuery object to it. This avoids any naming conflicts we might have with $ and ensures we can use it in our plug-in.
We setup some default values, although empty are at this point, and then merge them with the options that are passed into the call to the plug-in. This lets us easily parameterize the call without adding loads of new variables.
Lastly we return the jQuery object the plug-in was called on so we can allow chaining of other plug-ins.
Throwing in the custom code and we end up with this.
(function($){
$.fn.messageForm = function(options){
var defaults = {
buttonSelector : ".myButton",
messageSelector : ".message",
messageColor : "blue"
};
var params = $.extend(options, defaults);
var $this = this;
function buttonClick(){
alert("You clicked me.");
$(params.messageSelector,$this)
.css("color",params.messageColor)
.text("my message is " + params.messageColor);
}
$(params.buttonSelector,$this).click(buttonClick);
return this;
}
})(jQuery);
What I can do now is put this JS in a file next to dozens of other similar plug-ins and serve it up. We still have to call it from somewhere though.
$().ready(function(){
$("body").messageForm();
});
I know the purists out there would scream, but I dont mind tacking this on the bottom of my HTML. You can pass some parameters to it as well.
$().ready(function(){
$("body").messageForm({messageColor:"red"});
});
So Im a n00b in some areas and it is painful finding this out sometimes. I spent most of the morning trying to figure out why my ASP.Net Web Site application wasnt routing to my MVC controller that is inside of my ASP.Net MVC Area. 
