As Yet Unclassified

JavaScript is a prototyping programming language, and as such, has many different ways to define classes or create objects. If you try to search for a tutorial on object-oriented programming in JavaScript, you’ll find that each tutorial has its own way of doing things. It can be very confusing.

Fortunately, jQuery UI has a widget framework, that makes setting up object-oriented widgets easy. After using it, I wanted to use it for everything, until I find something at least as easy to use as it. I didn’t, however, want to include a large dependency like jQuery UI if I was only using it for its widget framework.

I was glad to find, after a little experimentation with the Build Your Download page, that I can get jQuery UI’s widget framework in a download of only 9.06 kb minified. You can get this by clicking Deselect All and checking UI Core. After that, the theme drop-down box should be set to No Theme.

I made a geocoding widget for Django in a project for a client using this. It simplified my code a great deal.

One thing it does that’s good for projects that might have a lot of custom widgets on one page (which was not the case for this one) is it takes care of using jQuery’s data() method, which stores objects in a way that is less likely to cause memory leak issues in Internet Explorer than storing objects using closures.

Here’s an example I whipped together to show some of what I learned from reading about the jQuery Event object. It shows that events can pass data as they bubble up.

1. gather.html – demo (my site)
2. gather.html – demo source (github)

jQuery has convenience functions for events like click and keydown, and lets you create and use your own events with bind() and trigger(), but doesn’t provide a way to create your own convenience functions for custom events. I took several lines of code from the jQuery source and created a plugin that makes creating convenience functions as easy as calling $.convenience(‘nameOfFunction’). Then I can bind or trigger an event simply by calling nameOfFunction() on the selector. This should be apparent by looking at the demo source (the third link).

1. jquery.convenience.js - plugin source (github)
2. convenience.html – demo (my site)
3. convenience.html – demo source (github)

The example shows one feature of custom events that I overlooked: propagation.