GeeCON Prague 2014*
The moose likes HTML, CSS and JavaScript and the fly likes Template for extending jQuery Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Template for extending jQuery" Watch "Template for extending jQuery" New topic
Author

Template for extending jQuery

Alec Swan
Ranch Hand

Joined: Feb 03, 2005
Posts: 39

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
Ranch Hand

Joined: Mar 04, 2009
Posts: 37

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
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61310
    
  66

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:

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 $):



or use jQuery rather than $.


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Keith Wood
Author
Ranch Hand

Joined: Aug 28, 2012
Posts: 38

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.


Author of the upcoming "Extending jQuery" book from Manning.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61310
    
  66

I'd wager that just that part is worth the price of the book itself.
Alec Swan
Ranch Hand

Joined: Feb 03, 2005
Posts: 39

Thank you all for the informative answers.
 
GeeCON Prague 2014
 
subject: Template for extending jQuery