Granny's Programming Pearls
"inside of every large program is a small program struggling to get out"
JavaRanch.com/granny.jsp
Win a copy of Functional Reactive Programming this week in the Other Languages forum!
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

Template for extending jQuery

 
Alec Swan
Ranch Hand
Posts: 39
Java jQuery Spring
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 37
Java jQuery Spring
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 65218
95
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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 $.
 
Keith Wood
Author
Ranch Hand
Posts: 38
jQuery
  • Likes 1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Author and ninkuma
Marshal
Pie
Posts: 65218
95
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I'd wager that just that part is worth the price of the book itself.
 
Alec Swan
Ranch Hand
Posts: 39
Java jQuery Spring
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Thank you all for the informative answers.
 
It is sorta covered in the JavaRanch Style Guide.
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic