Переопределение функции в плагине jQuery

У меня есть существующий плагин jQuery, теперь я хочу его расширить. Рассмотрим приведенный ниже плагин:

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

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

Теперь вышеописанный плагин, который я получил откуда-то. Мне нужно иметь пользовательское поведение для метода abc, скажем

function abc() {
                //do something else
            }

Я не хочу менять существующий плагин. Можете ли вы рассказать мне, как я могу добиться того же, расширив его или создав собственный пользовательский плагин?

EDIT: Я тоже пробовал это с помощью метода, упомянутого ниже:

        (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();

Но я все еще получаю "базовый метод, называемый" в качестве вывода консоли.

Ответ 1

Лучший маршрут может отличаться, но что-то, что я делал в прошлом, - это обернуть расширение самостоятельно! Это лучше всего работает, когда вы пытаетесь работать над тем, что делает плагин, не изменяя его базовый код.

(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);

Я знаю, что это не очень специфично (это сложно без конкретного сценария), но, надеюсь, это приведет вас к правильному пути!

Ответ 2

Это насколько я понял. Но когда я раскомментирую _x.abc.apply( this, arguments );, он застревает в рекурсивном цикле.

Здесь jsfiddle, если кто-то хочет поиграть и исправить: 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();
});