Comments on: jQuery Plugin Design Patterns: Part I

By: ZFDesign

ZFDesign — Tue, 20 Dec 2011 15:08:27 +0000

Would there be a Christmas special Part 2 by any chance? Considering keeping a promise for Part 3 and 4 as mentioned in the article? It is so difficult to come across well written articles for the remaining parts that those are bound to be an immediate hit.

By: Theodor

Theodor — Wed, 14 Sep 2011 11:41:29 +0000

And it is much faster to add a plugin with $.fn. than $.extend() – so, that’s another reason to use the more strict way ;)

By: Joe Chapman

Joe Chapman — Tue, 19 Jul 2011 14:34:29 +0000

What a coincidence, I had just been reading this; http://2007-2010.lovemikeg.com/2009/06/26/the-factory-pattern-in-javascript/

By: pomeh

pomeh — Sat, 02 Jul 2011 17:11:50 +0000

Nice article. Thanks =)

However, I disagree about the use of the extend method. That method make the stuff, but it make very (too?) easy to add more than one method to the $.fn object. And adding more than one namespace per plugin should be avoided. This is referenced in the best practices in the Plugin Authoring (http://docs.jquery.com/Plugins/Authoring) as:
“Don’t clutter the jQuery.fn object with more than one namespace per plugin.”

Using the “$.fn.myPlugin = function(){};” forces the developer to use one and only one name per plugin. Also, the Plugin Authoring describe a method to use multiples methods per plugin without pollute the $.fn namespace.

By: Tomislav Simić

Tomislav Simić — Tue, 11 Jan 2011 11:40:20 +0000

I’ve been wandering for a few days searching for concise usable info like in this articke. It is really missing rest of the series as it feels like it would be of a great help to jq-plugin-dev-newborn.

By: Rob

Rob — Sat, 13 Nov 2010 20:17:26 +0000

Great article! Neatly solves the problem of maintaining state.

Will there be a Part 2 Doug?

By: Bob Spryn

Bob Spryn — Wed, 02 Jun 2010 21:55:43 +0000

Part 2 coming?

By: Christoph

Christoph — Wed, 14 Apr 2010 15:09:09 +0000

Looking forward to Part 2!!!

By: Kris

Kris — Thu, 01 Apr 2010 13:49:19 +0000

Part || Please

By: Stephen

Stephen — Wed, 10 Mar 2010 15:31:04 +0000

Hi, really nice discussion! I’m actually stuck in creating something like the rating widget you described wherein it maintain it’s own data …is there any chance you can explain further especially how jquery ui is designed to allow something like updating it’s option..

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

By: This Weeks Twitter Design News Roundup N.21 - Speckyboy Design Magazine

This Weeks Twitter Design News Roundup N.21 - Speckyboy Design Magazine — Tue, 26 Jan 2010 08:57:55 +0000

[...] jQuery Plugin Design Patterns: Part I [...]

By: Linkhub – Woche 04-2010 « pehbehbeh

Linkhub – Woche 04-2010 « pehbehbeh — Sun, 24 Jan 2010 16:52:06 +0000

[...] Wie sollten jQuery Plugins aussehen? – Auf Fuel Your Coding wurde eine Artikelserie zu jQuery Plugins Design Patterns gestartet. [...]

By: sanakan

sanakan — Fri, 22 Jan 2010 18:30:14 +0000

When using Widget Factory, Could I use Mootools(or Prototype) to creat the Class ,then using jQuery “data()” its object ,manipulating DOM ? I like the OO concept ,also like the jQuery dom magic.

By: Douglas Neiner

Douglas Neiner — Thu, 21 Jan 2010 17:25:23 +0000

I have favorited that SO article now. I will throw my two cents in when I get a moment :) Thanks for pointing it out!

By: Douglas Neiner

Douglas Neiner — Thu, 21 Jan 2010 17:23:08 +0000

James, I always appreciate when you stop over and discus our posts here!

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).