Question

我有一个现有的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
            }

我不想更改现有的插件，你能告诉我如何通过扩展相同的插图或制作我自己的自定义插件来实现相同的目标吗？

编辑：我也尝试了下面提到的方法：

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

但我仍然将“Base方法调用”作为控制台输出。

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

我知道这不是非常具体（没有特定情况就很难），但希望它会让你开始走正确的道路！

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

覆盖jQuery插件中的函数

2 个答案: