Handling JavaScript Complexity

Introduction

In the last two years, I have been learning the Revealing Module Pattern in JavaScript. This has lead to the development of a JavaScript framework.

Now I want to try and share some of the knowledge that I have found.

Background

I have struggled in the past with the chaos that I created in JavaScript.

A year ago, I stumbled across an article about the Revealing Module Pattern and I got interested.

It took quite some time to make it useful. I have found a lot of problems have to be solved. But in the end, I have developed a framework that I can reuse in many programs. This framework is available under the GNU General Public License.

For these articles, I have created a guitar in HTML5. You can see and play with it here.

The code will be made available on Github.

Using the Code

There are already a lot of articles about the Revealing Module Pattern, but these are very basic.

I will only show it here for some special features that I use.

( function() {

    window.mainModule = new function(){};

    // private 
    var self = window.mainModule;
    self.MODULE = 'mainModule';
    self.helloWorld = null;

    self.construct = function() {
    };
    self.sayHello = function() {
        if( !self.helloWorld ){
            self.helloWorld = new mainModule.helloWorldModule();
        }
        self.helloWorld.sayHello();
    };
    self.construct();
    // public
    return {
        sayHello : function() {
            self.sayHello();
        }
    };
})();

( function( mainModule ){
    mainModule.helloWorldModule = function( ) {

        // private
        var self = this;
        self.MODULE = 'helloWorldModule';
        // functions
        self.construct = function() {
        };
        self.sayHello = function() {
            alert( 'hello' );
        };

        self.construct();

        // public
        return {
            sayHello : function(){
                self.sayHello();
            }
        };
    };
})( mainModule );

window.onload = function() {
    mainModule.sayHello(); 
}

Above is the basic idea of the Revealing Module Pattern that I use.

I create a main module that is the initial controller.

When the page is loaded, the public sayHello function of the mainModule is called.

The main module creates the helloWorldModule and calls the sayhello function of this module.

Notice the use of the construct function. This is done so all the modules and functions are loaded before initialising the module.

Some modules also need a destruct function, but more on that later.

I create a file for each module during development. When loading the page, I load each script file, the mainModule must be loaded first.

For deployment, I have written a php script that combines these files to one file. This combined script can then be shrunk and obfuscated with an online tool.

Points of Interest

Here I have described the basic idea behind the Revealing Module Pattern.

This is only very basic but from the basic idea, you can build very complex JavaScript that is readable, structured, reusable and clear.

The framework that I have developed has solved a lot of things, for example I can now create animations that will not blow up my client's computer :-).

I really would like to hear from you if you think it is useful to continue my work on these posts here.

Next tip: Global Settings and Values

History

• 20^th November, 2015: Initial version