Template for extending jQuery

[Alec Swan]

I saw quite a few different ways to extend jQuery, e.g. through jQuery.extend(), jQuery.fn.extend(), $.extend(true, $[ Namespace ][ pluginName ].prototype, extensionMethods), etc.
Could you post a template that you recommend using for extending jQuery?

Thanks,

Alec

[Michael A Hoffman]

Alec,

I've found leveraging jQuery Widgets to be the best approach; however, it is just personal preference. You can read more about jQuery UI Widgets here:

http://wiki.jqueryui.com/w/page/12138135/Widget%20factory

and here:

https://github.com/scottgonzalez/widget-factory-docs/

Here are three tutorials:

http://bililite.nfshost.com/blog/understanding-jquery-ui-widgets-a-tutorial/

http://bililite.nfshost.com/blog/extending-jquery-ui-widgets/

http://blog.nemikor.com/2010/05/15/building-stateful-jquery-plugins/

Finally, I pulled this from a comment in the link from nfshost:

(function($) {

$.widget(“ui.widgetName”, {

// options: provided by framework
// element: provided by framework

_init: function() {

},

log: function(msg) {
if(!this.options.log) return;

if(window.console && console.log) { // firebug logger
console.log(msg);
}
},

destroy: function() {
$.widget.prototype.apply(this, arguments); // default destroy
}

});

$.extend($.ui.widgetName, {
version: “@VERSION”,
getter: “length “, //for methods that are getters, not chainables

defaults: {
optionA: “bar”,
suffixA: “foo”
}
});

})(jQuery);
/* END */

Thanks for that template goes to TheToolman

[Bear Bibeault]

All of that assumes that one is extending jQuery UI as opposed to jQuery core.

As with a lot of things, jQuery gives us multiple ways to do something. Most plugins of my acquaintance simply use the following to add wrapper methods:

$.fn.whatever = function(params) { ... }

I'm interested to hear Keith's take on the various approaches.

It''s also a good idea to always do the above in an immediate function (in case someone's co-opted $):

(function($){

...

})(jQuery);

or use jQuery rather than $.

[Keith Wood]

The different extension points are used for different purposes. Extending jQuery.fn creates a function that operates on a collection of DOM elements resulting from a selector or traversal process, such as graphical sliders, datepickers, etc. Extending jQuery directly allows you to create utility or function plugins that don't work on DOM elements directly, e.g. the cookie plugin. jQuery includes many other extension points as well - for selectors, for animations, for ajax processing, etc. These are all covered in the book.

I use my own plugin framework unless I'm specifically writing a jQuery UI widget in which case I use the Widget framework.

[Bear Bibeault]

I'd wager that just that part is worth the price of the book itself.

[Alec Swan]

Thank you all for the informative answers.