Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/411.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 重写jQuery插件中的函数_Javascript_Jquery - Fatal编程技术网

Javascript 重写jQuery插件中的函数

Javascript 重写jQuery插件中的函数,javascript,jquery,Javascript,Jquery,我有一个现有的jQuery插件,现在我想扩展它。考虑下面提到的插件: $.fn.x = function(option) { var def = { a: 1, b: 2 }; option = $.extend(def, option); function abc() { //do something } function d

我有一个现有的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();
(函数($){
$.fn.x=函数(选项){
var默认值={
答:1,,
b:2
};
选项=$.extend(定义,选项);
函数abc(){
//做点什么
log('Base-methodcalled');
}
函数def(){
//做点什么
abc();
}
def();
};
})(jQuery);
(功能(){
var x=$.fn.x;
$.fn.x.abc=函数(){
log('调用了Overidden方法');
//_x、 abc();
};
})();
$('').x();

但我仍然将“Base method called”作为控制台输出。

最好的方法可能会有所不同,但我过去做过的一件事是用我自己的方式包装扩展!当您试图在不修改其底层代码的情况下操作插件所做的事情时,这种方法最有效

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

我知道这不是非常具体(没有具体的场景很难),但希望它能让你走上正确的道路

这就是我所能得到的。但是当我取消注释
\ux.abc.apply(这是参数)时,它陷入递归循环

如果有人想玩JSFIDLE并修复它,下面是JSFIDLE:


这里有一篇很好的文章让你开始-谢谢,我已经浏览了这个链接,但它没有指向我在问题中提到的内容。
// 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();
});