JS Revealing module Pattern, What Am I doing Wrong

Question

I've been trying to utilise the revealing module pattern, and thought I'd make a function for a non-css3 custom scroll bar.

var sb=(function($){

//Private
var settings=function(props){
    return{
        wrapper: props.wrapper ? document.getElementById(props.wrapper):null,
        thumb: props.thumb ? document.getElementById(props.thumb):null,
        track: props.track ? document.getElementById(props.track):null,
        left: props.left ? props.left:null,
        right: props.right ? props.right:null,
        contentWidth: props.contentWidth? props.contentWidth:null
    };
};

var LOG=function(input){
    console.log(input)
};

//Object Literal
return{
    Log:LOG,
    settings:settings
};

})(jQuery);

The above is the module. I am setting the values like so:

window.onload=function(){
    sb.settings({wrapper:'bodyWrapper',thumb:'thumb',track:'track'});
}

HOWEVER, when I try to test it, I keep getting 'undefined' and other errors. Running console.log(settings.wrapper)inside the module returns undefined. I really don't know where I'm going wrong, so any help would be much appreciated. Thanks in advance

Your function does not actually do anything (and does not create a `settings` variable!), but it just returns an object when called. Please show us how you are testing it. — Bergi, Jul 30 '13 at 22:01
@Bergi Thank you for the swift reply. How then would I go about creating a settings variable. In the module, i've tried retrieving the values parsed into settings, and get undefined. however, if i'm in settings and run `console.log(props.thumb)` for example, I get a returned value. — Luke Madhanga, Jul 31 '13 at 12:20

score 0 · Answer 1 · answered Jul 31 '13 at 14:19

Running console.log(settings.wrapper) inside the module returns undefined.

Of course, because settings is the function object (which doesn't have a wrapper property) and not the object is has returned when it was called. You seem to want

var sb = (function(){

    // private variables
    var settings = {};

    // public (exported) properties
    return {
        log: function(input) {
            console.log(input);
        },
        getSetting: function(name) {
            return settings[name];
        },
        setSettings: function(props){
            settings = { // assign to the private variable!
                wrapper: props.wrapper ? document.getElementById(props.wrapper) : null,
                thumb: props.thumb ? document.getElementById(props.thumb) : null,
                track: props.track ? document.getElementById(props.track) : null,
                left: props.left || null,
                right: props.right || null,
                contentWidth: props.contentWidth || null
            };
            return true;
        }
    };

})();

window.onload = function(){
    sb.setSettings({wrapper:'bodyWrapper',thumb:'thumb',track:'track'});
    sb.log(sb.getSetting("wrapper"));
}

Your help is most appreciated. I sort of see what I was doing wrong. Thank you once again! @Bergi — Luke Madhanga, Jul 31 '13 at 20:48

JS Revealing module Pattern, What Am I doing Wrong

1 Answers1