Question

Original question:

Note: Below plugin pattern based on the official jQuery docs.

I’m stuck… How can I convert the below plugin pattern to allow $.hooplah.defaults.whoop = 'there it was';?

;(function($) {

    var config = {};

    config.defaults = {
        foo   : 'bar',
        hey   : 'ho',
        whoop : 'there it is'
    };

    $.fn.hooplah = function(method) {

        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 on jQuery.hooplah.');
        }

    };

    var methods = {

        init: function(opts) {

            return this.each(function() {

                var options = $.extend({}, config.defaults, opts);

                // Stuff here...

            });

        }

    };

})(jQuery);

Optimally, I would like to do both $('.foo').hooplah({ whoop: 'there is was' }) and $.hooplah.defaults.whoop = 'there it was';.

Any tips/code/links would be greatly appreciated. 🙂

Many thanks in advance for the help!

---

Proposed solution #1

Calling syntax: $.pluginName.defaults

Code based on @AmithGeorge’s reply:

;(function($) {

    var config = {};

    config.others = {
        blah : 'nah',
        cha  : 'right!',
        last : 'one'
    }

    config.defaults = {
        foo   : 'bar',
        hey   : 'ho',
        whoop : 'there it is'
    };

    $.hooplah = {};
    $.hooplah.defaults = config.defaults;
    $.hooplah.others   = config.others;

    $.fn.hooplah = function(method) {

        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 on jQuery.hooplah.');
        }

    };

    var methods = {

        init: function(opts) {

            return this.each(function() {

                var defaults = $.extend({}, config.defaults, config.others, $.hooplah.defaults, $.hooplah.others);

                // After some lines...

                var options = $.extend({}, defaults, opts);

                console.log(options);

                // Stuff here...

            });

        }

    };

})(jQuery);

HTML:

<ul id="nav><li>...</li></ul>

<script type="text/javascript">
    <!--

        $(document).ready(function() {

            $.hooplah.defaults.foo = 'foooooo';
            $.hooplah.defaults     = { whoop : 'what?' };
            $.hooplah.others.blah  = 'why?';
            $.hooplah.others       = { cha : 'ok' }
            $nav = $('#nav');
            $nav.hooplah({
                hey  : 'hey hey',
                last : 'first'
            });

        });

    //-->
</script>

Output before:

blah     "nah"
cha      "right!"
foo      "bar"
hey      "ho"
last     "one"
whoop    "there it is"

Output after:

blah     "why?"
cha      "ok"
foo      "foooooo"
hey      "hey hey"
last     "first"
whoop    "what?"

---

Proposed solution #2

Calling syntax: $.fn.pluginName.defaults

Code based on @JonJaques reply:

;(function($) {

    var config = {};

    config.others = {
        blah : 'nah',
        cha  : 'right!',
        last : 'one'
    }

    config.defaults = {
        foo   : 'bar',
        hey   : 'ho',
        whoop : 'there it is'
    };

    var methods = {

        init: function(opts) {

            return this.each(function() {

                var options = $.extend({}, config.defaults, config.others, $.fn.hooplah.defaults, $.fn.hooplah.others, opts);

                console.log(options);

                console.log(config.others.last); // Outputs "one".

                // Stuff here...

            });

        }

    };

    $.fn.hooplah = function(method) {

        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 on jQuery.hooplah.');
        }

    };

    $.fn.hooplah.defaults = config.defaults;

    $.fn.hooplah.others = config.others;

})(jQuery);

HTML:

<ul id="nav><li>...</li></ul>

<script type="text/javascript">
    <!--

        $(document).ready(function() {

            $nav = $('#nav');

            $.fn.hooplah.defaults.foo = 'foooooo';
            $.fn.hooplah.defaults     = { whoop : 'what?' };
            $.fn.hooplah.others.blah  = 'why?';
            $.fn.hooplah.others       = { cha : 'ok' }
            $nav.hooplah({
                hey  : 'hey hey',
                last : 'first'
            });

        });

    //-->
</script>

Output before:

blah     "nah"
cha      "right!"
foo      "bar"
hey      "ho"
last     "one"
whoop    "there it is"

Output after:

blah     "why?"
cha      "ok"
foo      "foooooo"
hey      "hey hey"
last     "first"
whoop    "what?"

---

Awesome. 🙂

Let me know if the above code samples could be improved and/or if I overlooked something.

Thank you @AmithGeorge and @JonJaques! You folks seriously ROCK!

Answer 1

Why cant you just do this?

config.defaults = {
    foo   : 'bar',
    hey   : 'ho',
    whoop : 'there it is'
};

$.hooplah.config.defaults = config.defaults;

And in your init function, the first line will be

var defaults = $.extend({}, config.defaults, $.hooplah.config.defaults);
// after some lines
var options = $.extend({}, defaults, opts);

The advantage I see of doing it this way is, if some one were to replace the $.hooplah.config.defaults with an object that doesnt have the same keys as your config, your plugin can still get the default config values from the private variable.