Extending jQuery plugin and changing default values

Question

I have a plugin called "myPlugin" which uses the commonly used design pattern of default values which can be overridden upon initialization.

Instead of passing the overriding values upon initialization, I would like to extend the plugin as "myPlugin2" and change the default values so that when I initiate the extended plugin, it already has the desired new default values.

I've played around with adding new methods to the extended plugin, but I can't figure out how to change the default values.

In other words, I want the two lines of code to provide identical results.

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

How can I extend a jQuery plugin and change the default values?

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>

Remco van Dalen · Accepted Answer · 2014-10-14 14:48:53Z

1

The double check on the method parameter feels a bit weird to me, but if I replace your single line in the try-block to the code below, the thing works like it should, while still allowing you to supply an object with even different options.

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

answered Oct 14, 2014 at 14:48

Remco van Dalen

3041 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user1032531 Over a year ago

Instead of setting args to the new object, should args be extended by the new object?

user1032531 Over a year ago

Ah, it seems like the first element of args is the same as method, so it is effectively doing the same thing.

Remco van Dalen Over a year ago

If I remember correctly the properties of the first get overridden by the second when you use $.extend. That's why I change args to the defaults first, and THEN extend them with the method parameter. That way you can still override the defaults.

Collectives™ on Stack Overflow

Extending jQuery plugin and changing default values

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related