I have an existing jQuery plugin, now I want to extend it. Consider the below mentioned plugin:

$.fn.x = function(option) {
        var def = {
            a: 1,
            b: 2
        };

        option = $.extend(def, option);
        function abc() {
            //do something
        }
        function def() {
            //do something
        }
    };

Now the above one is the plugin I got from somewhere. I need to have custom behavior for abc method, say

function abc() {
                //do something else
            }

I don't want to change the existing plugin, Can you tell me how could I achieve the same by extending the same or by making my own custom plugin ?

EDIT: I tried this too with method mentioned below:

        (function($) {
        $.fn.x = function(option) {
            var defaults = {
                a: 1,
                b: 2
            };

            option = $.extend(def, option);
            function abc() {
                //do something
                console.log('Base method called');
            }
            function def() {
                //do something
                abc();
            }
            def();
        };
    })(jQuery);

    (function() {
        var x = $.fn.x;
        $.fn.x.abc = function() {
            console.log('Overidden method called');
            //_x.abc();
        };
    })();


    $('<div/>').x();

But I am still getting "Base method called" as the console output.

I have an existing jQuery plugin, now I want to extend it. Consider the below mentioned plugin:

$.fn.x = function(option) {
        var def = {
            a: 1,
            b: 2
        };

        option = $.extend(def, option);
        function abc() {
            //do something
        }
        function def() {
            //do something
        }
    };

Now the above one is the plugin I got from somewhere. I need to have custom behavior for abc method, say

function abc() {
                //do something else
            }

I don't want to change the existing plugin, Can you tell me how could I achieve the same by extending the same or by making my own custom plugin ?

EDIT: I tried this too with method mentioned below:

        (function($) {
        $.fn.x = function(option) {
            var defaults = {
                a: 1,
                b: 2
            };

            option = $.extend(def, option);
            function abc() {
                //do something
                console.log('Base method called');
            }
            function def() {
                //do something
                abc();
            }
            def();
        };
    })(jQuery);

    (function() {
        var x = $.fn.x;
        $.fn.x.abc = function() {
            console.log('Overidden method called');
            //_x.abc();
        };
    })();


    $('<div/>').x();

But I am still getting "Base method called" as the console output.

• javascript
• jquery

• 1 Here's a nice article to get you started - bennadel.com/blog/… – HyderA Commented Aug 3, 2011 at 15:58
• Thanks, I have already gone though that link but it doesn't points to what I have mentioned in my question. – Rocky Singh Commented Aug 3, 2011 at 15:59

2 Answers 2

The best route can vary, but something that I've done in the past is to wrap the extension in my own! This works best when you're trying to operate on something that the plugin does without modifying its underlying code.

(function($){
    $.fn.extendedPlugin = function(options) {

        var defaults = {
            //...
        };
        var options = $.extend(defaults, options);

        //Here you can create your extended functions, just like a base plugin.

        return this.each(function() {
            //Execute your normal plugin
            $(this).basePlugin(options);

            //Here you can put your additional logic, define additional events, etc
            $(this).find('#something').click(function() {
              //...
            });
        });
    };
})(jQuery);

I know this isn't terribly specific (it's hard without a specific scenario), but hopefully it'll get you started down the right path!

This is as far as I got. But when I uncomment _x.abc.apply( this, arguments );, it gets stuck in a recursive loop.

Here's the jsfiddle if someone wants to play with and fix it: http://jsfiddle.net/TLAx8/

// PLUGIN DEFINITION

(function( $ ){
    $.fn.x = function(option) {
        var def = {
            a: 1,
            b: 2
        };

        option = $.extend(def, option);
        function abc() {
            console.log( 'Plugin method called' );
        }
        function def() {
            //do something
        }
    };
})( jQuery );


// OVERRIDING THE PLUGIN METHOD

(function(){
    var _x = $.fn.x;
    $.fn.x.abc = function() {
        console.log( 'Overidden method called' );
        //_x.abc.apply( this, arguments );
    }
})();


// INVOKING THE METHOD

(function() {
    $.fn.x.abc();
});