Extend functionality of function javascript

Question

I have a function that is declared like this:

    function Plugin(option) {
       //logic here
    }
    $.fn.validator = Plugin

I need to extend this function with some logic so that it does something more like this:

    function Plugin(option) {
       if (myvariable == true)
       {
           //seperate logic
           return;
       }
       //logic here
    }

The trick is that I need to add that if statement into the function dynamically, the code that has the Plugin function gets updated frequently and I don't want to re-add that logic every time the file changes. As of right now I just create the whole function with all the logic and replace the old one with it. But this seems like a lot of wasted code. I was hoping there was a way to simply merge them, so I tried.

    function Plugin(option) {
       //logic here
    }
    function extendedPlugin(option) {
       //seperate logic here
    }
  $.fn.validator = $.extend(Plugin, extendedPlugin);
    //or
  $.fn.extend($.fn.validator, extendedPlugin)

I've tried a couple variations of that logic at the bottom but it just returns the first function every time, is there a way to merge them since functions are technically objects aren't they? I think I may need to do something with prototypes but my understanding of them is still very limited.

Siguza · Accepted Answer · 2015-05-22 15:03:22Z

3

If Plugin is directly written in some third party code, you can rename and replace the old function:

var OldPlugin = Plugin;
Plugin = function(option)
{
    if (myvariable == true)
    {
        //seperate logic
        return /* anything? */;
    }
    return OldPlugin.apply(this, arguments);
}

Of course, any assigned references to OldPlugin must be replaced too:

$.fn.validator = Plugin; // After redefining "Plugin"

If Plugin is not directly written anywhere, but only called via $.fn.validator, then I would leave the original function intact and simply assign a new function to $.fn.validator, from where you can call the original Plugin function.

edited May 22, 2015 at 15:03

answered May 22, 2015 at 14:56

Siguza

24.6k6 gold badges58 silver badges105 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

jfriend00 Over a year ago

You should be using .apply(), not .call()for that particular situation.

A. Wolff Over a year ago

And I think you should return this; to keep jq chaining

Siguza Over a year ago

@A.Wolff OP provided a return; in his code, I just copied that.

A. Wolff Over a year ago

@Siguza ya but if original plugin returns matched set of elements, you should do the same, otherwise return; would be more relevant, that's true.

DasBeasto Over a year ago

Yah the return was psuedocode the actual return would make no sense in this context. This worked great though, in my particular scenario I didn't have to save the original to the "OldPlugin" variable, I just added the Plugin.apply(this, arguments); at the end of extendedPlugin and overwrote validator, but same concept thanks! (will accept soon)

xec · Accepted Answer · 2015-05-22 15:07:30Z

1

Is there a reason you can't simply call the old function from the extended one?

function Plugin(option) {
   //logic here
}
function extendedPlugin(option) {
   //seperate logic here
   // then call Plugin?
   return Plugin.call(this, option);
}

If you need the new function to have the original name, you can instead do what @Siguza answered

edited May 22, 2015 at 15:07

answered May 22, 2015 at 14:56

xec

18.1k3 gold badges50 silver badges58 bronze badges

5 Comments

jfriend00 Over a year ago

The value of this will not be correct when the old one is called this way.

xec Over a year ago

@jfriend00 Well spotted, I guess apply() is needed to preserve it. Editing.

jfriend00 Over a year ago

.apply() accepts an array as the 2nd argument. If you're going to just pass the argument itself, then you need .call(). And, you have to show how extendedPlugin gets hooked into jQuery in the first place. The answer as it stands is incomplete.

xec Over a year ago

I corrected the .call() - as for attaching to jQuery, isn't it largely irrelevant how it is done? something like $.fn.pluginName = extendedPlugin should do the trick?

jfriend00 Over a year ago

I don't know how you can say it's irrelevant. It's a required part of the solution.

MrAlex6204 · Accepted Answer · 2015-05-22 16:15:13Z

0

I think if you use JsonNode it will be more easy try doing this way

function plugin(option){
   option.execute();
}

$.fn.validator = Plugin;

And implement in this way

var process1 = {
       "execute":function(){
           alert('hello proccess #1');
       }
      };
var process2 = {
       "execute":function(){
           alert('hello process #2');
       }
      };

$.fn.validator(process1);
$.fn.validator(process2);

Or

if(myvariable){
     $.fn.validator(process1);
}else{
    $.fn.validator(process2);
}

edited May 22, 2015 at 16:15

answered May 22, 2015 at 15:11

MrAlex6204

1677 bronze badges

2 Comments

MrAlex6204 Over a year ago

This implementation is a pattern design most used in software development. It's make it more open and you can change the behavior dynamically

xec Over a year ago

You don't have to comment on your own answer, you can just edit it and append the information :) That said, I don't see how this answers the question about extending a function.

Collectives™ on Stack Overflow

Extend functionality of function javascript

3 Answers 3

5 Comments

5 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related