What is a way to make JQuery plugin extendible?

Question

I try to move some common application specific actions to jQuery plug-in by:

$.fn.extpoint = function() {...}

But I don't want to declare several extension points:

$.fn.extpoint1 = function() {...}
$.fn.extpoint2 = function() {...}
...

Instead I would like to use syntax sugar like:

$("#id").extpoint.func1().extpoint.func2()

With definition:

$.fn.extpoint = {}
$.fn.extpoint.func1 = function() {
    this.val();
    this.data("ip");
    ...
    return this;
}

and call:

$("#id").extpoint.func1(...)

this point to $.fn.extpoint (dictionary with func1, func2, ... elements) instead of original jQuery object, when func1 evaluated.

Is it possible to make jQuery plug-in extendible?

PS. It is possible to pass function name as first argument to $.fn.extpoint and implement $.fn.extpoint('extend', func) call to extend (save to internal dictionary association between names and implementations) extension point. In that case use-cases look like:

$("#id").extpoint('func1', ...).extpoint('func2', ...)

but I look for way to make in more syntactic sugar...

It won't work this way: `$("#id").extpoint.func1().extpoint.func2()` because func1 and func2 wouldn't have access to `$("#id")` — Kevin B, Mar 13 '13 at 15:14
@KevinB Yea, I see, but look for way to avoid this with some unknown tricks... +1 — gavenkoa, Mar 13 '13 at 17:44
There was a post on the jQuery forums a year or two ago where someone came up with a way for this to work, but it was very complicated and i can't remember how it was done exactly. I'd suggest searching for it there, i can't find it. — Kevin B, Mar 13 '13 at 17:46
Seems I found thread you mention: http://groups.google.com/group/jquery-dev/browse_thread/thread/664cb89b43ccb92c. — gavenkoa, Mar 13 '13 at 18:42
Working code example at: http://code.google.com/p/jquery-plugin-dev/source/browse/trunk/jquery.plugin.js — gavenkoa, Mar 13 '13 at 18:42

score 2 · Answer 1 · edited May 23 '17 at 11:45

The task I ask is hard to implement.

Official docs say:

Under no circumstance should a single plugin ever claim more than one namespace in the jQuery.fn object:

(function( $ ){
  $.fn.tooltip = function( options ) { 
    // THIS
  };
  $.fn.tooltipShow = function( ) {
   // IS
  };
  $.fn.tooltipHide = function( ) { 
    // BAD
  };
})( jQuery );

This is a discouraged because it clutters up the $.fn namespace. To remedy this, you should collect all of your plugin's methods in an object literal and call them by passing the string name of the method to the plugin.

Another approach is maintain link to this as in http://code.google.com/p/jquery-plugin-dev/source/browse/trunk/jquery.plugin.js

So your calls looks like:

$.fn.addPlugin('test2', {
    __construct : function(alertText) { alert(alertText); },
    alertAttr   : function(attr) { alert($(this).attr(attr)); return this; },
    alertText   : function() { alert($(this).text()); return this; }
});

$('#test2').bind('click', function() {
     var btn = $(this);

     btn.test2('constructing...').alertAttr('id').alertText().jQuery.text('clicked!');

     setTimeout(function() {
             btn.text('test2');
     }, 1000);
});

Some related links:

Old style plug-in extention:

score 1 · Answer 2 · answered Mar 13 '13 at 15:15

1

Here is an overview of creating a plugin. I believe what you are asking about is called "chaining". It is what makes jQuery so easy to use, and it's good that you want to make sure that you are implementing it correctly.

The key thing to remember while developing your plugin in regards to chaining is to always return this; from your methods. That is what will allow you to keep the chain going.

answered Mar 13 '13 at 15:15

BinaryTox1n

3,486
1
36
44

Sorry I don't talk about chaining. But about making **jQuery plug-in** extendible in some consistent way as **jQuery** itself... – gavenkoa Mar 13 '13 at 17:42

What is a way to make JQuery plugin extendible?

2 Answers2