$(’.selector’).button(’option’, ‘text’, false);

First, you are totally right, it is $.fn.extend. I have updated the post to reflect that.

As far as the “class and function” approach, we haven’t gotten to the true interaction with it yet. However, it is the design pattern employed by jQuery UI for their widgets. If you instantiate a `dialog` for instance, then call `$(”#dialog”).data(’dialog’)` you can retrieve the instance of the Widget class for the dialog.

A good use case I had for it was a rating system. There were 20 rating widgets, who all maintained their own state independently of the others. However, I also had a ScoreKeeper of sorts that listened for “rating_changed” events on the Rating widgets, and then would access each of the widgets using (through a wrapper) the `data(’RatingWidget’)` and tally up the total.

This method allows you to build fully independent objects that can interact with each other as needed. By exposing the Class behind the object via `data` you allow your widget to be extended or manipulated by other widgets on the page. Of course you can use standard closures to limit what is available on the object. When `.remove()` is called all the `data` is removed from the element.

Back to jQuery UI, as a final example, when you call `.dialog(’open’)` it is actually finding the instance via `data` then applying the function to that instance behind the scenes. You can check it out starting at line 284 in ui.core.js (1.7.2).

var instance = new MyClass( $(’#foo’) );

One thing, shouldn’t it be “jQuery.fn.extend”, not “jQuery.extend” (which extends the jQuery namespace)?

The “class and function” approach is interesting. I’m not too sure I would like having to access a module’s API via data():

$(’#foo’).data(’MyClass’).doSomething(); // doSomething, a method in MyClass’ prototype

It just seems wrong. Is this just a solution to a problem that doesn’t exist? If an instance of MyClass needs to be retained (for whatever reason), then I think it would be better to instantiate the class outside of the plugin mechanism and assign the produced instance to a var, like you normally would:

var instance = MyClass( $(’#foo’) );

There was recently an interesting post on StackOverflow that discussed the “limitations” of jQuery’s plugin API, specifically for more complex solutions that require access to an instance: http://stackoverflow.com/questions/2000597/jquery-vs-yahoo-ui-api-design/2000707