JavaScript - Module Pattern

JavaScript Module Pattern

by Nirvanachain

HTML

<p id="print">Click Here</p>

<!-- Reference Article: 
http://css-tricks.com/how-do-you-structure-javascript-the-module-pattern-edition/
-->

JavaScript

var s;
ColorWidget = {
    
    settings : {
        color : 'blue',
        paragraph : $('#print')
    },


    init : function() {
        //kick things off
        s = this.settings; //s is a pointer to settings. Because of where s was declared, this means all sub-functions of the Module will have access to the settings.
        this.bindUIActions();
    },

    bindUIActions : function() {
        s.paragraph.on('click', function() {
            ColorWidget.changeColor(s.color);
        });
    },

    changeColor : function(newColor) {
        s.paragraph.css('color', newColor);
    }
    
};

(function() {
    ColorWidget.init();
})();