Question

我有一个名为＆＃34; myPlugin＆＃34;它使用常用的默认值设计模式，可以在初始化时覆盖。

我希望将插件扩展为＆＃34; myPlugin2＆＃34;而不是在初始化时传递重写值。并更改默认值，以便在我启动扩展插件时，它已具有所需的新默认值。

我已经为扩展插件添加了新方法，但我无法弄清楚如何更改默认值。

换句话说，我希望这两行代码能够提供相同的结果。

$("body").myPlugin({'prop1':'prop1 modified','default_func4':function () {console.log('default_func4 modified')}});
$("body").myPlugin2();

如何扩展jQuery插件并更改默认值？

http://jsfiddle.net/L1ng37wL/2/

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Testing</title>  
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js" type="text/javascript"></script>
        <style type="text/css">
        </style> 
        <script type="text/javascript"> 
            (function ($) {

                var defaults = {
                    'prop1'  : 'prop1',
                    'default_func4'  : function () {console.log('default_func4');},
                    'default_func5'  : function () {console.log('default_func5');}
                };
                var methods = {
                    init: function (options) {
                        console.log("init");
                        console.log('defaults',defaults);
                        console.log('options',options);
                        var settings = $.extend({}, defaults, options);
                        console.log('settings',settings);
                        console.log('The value of "prop1" is '+settings.prop1);
                        settings.default_func4.call()
                    },
                    func1: function () {console.log("func1");},
                    func2: function () {console.log("func2");}
                };

                $.fn.myPlugin = function (method) {
                    // Method calling logic
                    if (methods[method]) {
                        return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
                    } else if (typeof method === 'object' || !method) {
                        return methods.init.apply(this, arguments);
                    } else {
                        $.error('Method ' + method + ' does not exist');
                    }
                };

            })(jQuery);

            (function ($) {

                var methods = {
                    'func1': function () {console.log("myPlugin2: func1");},
                    'func3': function () {console.log("myPlugin2: func3");}
                }
                $.fn.myPlugin2 = function (method) {
                    //HOW DO I CHANGE defaults.prop1 and defaults.default_func5?????
                    // Method calling logic
                    if (methods[method]) {
                        return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
                    } else if ((typeof method === 'object' || !method) && methods.init) {
                        return methods.init.apply(this, arguments);
                    } else {
                        try {
                            return $.fn.myPlugin.apply(this, arguments);
                        } catch (e) {
                            $.error(e);
                        }
                    }
                }

            })(jQuery);

            $(function(){
                $("body").myPlugin({
                    'prop1':'prop1 modified',
                    'default_func4':function () {console.log('default_func4 modified')}
                });

                $("body").myPlugin2();
                //$("body").myPlugin2('func1');
                //$("body").myPlugin2('func2');
                //$("body").myPlugin2('func3');
            });

        </script>
    </head>

    <body>
    </body> 
</html>

Answer 1

对方法参数的双重检查对我来说感觉有点奇怪，但是如果我将try-block中的单行替换为下面的代码，那么事情就像它应该的那样，同时仍允许你提供一个对象甚至不同的选择。

var args = arguments;
if (typeof method === 'object' || !method) {
   // Fill args with the new defaults.
   args = {
      'prop1': 'prop1 modified',
      'default_func4': function () {
         console.log('default_func4 modified')
      }
   };
   $.extend(args, method);
   args = [args];
}
return $.fn.myPlugin.apply(this, args);

扩展jQuery插件并更改默认值

1 个答案: