For way too long now I've taken advantage of the amazing bind method build into the Mootools core framework, so when I started using jQuery for a client, I was shocked at how basic the code was in comparison. I'm going to write a whole new article on that topic tomorrow, but for now my focus is object binding. I'm going to explain what it is, where to use it, and how to get it to work in jQuery without breaking anything!
If you haven't already checked out the Mootools framework, please do. It's an amazing library that I've used for many years, and swear by when coding complex applications. As I said above, a main feature I make use of is the ability to bind objects to functions as I call them, which helps a lot when creating custom classes and objects that are linked together, or I'm not sure what it's name space will be.
In Mootools, the syntax is as follows:
element.addEvent(‘click', clickFunction.bind(thisObj));The thisObj variable is a variable that you wish to be accessible through function.this from within the function. Here, I am assuming you have JavaScript knowledge and know what the this variable is. I may write some tutorials on core JavaScript later this month, but for now you're just going to have to learn JavaScript the old fashioned way; Google!
Unfortunately, this functionality isn't available in jQuery, but luckily it is baked right in the JavaScript Prototype Core as long as you know what you're doing. JavaScript is a very powerful language, that most developers don't even know it can do half of the things it is capable of. My favourite feature is it's prototype-based style of coding that is available, but rarely used by day-to-day developers. I'll let you do you're own reading for the full details,. but basically this allows you to inject custom code right into the core of the JavaScript language and add extremely powerful functionality.
Here is a basic example of prototyping.
String.prototype.displayAlert = function() { alert(this); };
("This will be displayed via alert").displayAlert();
(".. and this will be displayed too").displayAlert();What happens above, is you are injecting the displayAlert function onto the String object of the language, meaning any object with this type has access to the function you created. Pretty neat, huh?
Back to my main topic, object binding. You can use prototype to bind methods to all functions too, so I will use the code below (which I took from Mootools Core and modified slightly) to modify the this variable, without needing Mootools!
Function.prototype.bind=function(a,b){var c=this;return function(){if(!b&&!arguments.length)return c.call(a);return c.apply(a,b||arguments)}};I've trimmed the code down for you to copy and paste straight into your projects, and it can be used exactly the same way as you use the Mootools bind function I displayed above. Obviously if you already code using the Moootols framework, you don't need this function. I made this for use in projects without a Framework, or a none prototype based Framework such as jQuery.
I hope this helped someone by opening theirs eyes to a new way of coding or even by simply bringing a cool feature of Mootools into the jQuery Framework!