2
\$\begingroup\$

Goal: provide binding event mechanism which can use default or custom settings in a most proper, organised and readable way.

var module = (function () {
    var settingsDefault = {
        clickObject: 'body'
    };
    var s = settingsDefault;

    var init = function (settingsCustom) {
        s = settingsCustom;
        console.log(s);
    };

    var _click = function(clickObject){
        console.log('click occured on: ' + clickObject);
    };

    var bindEvent = (function () {

        var click = function () {
            $(s.clickObject).unbind('click').click(function() {
                _click(s.clickObject);
            });

            return this;
        };

        return {
            click: click
        }
    })();

    return {
        init: init,
        bindEvent: bindEvent
    }
})();

My concerns

  1. Did I use a good naming convention? Particularly: If I added the underscore for private _click method should I use the underscore for all private methods then?
  2. Is this a proper way to handle default and custom settings in revealing module pattern?
  3. Is it a good idea to keep all binding events in a separate method of my main module, or should I rather move them one level up or move them to a new module?
  4. If I use init method should I resign from IIFE and use module.init() method to initialize the module, or can I leave it as it is?
  5. Other suggestions unrelated to above concerns would be also appreciated.
\$\endgroup\$
0

1 Answer 1

3
\$\begingroup\$
  1. The names aren't too bad. Yes, if you're using underscore to indicate a private variable, then all privates should start with an underscore. I'd suggest:

    • _click could be _onClick
    • s could be settings.
  2. You're overwriting the settings completely. If there were a few more settings, I should be able to specify the ones I care about, but leave the default ones as is.

For example:

var settingsDefault = {
    clickObject: 'body',
    onClick: function(elSelector){
        console.log('clicked occurred on ' + elSelector);
    }
};
var s = settingsDefault;

var init = function (settingsCustom) {
    s = settingsCustom;
};

var _click = s.onClick;

In the above, if I do this:

module.init({
    clickObject: '.foo'
});

it'll blow up because s.onClick is not defined. You're better off to $.extend default settings with config settings.

var init = function(settingsCustom){
    s = $.extend({}, settingsDefault, settingsCustom);
};

This isn't quite true with your code, as the bind is an IIFE, but it does demonstrate the weakness in overwriting settings, rather than extending.

  1. I would suggest keeping all bindings happening within the module, where it is at the minute - this way, everything is in one place.

  2. I'm not a huge fan of IIFE's - the consumer should be in control of what happens when. I'd do away with the IIFE completely, but if it suits your needs, and you're happy to have your module as a singleton, then it's absolutely fine.

  3. Nothing else to add really. Consume your own code, see if it meets your needs - I've found that I rarely need a singleton, so it might not work as you're hoping. That said, I do use them sometimes - but not as often as I originally expected!

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.