It was fun going over your code. I haven't played with 1.4 for a while. Well here are some suggestions:
- Place a semicolon before your IIFE as a precaution against statements without a separator. Putting a semicolon before the function prevents the function from becoming an argument. This can happen when you minify and concat JS files.
Something like this:
(function(){...foo...})()(function(){...bar...})() //No separator :/
(function(){...foo...})();(function(){...bar...})() //But you smart feller put in a semicolon
- You bind a click to everything except the $bubble? Doesn't that seem a bit excessive?
Right here:
$('html').not(this).bind('click', function() {
that.hideBubble();
});
- About prototypes, it can be difficult to grasp at first, but keep at it, you'll have an "Aha!" moment soon enough where it will all become clear. My suggestion is read and read and practice. Here are some reading materials on the subject I would recommend:
http://msdn.microsoft.com/en-us/magazine/ff852808.aspx
For your plugin's data I would suggest Handlebars.js. It's an awesome templating engine that works with Mustache, so if you've used that before this one should be easy.
There's a library called Underscore.js which provides functional programming support. But I think the
_nameyou're referring to is simply a naming convention and does not carry any meaning to Javascript.Your entire
init:function is there to simply call another function? Are you planning on putting more in there? If not I would suggest just going straight to binding.You use
$(input)several times. You should cache that selector like you do elsewhere.This is just my nit-pickyness but I don't like single line functions. I just think they're harder to read. But don't lose any sleep over that.
UPDATE:
If you really want to bind a click event to everything except $bubble, you can do it (jQuery 1.4 friendly) like this:
$(document).bind('click', function (e) {
// Do whatever you want; the event that'd fire if the "special" element has been clicked on has been cancelled.
});
$('.help-bubble').bind('click', function(e) {
e.stopPropagation();
});
Now, what I would suggest you do instead is create a div outside of your main stack to handle this. Imagine an absolutely positioned div behind most of the page, and you only bind the event once.