Global Settings and Values in Revealing Module Pattern

Introduction

This is my second post about the Revealing Module Pattern.

Here is the first post: Handling JavaScript Complexity

Background

Using global values in JavaScript can lead to collisions where you overwrite a function, value or object that is already defined.

When loading third party software, there can be unknown global values that you may not be aware of.

In the framework that I have created, using the Revealing Module Pattern, I have created a solution for this that I will describe in this tip.

Using the Code

When you are writing a complex JavaScript application, you need some settings and values that can be shared between objects and in this case between modules. Because I do not want to expose these values outside my own application, I have created two modules, the settingsModule that holds immutable values for the application and a valuesModule that holds mutable values.

Here is the settingsModule.

//    settingsModule
//
( function( mainModule ){
    mainModule.settingsModule = function( ) {

        // private
        var self = this;

        self.settings = {
            "someValue" :      2, 
            "anotherValue" :  20

        // functions                              
        self.construct = function() {
            // adding a get function to the main module
            mainModule.getSetting = self.get;
        };
        self.get = function( setting ) {
            if( self.settings[setting] !== undefined ){
                return self.settings[setting];
            }
            Console.log( 'unknown setting: ' +  setting );
            return false;
        };

        // initialize the class 
        self.construct();
        
        // public
        return {
        };
    };
    
})( mainModule );

The settingsModule adds a function getSetting to the mainModule. With this function, the other modules that are bound to the mainModule can get a value from the settings through the function:

mainModule.getSetting( 'some value' );

Something similar is done with the valuesModule. Here, I define global values that can be changed and are shared between different modules. There are two differences to the settingsModule:

• The values can be changed, so there is a setValue function.
• The values are grouped by a group name.

( function( mainModule ){
    mainModule.valuesModule = function( ) {

        // private
        var self = this;

        // the groups object stores groups and values
        self.groups = {};

        // functions
        self.construct = function() {
            // add functions to application 

            mainModule.addValue = self.addValue;
            mainModule.addValueList = self.addValueList;
            mainModule.getValue = self.getValue;
            mainModule.setValue = self.setValue;                        
        };

        self.addValue = function( id, group, value ) {

            // check if the group exists
            if( self.groups[group] === undefined ){
                // create the group
                self.groups[group] = {};
            }    
            // check if the value exists
            if( self.groups[group][id] !== undefined ){
                    // value exists error
                    Console.log( 'add value warning value already exists id: ' +  id );
                }                
            }
            else {
                // add the value
                self.groups[group][id] = value;
            } 
        };
        // add values according to list json{id,value}
        self.addValueList = function( valueList, group ) {
            Console.log( 'addValueList: group, :' + group );
            for (var key in valueList ) {
                self.addValue( key, group, valueList[key] );
            }                
        };
        // get  a value according to id
        self.getValue = function( id, group ) {
            // check if the id exists
            if( self.groups[group][id] !== undefined ){
                // return the value
                return self.groups[group][id];
            }
            // id not found error
            Console.log( 'get value error value not found id: ' +  id );
            return false;
        };
        // set  a value according to id
        self.setValue = function( id, group, value ) {
            // check if the value exists
            if( self.groups[group][id] !== undefined ){
                // set the value
                self.groups[group][id] = value;
            }
            // value not found error
            else {
                Console.log( 'set value error value not found id: ' +  id );
            }
        };

        // initialize the module 
        self.construct();
    };
    
})( mainModule );

The groups object of the valuesModule is used to store the values in json.

Before you can use the settings and values modules, you have to create them in your main module.

Create the modules in the mainModules construct function:

( function() {

    window.mainModule = new function(){};

      self.settings = null;
      self.values = null;
/*
    
*/

self.construct = function() {

    self.settings = new mainModule.settingsModule();
    self.values = new mainModule.valuesModule();

 };

/*

*/

})( mainModule );

Notice that I created a function to add a value or a list of values. The reason for creating these functions instead of just setting the values like with the settings needs some extra explanation that I will discuss in my next post, "Creating a basic project".

History

• 20^th November, 2015: Initial version