Adding and overriding functions in existing plugin

Question

Below is my my plugin:

(function($) {
    $.fn.myPlugin = function(options) {
        var opt = $.extend({}, $.fn.myPlugin.defaults, options);

        this.foo()
        {
            alert('test');
        }


    }
    $.fn.myPlugin.defaults = {
    };
});

Now I want to extend it without touching the original plugin i.e I want the full feature of existing plugin + the new features which I want. Below are the new things I need:

First: Name of the new plugin "myPlugin2"

Second: The "foo" function of the existing plugin should be overridden in the new plugin with this:

function foo() {
    alert('test2');
}

Third: I need to add one more method to my new plugin say function foo2(){} .

Can you help me in achieving this?

have you looked at docs.jquery.com/Plugins/Authoring ? it may help... — Alex Pacurar
– Alex Pacurar, Commented May 18, 2011 at 13:21

Jose Rui Santos · Accepted Answer · 2011-05-18 17:35:51Z

You need to define your default name and foo events in your defaults declaration:

$.fn.myPlugin.defaults = {
  name: 'test',
  onFoo: function() {
           alert(this.name);
         },
  onFoo2: function() {
           // your default behaviour for foo2
         }
};

Then, when someone calls your plugin, they can override the defaults, in this case name:

  $("#myControl").myPlugin({
    name: 'test2'
  });

Note that they don't need to override onFoo, because it will display an alert with test2. Anyway, if they need to override it to do something different, then they should:

  $("#myControl").myPlugin({
    name: 'test2',
    onFoo: function() {
             alert('onFoo overrired');
           },
    onFoo2: function() {
             alert('onFoo2 overrired');
           }
  });

In your plugin, you invoke the foo methods as

(function($) {
    $.fn.myPlugin = function(options) {
        var opt = $.extend({}, $.fn.myPlugin.defaults, options);

        // if onFoo is defined then call it
        if (opt.onFoo) {
          opt.onFoo();
        }

        // if onFoo2 is defined then call it
        if (opt.onFoo2) {
          opt.onFoo2();
        }
    }

    $.fn.myPlugin.defaults = {
       name: 'test',
       onFoo: function() {
                alert(this.name);
              },
       onFoo2: function() {
                // your default behaviour for foo2
              }
    };
});

You should use this technique for public methods/properties that you want to expose to the users of your plugin. I didn't tested but should work

Edit You need to check if the event is set before calling it:

// if onFoo is defined (not null) then call it
if (opt.onFoo) {
  opt.onFoo();
}

You are setting already an event for onFoo and onFoo2, but the user of your plugin might choose to disable it:

  $("#myControl").myPlugin({
    onFoo: null
  });

In this case, although you have defined an onFoo event, the user of your plugin decided to ignore it, by setting it to null. So, even though you have defined an event, you never know what others will do with it, therefore it's better to be on the safe side and check for nullity.

Once again, you need to be careful with what you expose to the end user, because setting/unsetting events should not break the basic functionality of your plugin

One question what is the need of these too if (opt.onFoo) { opt.onFoo(); } since I am already doing $.extend({}, $.fn.myPlugin.defaults, options);
@Rocky Singh See the clarification that I added in my answer

Gary Green · Accepted Answer · 2011-05-18 13:38:11Z

1

If this is any decently coded plugin, you shouldn't be able to alter it's methods. It should of made anything which isn't meant to be invoked an internal function i.e.:

$.fn.oldPlugin = function() {

    var foo = function() {
       alert('old code');
    };
};

There is no way to invoke foo or overwrite it.

Should you not need to change any of the methods/functions then you can use $.extend($.fn.pluginName, {/*your methods/properties*/};

What it all really comes down to is:

How the plugin you want to extend is coded
If you want to overwrite or just extend on it's functionality

edited May 18, 2011 at 13:38

answered May 18, 2011 at 13:33

Gary Green

22.4k6 gold badges52 silver badges76 bronze badges

Collectives™ on Stack Overflow

Adding and overriding functions in existing plugin

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related