Implementing Modular Design Pattern And OOP In JavaScript

JavaScript and HTML are well known languages for web application development, and as a web developer it’s been a long time I have been working with these two languages.

As a web application architect and developer we have to take care of both server and client side programming languages. I have worked with lot of web applications/websites where I was involved in design and development. You may be aware of there are lot of OOPS practices and principles which you have been implementing in your application in order to deliver successful projects

There are SOLID principles and well known design patterns. I have seen and implemented few of them in my practice on Server Side programming (mostly C#), but I found lack of these principle and patterns in client side programming languages like JavaScript.

However, it’s been a while when we got good frameworks for client side development, and it’s worth to mention JQuery, Backbone, Amber and AngularJS which are open source and come up with a web established framework to deliver rich client application.

In most of the cases I have seen when time comes to write some client side code using JavaScript or JQuery, most of use write all the JavaScript function and variables in the same HTML/cshtml/aspx/jsp/php document where those are required. For example:

Here is a function to perform client side validation for age,

function validateAge()
{
    var age = parseInt($('#age').val());
    if (age < 20)
    {
        $('#error').html('Please enter a valid age');
    }
}

And generally we attach this in submit button or input element and perform age validation on change. And when our application move towards complexity we pollute global or window scope using this approach. In this article I am going to explain how we can create namespaces or modules, and further we will implement generic method in those modules. Since JavaScript doesn’t have any concept like class which we are familiar in many OOPS languages but it can be achieved using constructor function.

Let’s have a look into above function which is being used to verify age:

Problem: We cannot re-use this function in other views/pages. So wherever we will require age, validation we need to copy and paste.

Solution: Create a separate module.

Create a module for your application,

var validationModule =
    {
    config:
      {
        ApplicationName: 'Default',
        validationEnabled: true
    },
    validateAge: function(element)
      {
        if (this.config.validationEnabled == true)
        {
            return (parseInt($(element).val()) > 20);
        } else
        {
            throw 'Validations are disabled';
        }
    }
};

Now you are free to use this anywhere in your application in any way you want to use.

If you want to use this inside script you can use it like:

var myApp= validationModule;
var isValidAge = myApp. validateAge($('#age'));

Problem: Whenever we declare any variable in JavaScript there might be two cases: 

1. Global variable 
   var VERSION=1.2.0;
   
   
2. Private variable:
   

   function getDateOfBirth()
   {
       // private variable
       var age = parseInt($('#age').val());
       var dob = (new Date().getFullYear()) - age;
       return dob;
   }

There is a misconception about the scope of variable:

var config =
{
    user: 'Anupam'
}

function VerifyUser()
{

    if (config.user == 'Anupam')
    {
        var text = 'hi ' + config.user;
    } else
    {

        // invalid user

    }
    // text has scope beyond if block
    console.log(text);
}
VerifyUser();
console.log(text); // now undefined

Tip: If we define any variable without using var keyword anywhere in JavaScript it get injected in global scope. For example, x=’test’;

Try to run this example in your document and see output. Since we defined variable text inside if block but this is still available after the block.

While implementing modular programming in our application we can work with private member efficiently with the help of constructor function (if you are an AngularJS developer you might be aware of service, which is a very good example of constructor function).

Module with constructor function and with private members

Here is the same example with constructor function, using which we can use private members:

var validationModule = (function()
 {
    // current scope to variable module
    var module = this;

    // private variable
    var defaultConfig =
    {
        ApplicationName: 'Default',
        validationEnabled: true
    };

    module.getConfig = defaultConfig;

    module.setConfig = function(config)
    {
        defaultConfig.ApplicationName = config.ApplicationName;
        defaultConfig.validationEnabled = config.validationEnabled;
    };

    module.validateAge = function(age)
    {
            if (defaultConfig.validationEnabled == true)
            {
                return (parseInt(age) > 20);
            } else
            {
                throw 'Validations are disabled';
            }
        }
        // return module
    return module;
})();

Now using this module all the members which are module.* will be available in your application, because it is return type of our module. And you can also work with private member.

We can also share properties or global object using constructor parameter as follows.

(function(window, $)
 {
    // work with global window and JQuery object here
})(window, JQuery);

It was a quick start to develop large application using modular approach, so that we can handle dependencies easily in large applications. You can add events and can also extend your module using JavaScript prototype.

Hope you have enjoyed and leaned how we can work with OOP flavor in JavaScript. It would be my pleasure to answer and entertain your queries/suggestion.