create and extend a jquery plugin

Question

I have gone through various topics posted in stackoverflow and other forums, which explain how to write and extend a jquery plugin.

I wrote the following sample code to test my understanding

(function( $ ) {
  $.fn.myPlugin = function() {

    this.firstAPI(param)
    {
        alert(param);
     };
     return this;
  };
})( jQuery );

Now I am extending the plugin.

function($) {
    var extensionMethods = {
            secondAPI: function(param){
            alert(param);
        }
    };

    $.extend(true, $[fn][myPlugin].prototype, extensionMethods);

})(jQuery);

Now, I am accessing the plugin $().myPlugin().firstAPI("Hello"), which is successfully calling the API and showing the alert message. But I cannot access the secondAPI by $().myPlugin().secondAPI("Hello"). $().myPlugin() object doesn't have the secondAPI.

Also, one thing I have observed, myPlugin object is initialized every time whenever I invoke a API on $().myPlugin() object. I have also tried to pass a DOM element $('#divid') and then call. It failed in this scenario also.

Could you let us know which tutorial you have looked at so far to generate this code. It will help to see which plugin architecture you are using. There are a few different ones, and I personally prefer the on that is discussed in the official plugin tutorial and used by the jQuery UI team. — Simon, Mar 16 '12 at 06:15
http://forum.jquery.com/topic/how-to-extend-plugins-ui-plugins — Sanmoy, Mar 16 '12 at 08:55
http://stackoverflow.com/questions/2050985/best-way-to-extend-a-jquery-plugin — Sanmoy, Mar 16 '12 at 08:55

Deepu · Answer 1 · 2012-03-16T09:29:47.463

1

I guess This is not the correct way to extend a plugin read this http://docs.jquery.com/Plugins/Authoring

When you use $.extend(true, $['fn']['myPlugin'].prototype, extensionMethods);, u missed the quotes I guess, you are actually adding a function to the closure scope of myPlugin it cannot be called as $().myPlugin().Function();, if u use $.extend($.fn.myPlugin, extensionMethods); it will add a method to the myPlugin context but does not actually extend it.

Read this https://github.com/mhuggins/jquery-ui-autocomplete-hints/blob/master/jquery.autocomplete.js

edited Mar 16 '12 at 09:29

answered Mar 16 '12 at 07:11

Deepu

1,241
1
11
24

I'm too tired to keep at it, but if you want to keep poking away, here's a fiddle so far: http://jsfiddle.net/wGCkn/3/ -- Using the recommended method (passing in an object literal first) a subsequent `$.extend($.fn.myPlugin, extensionMethods)` doesn't add the additional method, either. I give up for now. – Greg Pettit Mar 16 '12 at 07:15
Yup both ways u will just add it to the closure, and it is not the recommended way either – Deepu Mar 16 '12 at 09:33
was approaching my attempt as a learning exercise, so I didn't mean to imply that I'm an authority on what's recommended. I simply meant that here: http://docs.jquery.com/Plugins/Authoring#Defaults_and_Options in the "Plugin Methods" section they give the clear message "THIS IS GOOD !!" for passing an object literal of methods into the new plugin object. It wouldn't be the first time the jQuery API docs gave misleading or incomplete information, though. – Greg Pettit Mar 16 '12 at 14:45
I do agree there is no hard and fast rule in what you can and cannot do in open source all is well as long as ones requirement is fullfilled with efficiency :) – Deepu Mar 20 '12 at 03:55

Simon · Answer 2 · 2012-03-16T12:25:51.083

EDIT : Based on the references provided.

The reason your secondAPI method doesn't work is that $.fn.myPlugin is a Function object so inherits from that prototype chain. To create an object instance that inherits from the prototype of $.fn.myPlugin you need to use the new operator to create a new $.fn.myPlugin object first.

It appears that the method you are using is based on the jQuery widget factory. Have a look at the source for jQuery UI Widget (specifically the $.widget method) and then at the source of something that uses the jQuery UI widget factory.

Firstly the Widget takes as its second argument, the constructor for the object you want to extend. Internally it then creates an object of that type using the new operator and then extends that object using the method you have shown. After that it creates your plugin logic using the $.widget.bridge method so that you can use the plugin in the normal fashion, ie. $(element).myPlugin();. You can then call any functions using $(element).myPlugin("apiMethod");

I suggest you read the source and documentation to understand what is going on. Then it may be a good idea for you to use the Widget Factory for your own plugins. It really is a fine piece of work and saves you a lot of effort in coding the extension part of your own plugins.

create and extend a jquery plugin

2 Answers2